echarts空心圆 中间带统计 自定义样式

Posted 2021-03-11 kkvt

            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}}
{p|}
{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}
 {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"]
              };