1.optiono配置

      leakLineOption: {
        grid: {
          left: '5%',
          right: '5%',
          top: '5%',
          bottom: '0%'
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0, // 强制显示所有标签
            formatter: function(value, index) {
              // value 是标签的值，index 是标签的索引
              return toDateString(value, 'yyyy-MM-dd HH:mm') // 将标签转为指定格式
            }
          },
          data: []
        },
        yAxis: {
          type: 'value',
          max: 0.9, // 设置最大值
          min: 0, // 最小值
          splitNumber: 3, // 刻度线
          axisLabel: {
            show: true
          },
          nameTextStyle: {
            color: 'white'
          }
        },
        series: [
          {
            data: [],
            type: 'line',
            lineStyle: {
              color: '#85a7ef'
            },
            symbol: 'none', // 去掉折线图中的节点
            smooth: false // true 为平滑曲线，false为直线
          }
        ],
        dataZoom: [
          {
            xAxisIndex: 0, // 实现y轴滚动
            show: false,
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 2, // 此处为想要在x轴上显示的数量减一
            orient: 'horizontal'
          }
        ]
      },

2.js代码

    autoMove() {
    
      this.timeOut = setInterval(() => {
        // clearInterval(this.timeOut)
        // 每次向后滚动一个，最后一个从头开始。
        // if(this.stopMove){ return }
        if (
          Number(this.leakLineOption.dataZoom[0].endValue) === this.pumpLength
        // 等于x轴总数
        ) {
          // 恢复到初始状态
          this.leakLineOption.dataZoom[0].endValue = 2
          this.leakLineOption.dataZoom[0].startValue = 0
        } else {
          this.leakLineOption.dataZoom[0].endValue =
            this.leakLineOption.dataZoom[0].endValue + 1
          this.leakLineOption.dataZoom[0].startValue =
            this.leakLineOption.dataZoom[0].startValue + 1
        }
      }, 3000)
    }

3.获取数据

           this.pumpLength = res.data.length
          this.leakLineOption.xAxis.data = res.data.map(item => item.time)
          this.leakLineOption.series[0].data = res.data.map(item => item.data)