MiniPieecharts 饼配置项内容和展示

参考 ant design minipie 的 UI 界面而制作,中间的调比和百分比,可以任选其一,由于使用title很难做到垂直居中,所以用了一个比较迂回的方法来实现。其他细节需要参考项目设计图来调整。

配置项如下
      option = {
    backgroundColor: '#fff',
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
                show: false
            },
            data:[
                {
                    value:335, 
                    itemStyle: {
                        color: '#fa9645',
                    }
                    
                },
                
                {
                    value:335,
                    itemStyle: {
                        color: '#f5f5f5',
                        emphasis: {color: '#f5f5f5'}
                    }
                    
                }
            ]
        },
        {
            type: 'scatter',
            data: [[0,0]],
            symbolSize: 1,
            label: {
                normal: {
                    show: true,
                    fontSize: 14,
                    color: '#333',
                    formatter: [
                        '{a|标题}',
                        '{b|50%}'
                    ].join('\n'),
                    rich: {
                        a: {
                            color: '#999',
                            fontWeight: 400,
                            padding: 5,
                            align: 'center'
                        },
                        b: {
                            fontSize: '24',
                            padding: 5,
                            align: 'center'
                        }
                    }
                }
            }
        }
    ],
    xAxis: {
        axisLabel: {show: false},
        axisLine: {show: false},
        splitLine: {show: false},
        axisTick: {show: false},
        min: -1,
        max: 1
    },
    yAxis: {
        axisLabel: {show: false},
        axisLine: {show: false},
        splitLine: {show: false},
        axisTick: {show: false},
        min: -1,
        max: 1
    }
};

    
截图如下