双圆环代码

const d = [
    {value: 348, name: '内部人员'},
    {value: 735, name: '外部人员'}
]
const colors = ['#cfc100', '#1091ca']
const colors2 = ['#fff000', '#11b6ff']
const el = this.$refs.bgry_chart as HTMLElement
const width = el.offsetWidth
const myEchart = echarts.init(el)
myEchart.setOption({
    color: colors,
    title: {
        text: '1083\n总数',
        textAlign: 'center',
        textStyle: {
            color: 'white'
        },
        top: 104,
        left: 154
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        bottom: '15%',
        left: 'center',
        icon: "rect",
        orient: 'vertical',
        itemWidth: 14,
        itemHeight: 14,
        formatter: function (name, p)  {
            let sum = 0
            const c = d.find(item => item.name === name)
            d.forEach(i => {
                sum += i.value
            })
            return name + '   ' + c.value + '个   ' + ((c.value/sum)*100).toFixed(0) + '%'
        },
        textStyle: {
            color: 'white'
        }
    },
    series: [
        {
            name: '办公人员',
            type: 'pie',
            radius: ['34%', '46%'],
            top: -100,
            avoidLabelOverlap: false,
            itemStyle: {
                borderColor: 'rgba(255,255,255,0)',
                borderWidth: 2,
                color: (params: any) => {
                    return {
                        type: 'radial',
                        x: 159,
                        y: 125,
                        r: 106,
                        colorStops: [{
                            offset: .64, color: colors[params.dataIndex] // 0% 处的颜色
                        }, {
                            offset: .69, color: colors2[params.dataIndex] // 100% 处的颜色
                        }, {
                            offset: 1, color: colors2[params.dataIndex] // 100% 处的颜色
                        }],
                        global: true // 缺省为 false
                    }
                }
            },
            label: {
                show: false,
            },
            labelLine: {
                show: false
            },
            data: d
        },{
            name: '办公人员',
            type: 'pie',
            radius: ['54%', '56%'],
            top: -100,
            avoidLabelOverlap: false,
            itemStyle: {
                color: '#1091ca',
            },
            label: {
                alignTo: 'edge',
                color: '#ffffff',
                formatter: '{value|{c}}\n{name|{b}}',
                minMargin: 15,
                edgeDistance: 10,
                lineHeight: 20,
                rich: {
                    time: {
                        fontSize: 10
                    }
                }
            },
            labelLine: {
                length: 15,
                maxSurfaceAngle: 80
            },
            labelLayout: function (params: any) {
                var isLeft = params.labelRect.x < width / 2;
                var points = params.labelLinePoints;
                // Update the end point.
                points[2][0] = isLeft
                        ? params.labelRect.x
                        : params.labelRect.x + params.labelRect.width;

                return {
                    labelLinePoints: points
                };
            },
            data: d,
            silent: true,
        }, {
            name: '办公人员',
            type: 'pie',
            radius: ['26%', '28%'],
            top: -100,
            avoidLabelOverlap: false,
            itemStyle: {
                color: '#1091ca',
            },
            label: {
                show: false,
            },
            labelLine: {
                show: false
            },
            data: d,
            silent: true,
        }
    ]
})

效果如下：