通过率/数据质量评价echarts 饼配置项内容和展示

配置项如下
      var data = [
            {
              state:'良',
                name: '单车系统',
                value: 54
            }, {
              state:'中',
                name: '雾霾系统',
                value: 44
            }, {
              state:'差',
                name: '垃圾管理系统',
                value: 35
            }, {
              state:'优',
                name: '城市绿道系统',
                value: 30
            }, {
              state:'良',
                name: '智慧家园系统',
                value: 20
            }]

        var titleArr = [], seriesArr = [];
        var colors = [['#C467FF', '#CACACA'], ['#2CAF70', '#CACACA'], ['#FFA23F', '#CACACA'], ['#625AFF', '#CACACA'], ['#4B8BFF', '#CACACA']]
        data.forEach(function (item, index) {
            seriesArr.push(
                {
                    name: item.name,
                    type: 'pie',
                    clockWise: false,
                    radius: [60, 70],
                    itemStyle: {
                        normal: {
                            color: colors[index][0],
                            shadowColor: colors[index][0],
                            shadowBlur: 0,
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                        }
                    },
                    hoverAnimation: false,
                    center: [index * 20 + 10 + '%', '50%'],
                    data: [{
                        value: item.value,
                        label: {
                            normal: {
                                formatter: function (params) {
                                    return [item.state,  params.value+'%'].join('\n\n');
                                },
                                position: 'center',
                                show: true,
                                textStyle: {
                                    fontSize: '20',
                                    fontWeight: 'bold',
                                    color: colors[index][0]
                                }
                            }
                        },
                    }, {
                        value: 100 - item.value,
                        name: 'invisible',
                        itemStyle: {
                            normal: {
                                color: colors[index][1]
                            },
                            emphasis: {
                                color: colors[index][1]
                            }
                        }
                    }]
                }
            )
        });
        var option = {

              title: {
	        text: '通过率/数据质量评价',
	        textStyle: {
	        	 align: 'center',
	            color: '#333333',
	            fontSize: 18,
	        },
	        top: '2%',
	        left: '2%',
	    },
	        legend: {
        data: [{
            name: '单车系统',
        }, {
            name: '雾霾系统',
        },{
            name: '垃圾管理系统',
        },
        {
            name: '城市绿道系统',
        },
         {
            name: '智慧家园系统',
        }],
        type: "scroll",
        bottom:'40',
        itemGap: 30,
        itemWidth: 20,
        itemHeight: 10,
        textStyle: {
            fontSize: '13',
          
        },

    },
            tooltip: {
                show: true,
                formatter: function (params) {
                    if (params.name == 'invisible') {
                        return params.marker + params.seriesName + '未通过:' + params.value + '%';
                    }
                    return params.marker + params.seriesName + '通过:' + params.value + '%';
                },
            },
            series: seriesArr
        }
        return option;
    
截图如下