Echarts中关于自定义legend图例文字

首先看一张echarts饼图:

这张图很好做，根本不值得提，但是用过echarts的可能会发现这个图例有点不一样，做这个图例花了我好几个小时去查，去试。结合一下echarts中legend图例的特质我们分析一下一些难点：

1.这里的图例文本包含两个变量，而formatter提供的变量模板只有name
2.两个变量的样式各不相同
3.对齐，换行与居中的应用

一个个看：

1.两个变量

formatter有两种形式：

• 模板
• 回调函数

模板

使用字符串模板，模板变量为图例名称 {name}
formatter: 'Legend {name}'

这种想要修改name的值，暂时我做不到，欢迎读者指正

回调函数

使用回调函数
formatter: function (name) {
    return 'Legend ' + name;
}

我们在返回时可以对name进行修改，从而返回我们需要的值，初步改动是这样：

var data = [
    {value:40, name:'货币'},
    {value:20, name:'股票'},
    {value:40, name:'债券'}
]
formatter:  function(name){
    var total = 0;
    var target;
    for (var i = 0, l = data.length; i < l; i++) {
        total += data[i].value;
        if (data[i].name == name) {
            target = data[i].value;
        }
    }
    return name + ' ' + ((target/total)*100).toFixed(2) + '%';
}

2.两种样式

想自定义图例文字样式，就要用到富文本：rich，但是在官方文档中看到的只有模板形式的富文本样式配置，由1知用模板很难实现自定义name，所以只能用回调函数形式，采用富文本的形式对name进行改造：

formatter:  function(name){
    var total = 0;
    var target;
    for (var i = 0, l = data.length; i < l; i++) {
    total += data[i].value;
    if (data[i].name == name) {
            target = data[i].value;
        }
    }
    var arr = [
        '{a|'+((target/total)*100).toFixed(2)+'%}',
        '{b|'+name+'}',
    ]
    return arr.join('\n')
},
textStyle:{
    rich:{
        a:{
            fontSize:20,
            verticalAlign:'top',
            align:'center',
            padding:[0,0,28,0]
        },
        b:{
            fontSize:14,
            align:'center',
            padding:[0,10,0,0],
            lineHeight:25
        }
    }
}

3.对齐，换行与居中

为了图例与第一行文字对齐，需要设置两个样式的padding，把文字顶到合适的位置，然后为了上下行的间隔，设置了第2行文字的行高，最终呈现了上面图片的效果。不知道是不是有点地方做烦了，但是能最终实现自己想要的效果，很有成就感。