项目场景：
实现echarts饼图自动切换动画
问题描述：
鼠标进入饼图高亮显示后进入其他饼块不会取消上一个饼块高亮。
效果
http://yang-jiahui-220.gitee.io/hb_bigdata/index.html
解决方案：
index= param.dataIndex
1
解决文章所述问题记录上一次选中值重新进入时取消高亮
var flag = true; // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
var _this = this;
var index= 0;
//此处是echarts实例化 可自行跳过 （实例化开始）
var chart = this.$echarts.init(document.getElementById("echart1"));
var option = {
tooltip: {
trigger: "item",
formatter: "{b} : {c} ({d}%)"
},
legend: {
// orient: 'vertical',
// top: 'middle',
type: "scroll",
orient: "vertical",
right: 10,
top: 0,
bottom: 20,
left: "left",
textStyle: {
color: "#fff",
fontSize: 12
}
},
grid: {
x: "-10%",
y: 40,
x2: 20,
y2: 20
},
color: ["#09d0fb", "#91CC75", "#95f8fe", "#f9f390", "#ecfeb7"],
series: [
{
type: "pie",
radius: "75%",
center: ["50%", "50%"],
selectedMode: "single",
data: [
{ value: 1548, name: "运行" },
{ value: 535, name: "待机" },
{ value: 510, name: "故障" },
{ value: 634, name: "维修" },
{ value: 735, name: "停机" }
],
label: {
//标识
normal: {
position: "outside",
formatter: "{b}: {d}%",
textStyle: {
fontSize: 12
}
}
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
};
chart.setOption(option);
//此处是echarts实例化 可自行跳过 （实例化结束）
// 鼠标移动上去的时候的高亮动画
chart.on("mouseover", function(param) {
flag = false;
clearInterval(_this.startCharts);
//取消之前高亮图形
chart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: charPiecurrentIndex
});
index= param.dataIndex
//**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮
//高亮当前图形
chart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: param.dataIndex
});
//显示tooltip
chart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: param.dataIndex
});
});
//图标随窗口大小缩放
window.addEventListener("resize", function() {
chart.resize();
});
//自动高亮显示
var chartHover = function() {
console.log(charPiecurrentIndex)
var dataLen = option.series[0].data.length;
// 取消之前高亮的图形
chart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: charPiecurrentIndex
});
index= (index+ 1) % dataLen;
// 高亮当前图形
chart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: charPiecurrentIndex
});
// 显示 tooltip
chart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: charPiecurrentIndex
});
};
_this.startCharts = setInterval(chartHover, 2000);
// 4、鼠标移出之后，恢复自动高亮
chart.on("mouseout", function(param) {
if (!isSet) {
_this.startCharts = setInterval(chartHover, 2000);
flag = true;
}
});
以上就是解决方案，希望如果有误的地方或者有更好的解决方案劳烦评论这对我很重要，谢谢大家。
下面是我解决该问题时找到的一些关于相关的一些链接，谢谢各位~
echart 饼图动画
echarts API action 之 dispatchAction
Echarts学习之二十三：action图表行为的相关操作
————————————————
原文链接：https://blog.csdn.net/Jiahui_Yang/article/details/111355144
0条大神的评论