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

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

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

 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.当图像是纵向的时候 我们就需要增加一个纵向的滚动条  如图

 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里面的