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()
}

效果图：