Echarts环形图中间配置默认显示，hover到其它选项时，会切换显示当前展示。移除展示默认。_echarts 环形图 内部默认显示图例

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

效果图=> 默认显示A

切换hover，其他配置