echarts环形图,存在多个配置项时,环形中间需要默认显示,选中某项配置,鼠标移入其他配置时,依然能够切换其他配置效果
<template>
<div class="home">
<div style="width: 500px; height: 500px" ref="main"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "HomeView",
data() {
return {
Circularchart: {
tooltip: {
trigger: "item",
},
legend: {
top: "5%",
left: "left",
orient: "vertical",
},
color: ["#F72C5B", "#7dbcca", "#e9c66d", "#6fab72", "#d853d9"],
series: [
{
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
label: {
fontSize: 16,
lineHeight: 20,
position: "center",
formatter: (params) => {
// 设置默认显示第一个数据,函数接收一个参数,拿到所有配置项,遍历所有配置项,判断,下标为0的,第一个配置项信息,return 出去设置为默认值。
console.log(params);
if (params.dataIndex === 0) {
console.log(params.percent);
return ("{Proportiondefault|" + params.percent.toFixed(2) + "%}" + "\n{name|" + params.name + "}");
} else {
return "";
}
},
emphasis: {
formatter: (params) => { //切换非默认选项配置数据展示
if (params.dataIndex != 0) {
return ("{Proportiondefault|" + params.percent.toFixed(2) +"%}" + "\n{name|" + params.name +"}");
} else {
return;
}
},
},
rich: {
Proportion: {
//切换的数字参数配置
fontSize: 35, //显示样式大小
backgroundColor: "white", //覆盖数据的背景
},
name: {
//切换的,name名字配置
color: "#333",
fontSize: 20,
backgroundColor: "white",
},
Proportiondefault: {
fontSize: 30,
backgroundColor: "white",
},
},
},
labelLine: {
show: false,
},
data: [
{ value: 746, name: "A" },
{ value: 735, name: "B" },
{ value: 580, name: "C" },
{ value: 484, name: "D" },
{ value: 300, name: "E" },
],
},
],
},
};
},
mounted() {
let myChart = echarts.init(this.$refs.main);
myChart.setOption(this.Circularchart);
},
};
</script>
效果图=> 默认显示A
切换hover,其他配置