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