ECharts图标数据过多添加滚动条

以echarts柱状图滚动条为示例，步骤如下：

1.存入数据 加入滚动条显示判断

var data = []; //这里存入数据 判断使用var scrollBar = false;var num = 0;if (data.length > 0) {num = Math.floor(100 / (data.length / 7)); //这个7是用来判断当前视图要显示几个if (data.length > 7) {showEchart = true;} else {showEchart = false;}}

2.添加滚动条(可以直接复制放入 option)

var option = {dataZoom: [{type: 'slider',realtime: true,start: 0,end: namenum, // 数据窗口范围的结束百分比。范围是：0 ~ 100。height: 5, //组件高度left: 5, //左边的距离right: 5, //右边的距离bottom: 10, //下边的距离show: showEchart, // 是否展示fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色borderColor: "rgba(17, 100, 210, 0.12)",handleSize: 0,//两边手柄尺寸showDetail: false, //拖拽时是否展示滚动条两侧的文字zoomLock: true, //是否只平移不缩放moveOnMouseMove: false, //鼠标移动能触发数据窗口平移//zoomOnMouseWheel: false, //鼠标移动能触发数据窗口缩放//下面是自己发现的一个问题，当点击滚动条横向拖拽拉长滚动条时，会出现文字重叠，导致效果很不好，以此用下面四个属性进行设置，当拖拽时，始终保持显示六个柱状图，可结合自己情况进行设置。添加这个属性前后的对比见**图二**startValue: 0, // 从头开始。endValue: 6, // 最多六个minValueSpan: 6, // 放大到最少几个maxValueSpan: 6, // 缩小到最多几个},{type: "inside", // 支持内部鼠标滚动平移start: 0,end: namenum,zoomOnMouseWheel: false, // 关闭滚轮缩放moveOnMouseWheel: true, // 开启滚轮平移moveOnMouseMove: true // 鼠标移动能触发数据窗口平移 }]}

大功告成 ！