echart饼图的使用（环形）_echart环形饼图-优快云博客

本文详细介绍了如何使用ECharts库来绘制环形图，包括配置项设置和数据绑定，帮助读者掌握在Web应用中展示数据比例的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echart饼图的使用（环形）

function initBarEchart(idName,dataInfo,chartTitle,totalIncome){
    var myChart = null;
    var totalNum=totalIncome;
    var dataArr = [];
    var rateSum = 0;
    for(var i = 0,n = dataInfo.length;i < n;i++){
        var clr = null;
        var dataName = dataInfo[i].name;
        var dataValue = dataInfo[i].num;
        var dataRateNum = parseFloat(dataInfo[i].per).toFixed(1);
        switch(i){
            case 0:
                clr = "#F79247";
                break;
            case 1:
                clr = "#5E97EC";
                break;
            case 2:
                clr = "#86EC5E";
                break;
            case 3:
                clr = "#5EECEA";
                break;
            case 4:
                clr = "#E6EC5E";
                break;
            case 5:
                clr = "#00A946";
                break;
            case 6:
                clr = "#006CBD";
                break;
        }
        // if (i == n-1) {
        //     dataArr.push({
        //         name: dataName + parseFloat(100 - rateSum).toFixed(1) + "%\n" + dataValue + "次",
        //         value: parseFloat(100 - rateSum).toFixed(1),
        //         itemStyle:{
        //             normal:{
        //                 color:clr,
        //                 shadowColor: clr,
        //                 shadowBlur: 15
        //             }
        //         }
        //     })
        // } else {
            dataArr.push({
                name:dataName + dataRateNum + "%\n" + dataValue + "次",
                value:dataRateNum,
                itemStyle:{
                    normal:{
                        color:clr,
                        shadowColor: clr,
                        shadowBlur: 15
                    }
                }
            })
        // }
        // rateSum = parseFloat(rateSum) + parseFloat(dataRateNum);
    }
    myChart = echarts.init(document.getElementById(idName));
    var barOption = {
        tooltip : {
            trigger: 'item',
            formatter: "{b}",
            axisPointer : {
                type : 'shadow'
            }
        },
        grid: {
            top: '3%',
            left: '3%',
            right: '3%',
            bottom: '3%',
            containLabel: true
        },
        series: [
            {
                name:chartTitle,
                type:'pie',
                radius: ['39%', '50%'],
                center : ['50%', '50%'],
                label: {
                    normal: {
                        color:"#B9FEFF",
                    }
                },
                labelLine: {
                    normal: {
                        show: true
                    }
                },
                data:totalNum == 0?[]:dataArr
            },{
                type:'pie',
                radius: ['36%', '37%'],
                center : ['50%', '50%'],
                silent: true,
                label: {
                    normal: {
                        show: true,
                        position: 'center',
                        color: '#E6EC5E'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:totalNum == 0?[]:[{
                    value: 100,
                    name: chartTitle,
                    itemStyle:{
                        normal:{
                            color:"#42B5AE",
                        }
                    }
                }]
            }
        ]
    };
    myChart.setOption(barOption);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

在这里插入图片描述