echarts自定義圖例legend文字和樣式

原文

話不多說，先上效果圖。

 

要完成這個圖並不難，主要是下面那個圖例比較難，需要定制。

讓我們從官方文檔找找思路，官方文檔關於legend.formatter是這樣的：鏈接在這

難點在於：

1 2 3

1.這里的圖例文本包含兩個變量，而formatter提供的變量模板只有name 2.兩個變量的樣式各不相同 3.對齊，換行與居中的應用

formatter有兩種：一是模板變量，而是回調函數。

顯然，只有回調函數能夠滿足我們的需要。

自定義改造如下：

var pieChartData = [
    {value:1, name:'系統工具'},
    {value:3, name:'課程表'},
    {value:0, name:'意見反饋'},
    {value:43, name:'其他'}
]


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