vue 折线图动态向右移动

initData() {
      var that = this;
      if (!that.lineChartData) return;
      this.option = {
        grid: {
          containLabel: true,
          left: 12,
          top: 45,
          right: 40,
          bottom: 0,
        },
        dataZoom: [
          {
            type: "slider",
            show: false,
            realtime: true,
            startValue: 0,
            endValue: 7, // 初始显示index0-30的数据,可根据你的数据量设置
            filterMode: "none",
          },
        ],
        xAxis: {
          type: "category",
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(172, 175, 173, .6)",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: "#fff",
            },
            margin: 15,
          },
          data: that.lineChartData.xData,
        },
        yAxis: [
          {
            type: "value",
            name: that.lineChartData.unit,
            nameTextStyle: {
              color: "#ffffff",
              padding: [2, 30, 2, 0],
            },
            // scale: true,
            splitNumber: 2,
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
              margin: 10,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(172, 175, 173, .6)",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed", //背景线为虚线
                color: "rgba(172, 175, 173, .1)", //左侧显示线
              },
            },
            data: [],
          },
        ],
        series: [
          {
            name: "123",
            type: "line",
            data: that.lineChartData.data,
            barWidth: 6,
            itemStyle: {
              normal: {
                color: "rgba(0, 214, 237, 1)",
                barBorderRadius: [10, 10, 10, 10],
              },
            },
            areaStyle: {
              //折线图覆盖面积
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "rgba(0, 0, 0, 0)",
                },
                {
                  offset: 1,
                  color: "rgba(0, 214, 237, 0.69)",
                },
              ]), //渐变色
            },
          },
        ],
      };
      var startNumber = 0;
      var xAxisDatalen = that.lineChartData.data.length;
      var len = 7; //这里请注意
      timer && clearInterval(timer);
      timer = setInterval(function () {
        if (startNumber === xAxisDatalen - len) {
          startNumber = 0;
        }
        //myChart.dispatchAction({
		    //type: 'dataZoom',
			//startValue: startNumber,
			//endValue: startNumber + len,
		//});
        that.option.dataZoom[0].startValue = startNumber;
        that.option.dataZoom[0].endValue = startNumber + len;
        startNumber++;
        that.refreshChart();
      }, 2000);
    },