多组圆环数据展示echarts 饼配置项内容和展示

多组圆环数据展示

       var data = [
        {
            name: '一级告警',
            value: 200
        },{
            name: '二级告警',
            value: 44
        },{
            name: '三级告警',
            value: 35
        }];
        const namArr = data.map(item => item.name);
        let totalCount = 0;
        data.forEach(item => {
            totalCount += item.value;
        }); 
        const titleArr= [], seriesArr=[], colors=[['#ff3d46', '#1e5486'],['#fdff00', '#1e5486'],['#009dff', '#1e5486']];
        data.forEach(function(item, index){
            titleArr.push(
                {
                    text:item.name,
                    // left: index === 0 ? '30%' : (30 * index + 10) + '%',
                    top: '65%',
                    textAlign: 'center',
                    textStyle: {
                        fontWeight: 'normal',
                        fontSize: '16',
                        color: colors[index][0],
                        textAlign: 'center',
                    },
                }        
            );
            seriesArr.push(
                {
                    name: item.name,
                    type: 'pie',
                    clockWise: false,
                    radius: [28, 35],
                    itemStyle:  {
                        normal: {
                            color: colors[index][0],
                            shadowColor: colors[index][0],
                            shadowBlur: 0,
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                        }
                    },
                    hoverAnimation: true,
                    center: window.innerWidth > 1400 ? (index === 0 ? ['25%','50%'] :[( 25 + 12 * index ) + '%','50%']) : (index === 0 ? ['35%','50%'] :[( 35 + 15 * index ) + '%','50%']),
                    data: [{
                        value: item.value,
                        label: {
                            normal: {
                                formatter: function(params){
                                    return params.value ;
                                },
                                position: 'center',
                                show: true,
                                textStyle: {
                                    fontSize: '16',
                                    fontWeight: 'bold',
                                    color: colors[index][0]
                                }
                            }
                        },
                    }, {
                        value: totalCount - item.value,
                        name: 'invisible',
                        itemStyle: {
                            normal: {
                                color: colors[index][1]
                            },
                            emphasis: {
                                color: colors[index][1]
                            }
                        }
                    }]
                }    
            )
        });
 option = {
            // title:titleArr,
            backgroundColor:'#666666',
            legend: {
                // type: 'scroll',
                orient: 'vertical',
                left: '2%',
                top: 'center',
                itemGap: 10,
                selectedMode: false,
                icon: 'pin',
                data: namArr,
                textStyle: {
                    color: '#ffffff',
                    rich: {
                        uname: {
                            padding:[0,12 ,0, 0]
                        },
                        unum: {
                            color: '#4ed139',
                            marginLeft:12,
                        }
                    }
                },
                formatter(name) {
                    console.log(`data is:=====>`,data);
                    const resultArr = data.filter( item => item.name === name);
                    let totalValue = 0;
                    data.forEach(item => {
                        totalValue += item.value
                    });
                    const per = ((resultArr[0]?.value / totalValue) * 100).toFixed(2);
                    return `{uname|${name}}{unum|${per}%}`
                }
            },
            series: seriesArr
        };