echarts中如何给柱状图增加滚动条

需求:当后台传递过来的数据过多的时候页面的柱图就会很拥挤如下图:

所以我们需要有一个横向的滚动条,让所有的柱子都能够展示

1.echarts 中有一个dataZoom 属性可以给图形增加一个横向的滚动条

javascript 复制代码

 dataZoom:[  
                    {
                        type: 'slider', //滑动条型数据区域缩放组件
                        realtime: true, //拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新。
                        height: 4,
                        endValue: 13,  //数据窗口范围的结束数值。如果设置了 dataZoom-inside.end 则 endValue 失效
                        fillerColor:ref == 'zhu1' ? " rgba(0,0,0,0.3)" :"transparent" , // 滚动条颜色
                        borderColor: "transparent",
                        handleSize:0, // 两边手柄尺寸
                        showDetail: false, // 拖拽时是否展示滚动条两侧的文字
                        top:'96%', //组件离容器上侧的距离
                        zoomLock:true, // 是否只平移不缩放
                    },
                    {
                        
                        type: "inside",  //内置型数据区域缩放组件
                        endValue: 13,  // 最多14个
                        zoomOnMouseWheel: false,  // 关闭鼠标滚轮缩放
                        moveOnMouseWheel: true, // 开启鼠标滚轮窗口平移
                        moveOnMouseMove: true  // 开启鼠标移动窗口平移
                        }
                    ],

最终效果:

2.当图像是纵向的时候我们就需要增加一个纵向的滚动条如图

javascript 复制代码

 dataZoom: [//滚动条
                {
                    yAxisIndex: 0,//这里是从X轴的0刻度开始
                    show: true,//是否显示滑动条，不影响使用
                    weight:2,
                    type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                    // startValue: value.length-1, // 从头开始。
                    // endValue: (value.length-1)+4, // 一次性展示5个。
                    startValue: 0, // 从头开始。
                    endValue: 4,
                    zoomOnMouseWheel: false,  // 关闭滚轮缩放
                    moveOnMouseWheel: true, // 开启滚轮平移
                    moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
                },
               {
                   yAxisIndex: 0,//这里是从X轴的0刻度开始
                    show: true,//是否显示滑动条，不影响使用
                    type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                    realtime: false,
                    fillerColor: " rgba(0,0,0,0.15)", // 滚动条颜色
                    borderColor: "transparent",
                    zoomLock:false, // 是否只平移不缩放
                    handleSize:0, // 两边手柄尺寸
                    width:this.getFontSize(8),
                    heigh:this.getFontSize(8),
                    bottom: this.getFontSize(25),
                    backgroundColor: 'transparent',
                    // borderRadius: 5,
                    brushSelect:false,
                    showDetail:false,
                    showDataShadow:false,
                }
            ],

注意:这个属性是写在option里面的