echarts环形图中间默认显示总数，移入或点击图例时，中间显示对应的数据，移出时还原总数_echars环形图中间怎么显示数字

实现效果

echarts 配置

使用title属性实现该效果，text字段就是总数，然后可以使用top、left、right、bottom等4个方位调整至居中位置显示即可。

至于鼠标点击图例和移入移出图例的交互如下图：

其实就是通过这几个事件，来控制title的显示和隐藏来实现的，官网提供了很多ecahrts事件可以去官网查看。

事件代码

mounted() {
        this.init();
        this.$nextTick(() => {
            // 高亮时
            this.myChart.on('highlight', (e) => {
                this.myChart.setOption({
                    title: {
                        show: false
                    }
                });
            });
            // 取消高亮时
            this.myChart.on('downplay', (e) => {
                this.myChart.setOption({
                    title: {
                        show: true
                    }
                });
            });
            // 鼠标移入数据时
            this.myChart.on('mouseover', { componentType: 'series', seriesType: 'pie' }, (params) => {
                this.myChart.setOption({
                    title: {
                        show: false
                    }
                });
            });
            // 鼠标移出数据时
            this.myChart.on('mouseout', { componentType: 'series', seriesType: 'pie' }, (params) => {
                this.myChart.setOption({
                    title: {
                        show: true
                    }
                });
            });
        });
    }
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