环形图echarts 饼配置项内容和展示

      const data = [{
        name: '数据1',
        value: 36,
        rate: 12
    },
    {
        name: '数据2',
        value: 20,
        rate: 20
    },
    {
        name: '数据3',
        value: 16,
        rate: -40
    },
    {
        name: '数据4',
        value: 10,
        rate: -15
    },
    {
        name: '数据5',
        value: 9,
        rate: 12
    },
   
]
let fontSize=30;
let value="16,186,046";
let center=['35%', '50%'];
option = {
    backgroundColor:"#000",
    color:["#4ba771","#29a1e6","#2979e6 ","#5d46d3"],
    title: {
       
    },
    legend: {
        // selectedMode: false, // 取消图例上的点击事件
        type: 'plain',
        icon: 'rect',
        orient: 'vertical',
        right: '30%',
        top: '35%',
        align: 'left',
        itemGap: 15,
        itemWidth: 20, // 设置宽度
        itemHeight: 20, // 设置高度
        symbolKeepAspect: false,
        textStyle: {
            color: '#fff',
            rich: {
                name: {
                    verticalAlign: 'right',
                    align: 'left',
                    width: 35,
                    fontSize,
                    lineHeight:40
                },
                value: {
                    align: 'left',
                    width: 60,
                    fontSize:26,
                    color:"#f4f4f4"
                },
                count: {
                    align: 'left',
                    width: 80,
                   fontSize:26,
                    color:"#f4f4f4"
                },
                
            }
        },
        data: data.map(item => item.name),
        formatter: function(name) {
            let str = ``;
            // console.log("objData", objData)
            data.map((item, index) => {
                if (item.name == name) {
                    let per=(item.value/100)*100;
                    str = `{name|${name}}\n{value|${(item.value)}}{count|${per.toFixed(2)}%}`
                }
            })
            return str;
        },
        
    },
    series: [{
        name: '数量',
        type: 'pie',
        radius: ['40%', '55%'],
        center,
        data: data,
        label: {
            normal: {
                show: true,
                
                position: 'center',
                formatter: `{value|${value}}\n{text|总量}`,
                rich: {
                    text: {
                        align: 'center',
                        verticalAlign: 'middle',
                        padding: 8,
                        fontSize: 50,
                        color:"#fff",
                    },
                    value: {
                        align: 'center',
                        verticalAlign: 'middle',
                        fontSize: 50,
                        color:"#fff",
                    }
                }
            },
            emphasis: {
                show: true,
                textStyle: {
                    fontSize: '12'
                }
            }
        },
        labelLine: {
            normal: {
                show: false
            }
        }
    }, {
            name: '',
            type: 'pie',
            startAngle: 80,
            radius: ['38%'],
            hoverAnimation: false,
               center,
            itemStyle: {
                color: 'rgba(66, 66, 66, 0)',
                borderWidth: 1,
                borderColor: '#fff',
            },
            data: [100],
        },{
            name: '',
            type: 'pie',
            startAngle: 80,
            radius: ['58%'],
            hoverAnimation: false,
               center,
            itemStyle: {
                color: 'rgba(66, 66, 66, 0)',
                borderWidth: 1,
                borderColor: '#fff',
            },
            
            data: [100],
        }]
};