echarts pie饼图中间显示总数 pie饼图类型之间设置白缝隙


效果图(源码放在最后面)

默认显示总数
在这里插入图片描述

鼠标悬停时显示对应的数值
在这里插入图片描述

一 . pie饼图中间显示总数

在这里插入图片描述

在这里插入图片描述

pie饼图类型之间设置白缝隙

1
2
3
4
5
6
7
8
9
10
11
12
13
itemStyle: {
      // 此配置
      normal: {
          borderWidth: 4,
          borderColor: '#ffffff',
      },
      emphasis: {
          borderWidth: 0,
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
      },
  }

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
91
92
93
94
95
96
97
98
99
let option = {
            title: {
                zlevel: 0,
                text: ['{name|订单数}', '{value|' + this.orderSum + '}'].join('\n'),
                top: '35%',
                left: '24%',
                textAlign: 'center',
                textStyle: {
                    rich: {
                        value: {
                            color: '#303133',
                            fontSize: 24,
                            lineHeight: 24,
                        },
                        name: {
                            color: '#909399',
                            fontSize: 14,
                            lineHeight: 35,
                        },
                    },
                },
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)',
            },
            color: ['#3aa1ff', '#36cbcb', '#4ecb73', '#fbd437', '#f2637b'],
            legend: {
                type: 'scroll',
                orient: 'vertical',
                left: '50%',
                top: 50,
                bottom: 20,
                icon: 'circle',
                itemGap: 25,
                formatter: function(name: any) {
                    let data = _this.getNum(name);
                    return name + ' | ' + data.percent + '      ' + '      ' + data.num;
                },
            },
            series: [
                {
                    name: '订单状态',
                    type: 'pie',
                    radius: ['60%', '75%'],
                    center: ['25%', '47%'],
                    avoidLabelOverlap: false,
                    stillShowZeroSum: false,
                    zlevel: 1,
                    label: {
                        normal: {
                            padding: [20, 20, 20, 20],
                            backgroundColor: '#fff',
                            show: false,
                            position: 'center',
                            formatter: ['{name|{b}}', '{value|{c}}'].join('\n'),
                            rich: {
                                value: {
                                    color: '#303133',
                                    fontSize: 24,
                                    lineHeight: 24,
                                },
                                name: {
                                    color: '#909399',
                                    fontSize: 14,
                                    lineHeight: 35,
                                },
                            },
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '16',
                                fontWeight: 'bold',
                            },
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false,
                        },
                    },
                    itemStyle: {
                        // 此配置
                        normal: {
                            borderWidth: 4,
                            borderColor: '#ffffff',
                        },
                        emphasis: {
                            borderWidth: 0,
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                        },
                    },
                    data: this.orderData,
                },
            ],
        };