饼图带标签echarts radius配置项内容和展示

可调试饼图,含legend,具体值已经占比

配置项如下
       let data1 = [
        { value: 998, name: "1-1" },
        { value: 673, name: "1-2" },
        { value: 797, name: "1-3" },
        { value: 521, name: "1-4" }
    ];
    let colorList = [
        "#02F2F3",
        "#68B5FB",
        "#D45A49",
        "#F3E58D",
        "#C0FE5D",
        "#15DE57",
        "#F9F936"
    ];
 option = {
    tooltip: {
            trigger: "item",
            formatter: "{b}: {c} ({d}%)"
        },
        legend: {
            orient: "vertical",
            bottom: "25%",
            right: "5%",
            textStyle: {
                fontSize: 14,
                color: "black"
            },
    formatter:function(name){
        let percent = 0;
        let total = 0;
        for (let i = 0; i < data1.length; i++) {
            total += data1[i].value;
        }
    const item = data1.filter((item) => item.name === name)[0];
        percent = (
            (item.value / total) *
            100
        ).toFixed(1);
    return `${name}:${percent}%`;
    }
        },
        series: [
            {
                type: "pie",
                center: ["35%", "50%"],
                radius: ["30%", "50%"],
                avoidLabelOverlap: false,
                roseType:'radius',
                label: {
                    show: false,
                    position: "center"
                },
                itemStyle: {
                    normal: {
                        color: function(params) {
                            return colorList[params.dataIndex];
                        }
                    }
                },
                labelLine: {
                    show: false
                },
                data: data1
            }
        ]
    };
    
截图如下