//实例,index,移入移出的判断条件,最后的按需添加
handleSelectedActive(myEcharts, currentIndex, isSet, index) {
const that = this;
let option = myEcharts.getOption();
var chartHover = function() {
var dataLen = option.series[0].data.length;
// 取消之前高亮的图形
console.log(that.mapCurrentIndex);
myEcharts.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: that.mapCurrentIndex,
});
that.mapCurrentIndex = (that.mapCurrentIndex + 1) % dataLen;
// 高亮当前图形
myEcharts.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: that.mapCurrentIndex,
});
// 显示 tooltip
myEcharts.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: that.mapCurrentIndex,
});
};
// 2、鼠标移动上去的时候的高亮动画
myEcharts.on("mouseover", function(param) {
isSet = false;
clearInterval(that.setIntervalArr[index]);
// 取消之前高亮的图形
myEcharts.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: that.mapCurrentIndex,
});
// 高亮当前图形
myEcharts.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: param.dataIndex,
});
// 显示 tooltip
myEcharts.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: param.dataIndex,
});
that.mapCurrentIndex = param.dataIndex;
});
that.setIntervalArr[index] = setInterval(chartHover, 2000);
// 4、鼠标移出之后,恢复自动高亮
myEcharts.on("mouseout", function() {
if (!isSet) {
that.setIntervalArr[index] = setInterval(chartHover, 2000);
isSet = true;
}
});
},
echarts自动切换效果
最新推荐文章于 2024-07-09 17:41:07 发布