echarts 类目轴设置滚动效果
场景:图形X轴数据过长
效果:拖动滚动效果
设置 dataZoom
dataZoom: [{ show: true, type: 'slider', start: 0, end: 100, textStyle: { fontSize: px2px(22), 'color': '#71768C' } }]
记载数据时设置
1 if (this.labelData.length > 12) { 2 option.dataZoom[0].show = true 3 option.dataZoom[0].end = 10 * 100 / this.labelData.length 4 // 10条数据的比例显示, end有百分比设置效果 5 6 } else { 7 option.dataZoom[0].show = false 8 } 9 // labelData是x轴数据
效果
另外
1、设置滚动条的高度
直接设置height即可,官网没这个属性
2、设置滚动但不缩放
zoomLock = true