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)
})
}
export default {
autoPlay
}
2、使用
import { autoPlay } from ‘./tools‘
autoPlay(myChart, option.series[0].data.length, 3000);