How does Echarts pie legend automatically display values and percentages

The effect picture is as follows,  the focus is on how to set the display value and percentage in legend

 

 

                <div class="div_block">
                    <strong class="block_box_title">硬盘使用情况（总容量：{
   
   {total}}）</strong>
                    <div id="pie1"></div>
                </div>

<style scoped lang="less">
     #line1, #line2, #pie1{
        height: 100%;
    }

The focus is on how to set the display value and percentage in legend

        getpiedata3(){
            this.$ajax.get('/systems/whitelist/info/',{
                params: {}
            })
            .then((data) => {
                var dt = data.data;  
                if(dt.success){
                    this.total = dt.data.total
                    this.getpie_database('pie1', dt.data);
                }else{
                    this.$message({
                        message:dt.error,
                        type: 'error'
                    });
                }  
            })
            .catch((error) => {
                console.log(error);
            })
        },

 //饼图 获取接口
         getpie_database(id, data){ 
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(id)); 
            // 绘制图表
            let myData = [
                        {value: data.free, name: '可用空间'},
                        {value: data.used, name: '已用空间'}
                    ]
            myChart.setOption({ 
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    // left: 'right',
                    x:'50%',//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
                    y: 'center',//垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
                    icon: "circle",   //  这个字段控制形状  类型包括 circle 圆形，triangle 三角形，diamond 四边形，arrow 变异三角形，none 无
                    itemWidth: 10,  // 设置宽度
                    itemHeight: 10, // 设置高度
                    itemGap: 35 ,// 设置间距，
                    formatter: function (name) {
                        // console.log(data, 'data')
                        let total = 0
                        let tarValue
                        for (let i = 0; i < myData.length; i++) {
                            total += myData[i].value
                            if (myData[i].name == name) {
                            tarValue = myData[i].value
                            }
                        }
                        let v = tarValue + 'G'
                        //计算出百分比
                        let p = Math.round((tarValue / total) * 100) + '%'  
                        return `${name}  ${p}   ${v}`
                        //name是名称，v是数值
                    }
                    // textStyle: {  // 图例文字的样式
                    //     color: '#fff',
                    //     fontSize: 16,
                    // }
                },
                color:this.color,
                series: [
                    {
                    name: 'Access From',
                    type: 'pie',
                    radius: '70%',
                    center:['20%','50%'],
                    label: {//去除饼图的指示折线label
                        normal: {
                        show: false,
                        position: 'inside',
                        formatter:"{b}:{d}%"
                        },
                    },
                    data: myData,
                    emphasis: {
                        itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                    }
                ]
            });
        },