getMsg() {
var myChart = echarts.init(document.getElementById("left"));
let option = {
tooltip: {
trigger: "item",
formatter: "{b} : {c} ({d}%)"
},
legend: {
bottom: 10,
left: "center",
data: this.topInfo.list,
textStyle: {
color: "#333333",
fontSize: "10",
fontWeight: 400
},
type: "scroll"
},
series: [
{
type: "pie",
radius: "65%",
center: ["50%", "45%"],
selectedMode: "single",
data: this.topInfo.details,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
};
console.log(myChart);
myChart.setOption(option);
const selectPie = () => {
var dataLen = option.series[0].data.length;
currentIndex = (currentIndex + 1) % dataLen;
highlightPie();
};
let currentIndex = -1; // 当前高亮图形在饼图数据中的下标
let changePieInterval = setInterval(selectPie, 2000); // 设置自动切换高亮图形的定时器
const highlightPie = () => {
// 取消所有高亮并高亮当前图形
// 遍历饼图数据,取消所有图形的高亮效果
for (var idx in option.series[0].data)
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: idx
});
// 高亮当前图形
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: currentIndex
});
// 提示
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currentIndex
});
};
myChart.on("mouseover", params => {
// 用户鼠标悬浮到某一图形时,停止自动切换并高亮鼠标悬浮的图形
clearInterval(changePieInterval);
currentIndex = params.dataIndex;
highlightPie();
});
myChart.on("mouseout", () => {
// 用户鼠标移出时,重新开始自动切换
if (changePieInterval) clearInterval(changePieInterval);
changePieInterval = setInterval(selectPie, 2000);
});
},
饼状图 自动轮巡展示
最新推荐文章于 2024-07-29 11:53:27 发布