echarts空心圓 中間帶統計 自定義樣式

            let option = {
                color:['#FFD700','#00CED1','#32CD32','#1E90FF'],   //環形顏色
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                graphic: [{
                    type: 'text',
                    top: '48%',
                    left: 'center',
                    style: {
                        text: '2888',
                        fontSize: '0.6rem cursive',
                        textAlign: 'center',
                        fill: '#13a7d1',
                    }
                },
                {
                    type: 'text',
                    top: '42%',
                    left: 'center',
                    style: {
                        text: "總計(人)",
                        fill: "#999",
                        fontSize: '0.22rem cursive',
                    }
                }],
                series: [
                    {
                        name: '訪問來源',
                        type: 'pie',
                        radius: ['40%', '60%'],
                        label: {
                            formatter: ' {b|{b}：}{c|{c}}',
                            backgroundColor: '#eee',
                            //borderColor: '#aaa',
                            borderWidth: 1,
                            borderRadius: 20,
                            // shadowBlur:3,
                            // shadowOffsetX: 2,
                            // shadowOffsetY: 2,
                            // shadowColor: '#999',
                            padding: [10, 30],
                            rich: {
                                b: {
                                    fontSize: '0.22rem cursive',
                                    color: '#676767',
                                },
                                c: {
                                    fontSize: '0.22rem cursive',
                                    color: '#30B6A2',
                                }
                            }
                        },
                        data: [
                            { value: 335, name: 'A1' },
                            { value: 310, name: 'A2' },
                            { value: 234, name: 'A3' },
                            { value: 135, name: 'A4' },
                        ]
                    }
                ]
            };

 

 

第二種

const totalLabel="總計";
            const totalValue="123";
            let option = {
                devicePixelRatio: window.devicePixelRatio,
                legend: {
                  show: false
                },
                series: [
                  {
                    type: "pie",
                    radius: [10, 10],
                    silent: true,
                    label: {
                      normal: {
                        show: true,
                        position: "center",
                        formatter: () => {
                          return `{a|${totalLabel}}\n{p|}\n{b|${totalValue}}{pre|人}`;
                        },
                        rich: {
                          a: {
                            fontSize: 24,
                            color: "rgba(0,0,0,0.45)"
                          },
                          p: {
                            width: "100%",
                            height: "24"
                          },
                          b: {
                            fontSize: 48,
                            color: "rgba(0,0,0,0.85)"
                          },
                          pre: {
                            fontSize: 24,
                            color: "rgba(0,0,0,0.45)"
                          }
                        }
                      },
                      emphasis: {
                        show: false
                      }
                    },
                    data: [{ value: 0, name: "", selected: true }]
                  },
                  {
                    type: "pie",
                    radius: ["35%", "60%"],
                    label: {
                      formatter: `{b}\n {c}`,
                      fontSize: 22,
                      color: "rgba(0,0,0,.65)"
                    },
                    data: [
                        { value: 335, name: 'A1' },
                        { value: 310, name: 'A2' },
                        { value: 234, name: 'A3' },
                        { value: 135, name: 'A4' },
                    ]
                  }
                ],
                color: ["#1890FF", "#13C2C2", "#2FC25B", "#FACC14", "#F04864"]
              };

 

圓環pc端 非es語法

var option = {
                backgroundColor: "#FFF",
                series: [{
                    name: '來源',
                    type: 'pie',
                    radius: ['50%', '85%'],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center',
                            formatter: '{b|{c}}{pre|%}',
                            rich: {
                                b: {
                                    fontSize: 12,
                                    color: "#17a2b8"
                                },
                                pre: {
                                    fontSize: 10,
                                    color: "#17a2b8"
                                }
                            }
                        }

                    },
                    data: [{
                        value: 12,
                        label: {
                            normal: {
                                show: true
                            }
                        }
                    },
                    {
                        value: 100 - 12,
                        name: ''
                    }
                    ]
                }]
            };