實現目標：legend和柱狀圖結合。效果圖：

從上圖中可以看出，不同legend對應的文字的顏色都是白色，但是文字描邊的顏色卻是和圖例的顏色是相同的，echarts的配置文件如下：

顯然，textBorderColor并不支持函數調用，因此 ，為實現動態顏色描邊的功能，需要使用另外的方法。

這里結合使用legend.textStyle.rich和legend.formatter，legend的配置如下：

legend: {data: [],type: 'scroll',orient: 'vertical',left: '3%',textStyle: {color: '#ffffff',textBorderWidth: 2,rich: {}},formatter: function (name){let index = LEGEND.indexOf(name);let border = `color${index}`;return `{${border}|${name}}`;}, }

?動態為rich填充數據：

//使用rich，來動態展示legend.title 以不同的顏色描邊for (let i = 0;i < COLOR_LIST.length;i++){let key = 'color' + i;option.legend.textStyle.rich[key] = {textBorderColor: COLOR_LIST[i]}}

?令顏色存儲在COLOR_LIST數組中，遍歷COLOR_LIST數組，那么rich中的數據大致如下：

rich :{color0: {textBorderColor: '#2c7be5'},//... }

?至此，rich中配置了不同顏色描邊的富文本樣式，那么再配合formatter：

formatter: function (name){let index = LEGEND.indexOf(name);let border = `color${index}`;return `{${border}|${name}}`;},

?通過判斷傳遞的name在legend.data中的索引，構造key，得到{${border}|${name}}，通過反引號，假設index=0，那么js會解釋為{color0|電子器件制造}。

注：textBorderWidth必須要設置一個值，否則會出現問題。

總結

以上是生活随笔為你收集整理的echarts：实现legend中的textBorderColor动态改变问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。