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 // 鼠标移动能触发数据窗口平移 }]}
大功告成 !