echarts实现多层环图（复制粘贴即可）

data里面参数配置： 

// 多重环图
            optionCircle: {
                tooltip: {
                    show: false,
                    trigger: 'item',
                    formatter: "{a} : {c} ({d}%)"
                },
                color: ['#3AB1EB', '#D48B6A', '#5B41C8', '#FE7E02'],
                legend: {
                    orient: 'horizontal',
                    itemWidth: 30,   // 图例标记的图形宽度。
                    itemHeight: 10, // 图例标记的图形高度。
                    itemGap: 15,  //图例每项之间的间隔
                    right: 20,
                    top: 70,
                    icon: 'circle',
                    textStyle: {
                        fontSize: 12,
                        color: '#fff',
                    },
                    formatter: (name) => {
                        console.log(name)
                        var data = this.optionCircle.series;
                        var total = 0;
                        var tarValue = 0;
                        for (var i = 0, l = data.length; i < l; i++) {
                            console.log(data[i])
                            total += data[i].data[0].value;
                            if (data[i].data[0].name == name) {
                                tarValue = data[i].data[0].value;
                            }
                        }
                        var p = ((tarValue / total) * 100).toFixed(0);
                        return name + "    " + "  " + p + '%'
                    },
                },
                series: [
                    {
                        name: '及格',
                        type: 'pie',
                        radius: ['20%', '25%'],
                        center: ['35%', '50%'],
                        //环的位置
                        label: {
                            show: false,
                            position: 'center',
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '12',
                            }
                        },
                        data: [
                            {
                                value: 10, //需要显示的数据
                                name: '及格',
                            },
                            {
                                value: 50,
                                //不需要显示的数据，颜色设置成和背景一样
                                itemStyle: {
                                    normal: {
                                        color: '#4352A7 '
                                    }
                                }
                            }
                        ]
                    },

                    {
                        name: '良好',
                        type: 'pie',
                        radius: ['30%', '35%'],
                        center: ['35%', '50%'],
                        label: {
                            show: false,
                            position: 'center',
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '12',
                                // fontWeight: 'bold'
                            }
                        },
                        data: [
                            {
                                name: '良好',
                                value: 10,
                            },
                            {
                                value: 30,
                                itemStyle: {
                                    normal: {
                                        color: '#4352A7'
                                    }
                                }
                            }
                        ]
                    },
                    {
                        name: '优秀',
                        type: 'pie',
                        radius: ['40%', '45%'],
                        center: ['35%', '50%'],
                        //环的位置
                        label: {
                            show: false,
                            position: 'center',
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '12',
                                // fontWeight: 'bold'
                            }
                        },
                        data: [
                            {
                                value: 20, //需要显示的数据
                                name: '优秀',
                            },
                            {
                                value: 40,
                                //不需要显示的数据，颜色设置成和背景一样
                                itemStyle: {
                                    normal: {
                                        color: '#4352A7 '
                                    }
                                }
                            }
                        ]
                    },
                    {
                        name: '--',
                        type: 'pie',
                        radius: ['50%', '55%'],
                        center: ['35%', '50%'],
                        label: {
                            show: false,
                            position: 'center',
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '12',
                            }
                        },
                        data: [
                            {
                                name: '',
                                value: 0,
                            },
                            {
                                value: 20,
                                itemStyle: {
                                    normal: {
                                        color: '#0b1e5b '
                                    }
                                }
                            }
                        ]
                    },
                    {
                        name: '--',
                        type: 'pie',
                        radius: ['60%', '65%'],
                        center: ['35%', '50%'],
                        label: {
                            show: false,
                            position: 'center',
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '12',
                            }
                        },
                        data: [
                            {
                                name: '',
                                value: 0,
                            },
                            {
                                value: 10,
                                itemStyle: {
                                    normal: {
                                        color: '#0b1e5b '
                                    }
                                }
                            }
                        ]
                    }
                ]
            }

html:

<div class="byn_box">
     <div id="lineEcharts" style="width:400px;height:300px"></div>
</div>

 methods:

drawLine(){
    var myChart2 = echarts.init(document.getElementById('lineEcharts'));
    myChart2.setOption(this.optionCircle);
}

mounted里面调用:

mounted(){
    this.drawLine()
}

效果图：