echarts 类目轴设置滚动效果

场景：图形X轴数据过长

效果：拖动滚动效果

设置 dataZoom

dataZoom: [{
          show: true,
          type: 'slider',
          start: 0,
          end: 100,
          textStyle: {
            fontSize: px2px(22),
            'color': '#71768C'
          }
        }]

记载数据时设置

 if (this.labelData.length > 12) {
        option.dataZoom[0].show = true
        option.dataZoom[0].end = 10 * 100 / this.labelData.length 
// 10条数据的比例显示， end有百分比设置效果
     
      } else {
        option.dataZoom[0].show = false
      }
// labelData是x轴数据

效果

另外

1、设置滚动条的高度

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

2、设置滚动但不缩放

 zoomLock  = true