首先看一张echarts饼图:

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

1.这里的图例文本包含两个变量，而formatter提供的变量模板只有name2.两个变量的样式各不相同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行文字的行高，最终呈现了上面图片的效果。不知道是不是有点地方做烦了，但是能最终实现自己想要的效果，很有成就感。