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