echarts tooltip悬浮框自动轮播 鼠标放上则暂停

在本项目中, echarts是引入的一个子组件，在父组件中配置好chartOptions和automove后传给子组件。

判断传入的automove为true时，则进行轮播。

<template>
  <div class="w-full h-full">
      <div ref="barChart" class="chart w-full h-full"></div>
  </div>
</template>

  props: {
    chartOptions: {
      type: Object,
      default () {
        return {}
      }
    },
    automove: {
      type: Boolean
    }
  },
  data () {
    return {
      chart: null,
      dataLength: null, // x轴项数
      timer: null,
      count: 0
    }
  },
  watch: {
    chartOptions: {
      deep: true,
      handler (data) {
          this.$nextTick(() => {
            this.chart.resize()
            this.chart.clear()
            this.chart.showLoading({
              text: '数据加载中 ...',
              color: '#0696e1', // 加载动画颜色
              textColor: '#fff',
              maskColor: 'rgba(0, 0, 0, 0.2)' // 遮罩层
            });
            this.initEcharts(data)
          })
        }
    },
  },
  mounted () {
    this.chart = echarts.init(this.$refs.barChart)
    this.chart.showLoading({
      text: '数据加载中 ...',
      color: '#0696e1', // 加载动画颜色
      textColor: '#fff',
      maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
    });
    this.chart.on('click', (param) => {
      this.$emit('emitData', param)
    })
    this.chart.on('click', (params) => {
      this.$emit('select', params)
    })
    // 图像随屏幕大小改变而改变
    window.addEventListener('resize', this._debounce(() => {
      if (this.chart) {
        this.$nextTick(() => {
          this.chart.resize()
        })
      }
    }))
  },

methods: {
    initEcharts (data) {
      this.chart.clear()
      this.chart.showLoading({
        text: '数据加载中 ...',
        color: '#0696e1', // 加载动画颜色
        textColor: '#fff',
        maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
      });
      const baseOptions = cloneDeep(echartsOptions.baseOptions)
      const options = merge(baseOptions, data)
      this.chart.setOption(options)
      if (this.automove) {
        this.dataLength = data.xAxis.data.length
        this._debounce(this.autoMove())
      }
      this.chart.hideLoading()
    },
    // 自动轮播
    autoMove (param) {
      let count = 0;
      let timer = this.timer;
      const dataLength = this.dataLength; // x轴项数
      if (timer) {
        clearInterval(timer);
        timer = null
      }
      const mychart = this.chart
      // 启动定时器开始轮播
      timer = setInterval(() => {
        // 清除之前的高亮
        mychart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0
        });
        // 当前下标高亮
        mychart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: count
        });
        mychart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: count
        });
        count++;
        if (count >= dataLength) {
          count = 0;
        }
      }, 5000);
      // 鼠标移入停止轮播
      this.chart.on('mouseover', function (params) {
        clearInterval(timer);
        mychart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0
        });
        mychart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: params.dataIndex
        });
        mychart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: params.dataIndex
        });
      });
      // 鼠标移出 在上一次count的位置后继续轮播
      this.chart.on('mouseout', function () {
        timer && clearInterval(timer);
        timer = setInterval(function () {
          mychart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0
          });
          mychart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: count
          });
          mychart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: count
          });
          count++;
          if (count >= dataLength) {
            count = 0;
          }
        }, 5000);
      });
    },
    // 防抖
    _debounce (fn, delay = 300) {
      let timer = null;
      return function () {
        const _this = this;
        const args = arguments;
        if (timer) clearTimeout(timer);
        timer = setTimeout(function () {
          fn.apply(_this, args);
        }, delay);
      };
    }
}