vue中 echarts 的 legend formatter

效果：

代码：

<template>
    <div>
        <h1>echarts</h1>
        <div>
            <div id="main" style="width: 300px;height: 300px;"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Sector',
        data() {

            return {
                dataList: [
                    {name: 'A',value: 1212},
                    {name: 'B',value: 2323},
                    {name: 'C',value: 2323},
                ]
            }
        },
        mounted() {
            this.drawLine();
        },
        methods: {
            drawLine() {
                let mdataList = this.dataList
                let total = 0
                const target = new Map();               
                mdataList.forEach((item) => {
                    // 计算value的和，用来算百分比
                    total += item.value
                    // 组成 map {A:1212} ,用来下面获取 value
                    target.set(item.name, item.value)
                })

                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('main'))
                // 绘制图表
                myChart.setOption({
                    title: {
                        // text: '在Vue中使用echarts',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        // formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        // 计算A B C的百分比
                        formatter: function(name) {
                            let lists = [];
                            let inum = target.get(name) / total * 100;
                            //保留inum小数点后２位
                            let vnum = parseFloat(inum).toFixed(2);
                            lists.push(name + '－' + vnum + '%');
                            return lists;
                        }
                    },
                    series: {
                        name: '容量',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: mdataList,

                    }
                });
            }
        }
    }
</script>

<style>
</style>