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);