2个注意点:
1、每次调用定时器之前需要先清除原有的定时器(clearInterval)
2、把定时器变量变为全局变量
注:写echarts地图需要自动轮播显示label标签,发现每次点击返回后定时器叠加了
解决方案:
//地图高亮轮播展示
var hourIndex = 0;
window.clearInterval(window.LabelTime);
window.LabelTime = window.setInterval(() => {
//dispatchAction echarts的API:触发图表行为
console.log("进来了Label1");
this.myChart.dispatchAction({
type: "downplay", //downplay 取消高亮指定的数据图形
seriesIndex: 0,
});
this.myChart.dispatchAction({
type: "highlight", //highLight 高亮指定的数据图形
seriesIndex: 0, //系列index
dataIndex: hourIndex, //数据index
});
this.myChart.dispatchAction({
type: "showTip", //showTip 显示提示框
seriesIndex: 0,
dataIndex: hourIndex,
});
hourIndex++;
//当循环到数组当中的最后一条数据后,重新进行循环
if (hourIndex > 11) {
hourIndex = 0;
}
}, this.toggleLabelTime);
//鼠标移入组件时停止轮播
this.myChart.on("mousemove", (e) => {
window.clearInterval(window.LabelTime); //清除循环
this.myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
});
this.myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex,
});
this.myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: e.dataIndex,
});
});
//鼠标移出组件时恢复轮播
this.myChart.on("mouseout", () => {
window.clearInterval(window.LabelTime); //清除循环
window.LabelTime = window.setInterval(() => {
console.log("进来了Label1");
this.myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
});
this.myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: hourIndex,
});
this.myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: hourIndex,
});
hourIndex++;
if (hourIndex > 11) {
hourIndex = 0;
}
}, this.toggleLabelTime);
});