echarts 特殊饼图

这里只贴了 echarts 中的 option 代码

 const option = {
                //你的代码
                color: ['#FFC824', '#E2657A', '#67F1CC', '#4CB9F7', '#D6EAF2', '#9253DF'],
                title: {
                    text: 500,
                    subtext: '数量',
                    // sitemGap: 20,
                    x: 'center',
                    y: '25%',
                    textStyle: {
                        fontSize: 24,
                        fontWeight: 'bold',
                        color: '#FFF'
                    },
                    subtextStyle: {
                        fontSize: 16,
                        fontWeight: 'normal',
                        align: 'center',
                        color: '#FFF'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    width: '70%',
                    orient: 'horizontal',
                    bottom: '5%',
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 20,
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 14
                    }
                },
                series: [
                    {
                        name: '上市企业分布',
                        type: 'pie',
                        selectedMode: 'single',
                        center: ['50%', '35%'],
                        radius: ['30%', '40%'],
                        label: {
                            padding: [80, 0, -80, -20],
                            formatter: '{b}\n\n{c}',
                            color: '#fff',
                            fontSize: 12,
                            position: 'outside',
                            padding: [0, -40, 0, -30]
                        },
                        labelLine: {
                            length: 10,
                            length2: 70,
                            show: true,
                            color: '#00ffff',
                            fontSize: 15
                        },
                        data: [{ name: 'aaa', value: '30' }, { name: 'bbb', value: '3' }, { name: 'ccc', value: '10' }, { name: 'ddd', value: '20' }]
                    },
                    {
                        color: ['#163d59'],
                        type: 'gauge',
                        center: ['50%', '35%'],
                        startAngle: 150,
                        endAngle: -209.999,
                        splitNumber: 12,
                        radius: '20%',
                        pointer: {
                            show: false
                        },
                        progress: {
                            show: false,
                            roundCap: true,
                            width: 1
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                width: 10,
                                color: [
                                    [0, '#163d59'],
                                    [0.5, '#163d59'],
                                    [1, '#163d59']
                                ]
                            }
                        },
                        axisTick: {
                            distance: -25,
                            length: 12,
                            splitNumber: 5,
                            lineStyle: {
                                width: 2,
                                color: 'rgba(0, 0, 0, 0.05)'
                            }
                        },
                        splitLine: {
                            show: false,
                            distance: -35,
                            length: 10,
                            lineStyle: {
                                width: 2,
                                color: '#099fe4'
                            }
                        },
                        axisLabel: {
                            show: false
                        },
                        anchor: {
                            show: false
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            show: false
                        },
                        data: []
                    },
                    {
                        // 外层阴影圈
                        name: '阴影圈',
                        type: 'pie',
                        radius: ['40%', '50%'],
                        center: ['50%', '35%'],
                        emphasis: {
                            scale: false
                        },
                        tooltip: {
                            show: false
                        },
                        itemStyle: {
                            normal: {
                                labelLine: {
                                    show: false
                                },
                                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                                    {
                                        offset: 1,
                                        color: 'rgba(46, 114, 156, 0.0374)'
                                    },
                                    {
                                        offset: 0.5,
                                        color: 'rgba(149, 214, 255, 0.17)'
                                    },
                                    {
                                        offset: 0,
                                        color: 'rgba(46, 114, 156, 0.0374)'
                                    }
                                ]),
                                shadowBlur: 60
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [100]
                    }
                ]