【vue】定时器+动态传参实现类幻灯片echarts图表轮播效果

数据如下：

      lineColor: [ '#5ED7D9', '#FBE451','#ff6200','#1B9EFA'],
      lineX: ['03.24', '03.25', '03.26', '03.27', '03.28', '03.29', '03.30'],
      lineData: [
        {name: '叶绿素a', value: [17, 25, 14, 21, 36, 58, 45]},
        {name: '总磷', value: [26, 13, 33, 11, 15, 26, 19]},
        {name: '总氮', value: [20, 37, 6, 29, 33, 36, 28]},
        {name: '氨氮', value: [20, 37, 6, 29, 33, 36, 28]},
        {name: '高锰酸盐', value: [20, 37, 6, 29, 33, 36, 28]},
        {name: '化学需氧量', value: [20, 37, 6, 29, 33, 36, 28]},
      ],
	 intervalId:null,
	 showIndex:0,

div部分：

             <div id="line" @click="lineDetail"></div>

js（折线图方法）：
动态传递渲染的数据项、dom（后期有个全部展示的，不需要的可以去掉）

lineInit(i,dom) {
      let lineDom
      let lineChart
      if (dom){
        lineDom = document.getElementById(dom)
      }else {
        lineDom = document.getElementById("line")
      }
      if(echarts.getInstanceByDom(lineDom)){
        echarts.dispose(lineDom)
      }
      lineChart = echarts.init(lineDom)
      const legendData = []
      const series = []
      let lineData = this.lineData
      // for (let i = 0; i < lineData.length; i++) {
        legendData.push(lineData[i].name)
        series.push({
          name: lineData[i].name,
          data: lineData[i].value,
          type: 'line',
          smooth: true,
          lineStyle: {color: this.lineColor[i%3]},
          areaStyle: {
            show: true,
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: this.lineColor[i%3] + '80'  // 0% 处的颜色
              }, {
                offset: 1, color: this.lineColor[i%3] + '10' // 100% 处的颜色
              }],
            }
          },
          markLine: {
            symbol: ['none', 'none'], // 去掉箭头
            label: {
              // show: false,
              position: 'end',
              formatter: "{c}",
              textStyle: {
                color: "#ffffff" //设置文字颜色
              },
            },
            data: [
              {
                name: '阈值',
                yAxis: this.markData[i] ||1
              }
            ],
            lineStyle: {
              type:'dashed',
              color: '#FF1D00',
              width: 2
            },
            tooltip: {
              show: true,
              formatter: "{b}+':'+{c}"
            }
          }

        })
      // }

      const lineOptions = {
        backgroundColor: 'transparent',
        color: this.lineColor[i%3],
        tooltip: {
          trigger: 'axis',
          backgroundColor: "rgba(10,10,10,0.5)", //设置背景图片 rgba格式
          color: "black",
          borderWidth: "1", //边框宽度设置1
          borderColor: "#67E0E3", //设置边框颜色
          textStyle: {
            color: "#ffffff" //设置文字颜色
          },
        },
        legend: {
          top: '9%',
          icon: 'roundRect',
          itemWidth: 20,
          itemHeight: 8,
          textStyle: {
            color: "#ffffffcc", //设置文字颜色
            fontSize: 16
          },
          // data:legendData
        },
        dataZoom: [
          {
            type: 'inside',
            realtime: true,
            start: 0,
            end: 100
          }
        ],
        grid: {
          left: '10%',
          bottom: '15%',
          width: '80%',
          height: "70%",
          top: '20%'
        },
        xAxis: {
          data: this.lineX,
          boundaryGap: false,
          axisLabel: {
            color: 'rgba(255,255,255,0.8)',
            fontSize: 12,
            fontWeight: 400,
          },
          nameTextStyle: {
            color: '#67E0E3',
            fontSize: 12
          },
        },
        yAxis: {
          type: 'value',
          splitNumber: 4,
          axisLabel: {
            color: 'rgba(255,255,255,0.8)',
            fontSize: 12,
            fontWeight: 400,
          },
          axisLine: {
            show: true
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: true
          }
        },
        series: series

      }
      lineChart && lineChart.setOption(lineOptions)
    },

js定时器部分代码：

let line = document.getElementById('line')
    let _this = this
    if (_this.intervalId){
      clearInterval(_this.intervalId)
    }
    _this.intervalId =  setInterval(()=>{
      _this.showIndex++
      _this.lineInit(_this.showIndex % _this.lineData.length)
    },5000)
    line.addEventListener('mouseenter',function (){
      clearInterval(_this.intervalId)
    })

    line.addEventListener('mouseleave',function (){
      _this.intervalId  =  setInterval(()=>{
        _this.showIndex++
        _this.lineInit(_this.showIndex % _this.lineData.length)
      },5000)
    })

效果图（自动切换）：