echarts lengend自定义样式

需求 ==> 将图例和文字显示在一起，外部显示值

代码实现

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    
    legend: {
        orient: 'vertical',
        left: 10,
        itemWidth: 0,
        itemHeight: 0,
        formatter: function(name) {
            var data = option.series[0].data;
            var target = data.filter(function(item) {
                return item.name === name;
            })[0];
            var value = target ? target.value : '';
            return '{a|' + name + '}  ' + value;
        },
        textStyle: {
            rich: {
                a: {
                    width: 100,
                    height:20,
                    
                    align: 'center',
                    color: '#fff',
                    backgroundColor: 'inherit'
                }
            }
        }
    },
    series: [
        {
            name: '数据分布',
            type: 'pie',
            radius: ['40%', '80%'],
            center: ['70%', '50%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '18',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 9648, name: 'KP-3CM'},
                {value: 0, name: 'LP'},
                {value: 4, name: 'LP-3-4'},
                {value: 326412, name: 'NK'},
                {value: 15840, name: 'T-100'},
                {value: 7500, name: 'T-150'},
                {value: 14700, name: 'T-250'},
                {value: 7800, name: 'T-50'},
                {value: 510, name: 'T-500'},
                {value: 7896, name: 'U-1-25'},
                {value: 2632, name: 'U-1-50'},
                {value: 76160, name: 'U-3-100'},
                {value: 61080, name: 'U-3-50'},
                {value: 0, name: 'K'},
                {value: 20360, name: 'sgw'}
            ]
        }
    ]
};