話不多說(shuō)，先上效果圖。

?

要完成這個(gè)圖并不難，主要是下面那個(gè)圖例比較難，需要定制。

讓我們從官方文檔找找思路，官方文檔關(guān)于legend.formatter是這樣的：鏈接在這

難點(diǎn)在于：

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

formatter有兩種：一是模板變量，而是回調(diào)函數(shù)。

顯然，只有回調(diào)函數(shù)能夠滿足我們的需要。

自定義改造如下：

var pieChartData = [{value:1, name:'系統(tǒng)工具'},{value:3, name:'課程表'},{value:0, name:'意見(jiàn)反饋'},{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}} }

?

更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的echarts自定义图例legend文字和样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。