码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-02-08 00:07:45      阅读:351      评论:0      收藏:0      [点我收藏+]

标签:als   自定义   name   silent   idt   code   颜色   legend   ati   

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

 

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

标签:als   自定义   name   silent   idt   code   颜色   legend   ati   

原文地址:https://www.cnblogs.com/kkvt/p/12275068.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!