vue中给echarts图的legend显示添加百分比并给环形图中间添加文字

<div id="chartmainbarCircle"></div>

    data(){
        return{
        // 环形图数据
            data8:[
                {value: 335, name: '优秀'},
                {value: 310, name: '良好'},
                {value: 234, name: '合格'},
                {value: 144, name: '不合格'},
            ]
        }
    },
    mounted(){  //echarts的自适应设置
        this.drawLine()
        this.resizeEcharts = () => {
          this.$echarts.init(document.getElementById("chartmainbar8")).resize();
        }
        // window.onresize = this.myChart.resize;
        window.addEventListener("resize", this.resizeEcharts);
    },
    methods:{
        drawLine: function(){
            let chartmainbar8 =  this.$echarts.init(document.getElementById("chartmainbarCircle"));

            const list = this.data8 //需要提前定义一个list放入圆环图中的数据，否则legend里面 
                                  //的formatter函数是访问不到vue里面的data数据的
            chartmainbar8.setOption({
                    tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    itemWidth:10,   
                    itemHeight:10,
                    icon:'circle', 
                    x: 'right',
                    y:'center',
                    orient: 'vertical', //设置图例排列纵向显示
                    align:'left',       //设置图例中文字位置在icon标识符的右侧
                    itemGap:20,         //设置图例之间的间距
                    padding:[0,0,0,10], //设置图例与圆环图之间的间距
                    bottom:'55%',       //距离下边距
                    formatter:function(name){  //该函数用于设置图例显示后的百分比
                        var data = list
                        var total = 0;
                        var value;
                        list.forEach((item)=>{
                            total += item.value;
                            if (item.name == name) {
                                value = item.value;
                            }
                        })
                        var p = Math.round(((value / total) * 100)); //求出百分比
                        return `${name}  ${p}%`;  //返回出图例所显示的内容是名称+百分比
                    },
                    textStyle: { //图例文字的样式
                            color: '#ADADAD',
                            fontSize: 12
                    },
                    data: ['优秀', '良好', '合格','不合格'],
                },
                graphic: [  //为环形图中间添加文字
                    {
                    type: "text",
                    left: "center",
                    top: "center",
                    style: {
                        text: "单位名称",
                        textAlign: "center",
                        fill: "#32373C",
                        fontSize: 18,
                    },
                    },
                ],
                series: [{
                        name: '数据占比',
                        type: 'pie',
                        radius: ['40%', '62%'],
                        data: this.data8,
                    }
                ],
                color:["#33D4BD","#BDA1FF","#71BCFA","#FC8A8C"]
                }
            );
        }

    }

    #chartmainbarCircle{
         width: 100%!important;
         height:225px!important;
         float: left;
    }

呈上效果图：

也可给图设置渐变色：

只需要将上面的color，变为如下，，，，

                color: [new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
                    offset: 0,
                    color: '#BE9DF6'
                    },
                    {
                        offset: 0.9,
                        color: '#60BFFF'
                    }]), new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
                        offset: 0,
                        color: '#EA8DD9'
                    },
                    {
                        offset: 0.9,
                        color: '#FF8E8E'
                    }]), new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
                        offset: 0,
                        color: '#81DCD4'
                    },
                    {
                        offset: 0.9,
                        color: '#18D2BA'
                    }]), new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
                        offset: 0,
                        color: '#FEDDEA'
                    },
                    {
                        offset: 0.9,
                        color: '#E7E8ED'
                 }])]