echarts柱状图沿x轴滚动

主问题

当数据过多时，导致柱状图的x轴数据挤在一起，柱图上的标签也会重叠导致看不清内容。为解决此问题，需让柱状图能沿x轴滚动

解决方法

dataZoom: [
      {
        type: 'inside', // 内置在坐标系中
        start:0, // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
        end:20, // 数据窗口范围的结束百分比。范围是：0 ~ 100。
        startValue: 0, // 数据窗口范围的起始数值。如果设置了 dataZoom-inside.start 则 startValue 失效。
        endValue: 7, // 数据窗口范围的结束数值。如果设置了 dataZoom-inside.end 则 endValue 失效。
        zoomLock: true, // 是否锁定选择区域（或叫做数据窗口）的大小。
      }

注意

1. start、end和startValue、endVlaue二选一，不要同时使用，可根据实际场景进行选择
2. 将zoomlock设置为 true ，让其只能平移，不能缩放。

案例

横向滚动

chartMoveX(start, end) {
    this.barInstance.dispatchAction({
      type: 'dataZoom',
      startValue: start,
      endValue: end
    });
    if (end >= this.maxIndex) {
      this.chartCurrentIndex = 0;
    } else {
      this.chartCurrentIndex = end + 1;
    }
  }

延伸问题

因splitNumbe 只是个预估值，在类目轴中无效，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。所以在滚动的过程中，y轴有可能会出现变化

解决办法

坐标轴刻度取值算法（转载）
个人理解：y轴参数，不止要给出splitNumber 还要给出min 、max 、interval 即可固定y轴的分割段数，后三个参数可通过上述方法计算获取

具体代码可见：
柱状图横向自动滚动