實現(xiàn)目標：legend和柱狀圖結(jié)合。效果圖：

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

顯然，textBorderColor并不支持函數(shù)調(diào)用，因此 ，為實現(xiàn)動態(tài)顏色描邊的功能，需要使用另外的方法。

這里結(jié)合使用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}}`;}, }

?動態(tài)為rich填充數(shù)據(jù)：

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

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

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

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

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

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

注：textBorderWidth必須要設(shè)置一個值，否則會出現(xiàn)問題。

總結(jié)

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

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