vue中echarts自动轮播tooltip问题

export function autoHover(myChart, option, num, time) {
    var defaultData = {
        // 设置默认值
        time: 2000,
        num: 100
    }
    if (!time) {
        time = defaultData.time
    }
    if (!num) {
        num = defaultData.num
    }
    var count = 0
    var timeTicket = null
    timeTicket && clearInterval(timeTicket)
    timeTicket = setInterval(function () {
        myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0 // serieIndex的索引值   可以触发多个
        })
        myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataindex: count
        })
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: count
        })
        count++
        if (count >= num) {
            count = 0
        }
    }, time)
    myChart.on('mouseover', function (params) {
        clearInterval(timeTicket)
        myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0
        })
        myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: params.dataIndex
        })
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: params.dataIndex
        })
    })

    myChart.on('mouseout', function () {
        timeTicket && clearInterval(timeTicket)
        timeTicket = setInterval(function () {
            myChart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0 // serieIndex的索引值   可以触发多个
            })
            myChart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: count
            })
            myChart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: count
            })
            count++
            if (count >= 17) {
                count = 0
            }
        }, 3000)
    })
}
export default {
    autoHover
}

import { autoHover } from '@/utils/tool.js'	// 引入封装的函数

export default {
  mounted() {
    this.initLine()
  },
  methods: {
    // 折线图
    initLine() {
      var myChart = echarts.init(document.getElementById('manyLine'));
      let option = {
      // ......此配置省略
      }
      myChart.setOption(option, true);
      // 自动轮播
      autoHover(myChart, this.option, 4, 3000); // 参数分别为：容器，配置，轮播数量，轮播间隔时间
    }
  }
}

import * as echarts from 'echarts';
 
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
 
option = {
  title: {
    text: 'Referer of a WEBsite',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'UNIOn Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
let count = 0;
setInterval(() => {
  myChart.dispatchAction({
    type: 'downplay',
    seriesIndex: 0,
    dataIndex: count
  });
  count++;
  if (count === 5) {
    count = 0;
  }
  myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: count
  });
}, 5000);
 
option && myChart.setOption(option);

<script>
import * as echarts from 'echarts'
import 'zrender/lib/svg/svg'
import { debounce } from 'throttle-debounce'
export default {
  name: '',
  props: ['option', 'renderer', 'notMerge', 'lazyUpdate'],
  data () {
    return {
      width: '100%',
      height: '100%',
    }
  },
  watch: {
    option (val) {
      this.setOption(val)
    },
  },
  created () {
    this.chart = null
  },
  async mounted () {
    // 初始化图表
    await this.initChart(this.$el)
    // 向父组件传递chart实例
    this.$emit('send', this.chart)
    // 将传入的配置(包含数据)注入
    this.setOption(this.option)
    // 监听屏幕缩放，重新绘制 echart 图表
    window.addEventListener('resize', debounce(100, this.resize))
  },
  updated () {
    // 每次更新组件都重置
    this.setOption(this.option)
  },
  beforeDestroy () {
    // 组件卸载前卸载图表
    this.dispose()
  },
  methods: {
    initChart (el) {
      // renderer 用于配置渲染方式 可以是 svg 或者 canvas
      const renderer = this.renderer || 'canvas'
      return new Promise(resolve => {
        setTimeout(() => {
          this.chart = echarts.init(el, null, {
            renderer,
            width: 'auto',
            height: 'auto',
          })
          resolve()
        }, 0)
      })
    },
    setOption (option) {
      if (!this.chart) {
        return
      }
 
      const notMerge = this.notMerge
      const lazyUpdate = this.lazyUpdate
 
      this.chart.setOption(option, notMerge, lazyUpdate)
    },
    dispose () {
      if (!this.chart) {
        return
      }
 
      this.chart.dispose()
      this.chart = null
    },
    resize () {
      this.chart && this.chart.resize()
    },
    getInstance () {
      return this.chart
    },
  },
  render () {
    const { width, height } = this
    return (
      <div
        class='default-chart'
        style={{ width, height }}
      />
    )
  },
}
</script>

<script>
import SubTitle from './SubTitle'
import Chart from '../Chart'
export default {
  name: '',
  data () {
    return {
      myChart: null,
      option: 省略...(与上文option设置相同 可复制于此)
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.pieActive()
    })
  },
  methods: {
    // 饼状图轮播
    pieActive () {
      let count = 0
      let length = this.option.series[0].data.length
      setInterval(() => {
        this.myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: count,
        })
        count++
        if (count === length) {
          count = 0
        }
        this.myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: count,
        })
      }, 5000)
    },
    getChart (chart) {
      this.myChart = chart
    },
  },
  render () {
    return (
      <div style="height:250px;width:480px;position:absolute;left:1402px;top:772px;display:flex;flex-direction: column;">
        <SubTitle title="省份销售占比图"/>
        <div style="flex: 1; position: relative;">
          <Chart option={this.option} on-send={this.getChart} style="position: absolute;top: 10px;"/>
        </div>
      </div>
    )
  },
}
</script>
 
<style lang="sCSS" scoped></style>