echarts 饼图 多环

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/d597180714/article/details/78911603

网上找了好多博客，都不是很详细。摸爬滚打一上午，总结一下
相当于series里三个饼图，radius：[100，220]第一个表示内径和外径 相差值就是环的大小，数据自己提前准备好放到legend 的 data 以及对应环的name

option = {
        tooltip: {
            show:false,//防止鼠标移到不需要的数据上弹出label
            trigger: 'item',
            formatter: "{a} : {c} ({d}%)"
        },
        color:['#dc1439','#e6b600','#053afe'],
         legend: {
            orient: 'vertical',
            x: '30%',
            top:'19%',
            itemHeight: 10,//图例的高度
            itemGap:5,//图例之间的间距 
            data:['未开工'+preBuild+'%','竣工'+finishPercent+'%','在建'+inBuild+'%']//图例的名字需要和饼图的name一致，才会显示图例
        },
        series: [
            {
                name:'在建'+inBuild+'%',
                type:'pie',
                radius: ['35%', '30%'],//环的位置

                label: {
                    normal: {
                        position: 'inner'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:inBuildNum, //需要显示的数据
                    itemStyle: {
                                normal: {
                                 color: '#dc1439'
                                }
                     }},
                   {value:total-inBuildNum, //不需要显示的数据，颜色设置成和背景一样
                    itemStyle: {
                                normal: {
                                 color: 'transparent'
                                }
                     }}
                ]
            },
            {
                name:'竣工'+finishPercent+'%',
                type:'pie',
                radius: ['40%', '45%'],

                label: {
                    normal: {
                        position: 'inner'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:finishNum, 
                    itemStyle: {
                                normal: {
                                 color: '#e6b600'
                                }
                     }},
                   {value:total-finishNum, 
                    itemStyle: {
                                normal: {
                                 color: 'transparent'
                                }
                     },
                   }
                ]
            },
            {
                name:'未开工'+preBuild+'%',
                type:'pie',
                radius: ['55%', '50%'],

                label: {
                    normal: {
                        position: 'inner'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:preBuildNum, 
                    itemStyle: {
                                normal: {
                                 color: '#053afe'
                                }
                     }},
                   {value:total-preBuildNum, 
                    itemStyle: {
                                normal: {
                                 color: 'transparent'
                                }
                     }}
                ]
            },
        ]
    };