方法定义:
//echarts动效 chart是echarts对象,op是echarts的内容,sec是动画时间间隔
dynamic(chart, op, sec) {
op.currentIndex = -1;
let timer;
timer = setInterval(function () {
let dataLen = op.series[0].data.length;
// 取消之前高亮的图形
chart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: op.currentIndex
});
op.currentIndex = (op.currentIndex + 1) % dataLen;
// 高亮当前图形
chart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: op.currentIndex
});
// 显示 tooltip
chart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: op.currentIndex
});
}, sec);
return timer;
},
vue中调用:
this.timer = this.dynamic(crjChart, this.crjOption, 3000);
注意,定时器在离开组件时记得清除
destroyed() {
clearInterval(this.timer);
this.timer = "";
},