echarts自动轮播tooltip

1. 将自动轮播的工具函数封装到 utils/echart-tooltip-carousel.js

/**
 * echarts自动轮播tooltip
 * @param {Object} chart echart实例
 * @param {Number} num 轮播数量
 * @param {Number} time 轮播间隔时间
 */
export function loopShowTooltip(chart, num=20, time=2000) {
  let count = 0
  // 将定时器挂到echart实例上
  chart.timer && clearInterval(chart.timer)
  chart.timer = setInterval(function () {
    chart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0
    })
    chart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: count
    })
    chart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: count
    })
    count++
    if (count >= num) {
      count = 0
    }
  }, time)

  chart.on('mouseover', function (params) {
    clearInterval(chart.timer)
    chart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0
    })
    chart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: params.dataIndex
    })
    chart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: params.dataIndex
    })
  })

  chart.on('mouseout', function () {
    chart.timer && clearInterval(chart.timer)
    chart.timer = setInterval(function () {
      chart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0
      })
      chart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: count
      })
      chart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: count
      })
      count++
      if (count >= num) {
        count = 0
      }
    }, time)
  })
}
export default {
  loopShowTooltip
}

2.在vue3中使用的示例

3.效果