echarts饼状图中间显示数值加上名字

想实现的效果

<div id="echart" ></div>
<script>
function setEchartsPie(id, data) {
    let $el = document.getElementById(id);
    let myChart = this.echarts.init($el, '', {
        width: 450,
        height: 300,
    });
    let dataName = [];
    let total = 0;
    data.forEach((res) => {
        dataName.push(res.name);
        total += parseFloat(res.value) * 10000;
    });
    total = total / 10000;
    let option = {
        title: {
            zlevel: 0,
            text: [
                '{value|￥' + total + '}',
                '{name|总金额}',
            ].join('\n'),
            rich: {
                value: {
                    color: '#303133',
                    fontSize: 40,
                    fontWeight: 'bold',
                    lineHeight: 40,
                },
                name: {
                    color: '#909399',
                    lineHeight: 20
                },
            },
            top: 'center',
            left: '145',
            textAlign: 'center',
            textStyle: {
                rich: {
                    value: {
                        color: '#303133',
                        fontSize: 40,
                        fontWeight: 'bold',
                        lineHeight: 40,
                    },
                    name: {
                        color: '#909399',
                        lineHeight: 20
                    },
                },
            },
        },
        tooltip: { // 悬停指示
            trigger: 'item',
            formatter: "{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'right',
            data: dataName,
            itemGap: 30,
            top: 'middle',
            align: 'left',
            icon: 'circle',
            formatter: function (name) {
                return name;
            }
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['80%', '84%'],
                center: [150, '50%'],
                stillShowZeroSum: false,
                avoidLabelOverlap: false,
                zlevel: 1,
                label: {
                    normal: {
                        padding: [30, 30, 30, 30],
                        backgroundColor: '#fff',
                        show: false,
                        position: 'center',
                        formatter: [
                            '{value|￥{c}}',
                            '{name|{b}}'
                        ].join('\n'),
                        rich: {
                            value: {
                                color: '#303133',
                                fontSize: 40,
                                fontWeight: 'bold',
                                lineHeight: 40,
                            },
                            name: {
                                color: '#909399',
                                lineHeight: 20
                            },
                        },
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '16',
                            fontWeight: 'bold'
                        }
                    }
                },
                data: data
            }
        ],
        color: ['#410ADF','#F42850','#F6A93B','#7ED321','#282828']
    };
    myChart.setOption(option);
}
 
setEchartsPie('echart', [
    { value: 300, name: '课程报名' },
    { value: 350, name: '服装收费' },
    { value: 250, name: '物料收费' },
    { value: 100, name: '其它收费' },
]);
</script>