echarts中使图表循环显示tooltip-封装tooltip的方*询显示图表数据

1、一个适用于所有图表斗可用的工具方法

问题:
在做echarts图表时,如何让图标的数据轮询显示,并且鼠标移上去时就停止跳动,移开继续轮询。
解决:

/**
 * @description: 图表tooltip循环显示
 * @author: candy.d.chen
 * @LastEditors: candy.d.chen
 * @LastEditTime: 2021/6/25 10:39
 */
// 内容可以不需要修改
/**
* maChart是echarts初始化的实例对象
* num 是series 里面的data长度,传入值可为option.series[0].data.length
* time 是时间间隔

*/
export function autoPlay(myChart, num, time) {
  const defaultData = { // 设置默认值
    time: 3000,
    num: 100
  };
  if (!time) {
    time = defaultData.time
  }
  if (!num) {
    num = defaultData.num
  }
  let count = 0
  let timeTicket = null
  timeTicket && clearInterval(timeTicket)
  timeTicket = setInterval(() => {
    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', (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', () => {
    timeTicket && clearInterval(timeTicket)
    timeTicket = setInterval(() => {
      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)
  })
// 注意使用vue或者react 框架时,页面重新渲染时要清除相应的定时器,避免页面错乱,所以这里把
timeTicket 返回出去,以便销毁清除定时器
 return timeTicket
} export default { autoPlay } 

2、使用

import { autoPlay } from './tools'

autoPlay(myChart, option.series[0].data.length, 3000);

  

原文地址:https://www.cnblogs.com/CandyDChen/p/15184295.html