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行文字的行高，最終呈現了上面圖片的效果。不知道是否是有點地方作煩了，可是能最終實現本身想要的效果，頗有成就感。