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轴数据

View Code

效果

另外

1、设置滚动条的高度

直接设置height即可，官网没这个属性

2、设置滚动但不缩放

echarts 类目轴设置滚动效果

zoomLock = true