echarts pie餅圖中間顯示總數 pie餅圖類型之間設置白縫隙

效果圖(源碼放在最後面)

默認顯示總數

鼠標懸停時顯示對應的數值

一 . pie餅圖中間顯示總數

pie餅圖類型之間設置白縫隙

itemStyle: {
      // 此配置
      normal: {
          borderWidth: 4,
          borderColor: '#ffffff',
      },
      emphasis: {
          borderWidth: 0,
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
      },
  }

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,
                },
            ],
        };