echarts：实现legend中的textBorderColor动态改变问题

实现目标：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必须要设置一个值，否则会出现问题。