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

echarts：实现legend中的textBorderColor动态改变问题相关推荐

C#中使用代码动态改变配置文件信息
static void Main(string[] args){XmlDocument xDoc = new XmlDocument();xDoc.Load("../../App.confi ...
android顶部按钮图片,安卓动态改变button顶部图片即drawableTop属性
比如一个按钮在layout文件中设置了为灰色的图片资源 android:id="@+id/polling_end" android:layout_width="0dp&q ...
Android 根据坐标点动态改变View的位置
在开发项目中,需要动态改变View的位置,其实只需要用api的 layout()方法即可,不断改变坐标值,通过onTouchEvent()来获取点的坐标点,然后计算出View的宽和高就可以了代码如下 ...
点击echarts柱状图动态改变数据项颜色样式
首先附上参考文章连接:https://blog.csdn.net/weixin_42870683/article/details/103528254添加链接描述今天来实现点击echarts柱状图,动 ...
C# 设计时动态改变实体在PropertyGrid中显示出来的属性
方法一: /// <summary>/// 实体属性处理/// </summary>public class PropertyHandle{#region 反射控制只读.可见属 ...
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
uniapp、vue，vuex中state改变，getters不动态改变的完美解决方案！
uniapp.vue,vuex中state改变,getters不动态改变的完美解决方案! 参考文章: (1)uniapp.vue,vuex中state改变,getters不动态改变的完美解决方案! ( ...
c语言case的值能动态修改吗,java中的switch case语句中，case所对应的数目是不确定的，能否动态改变case...
现在方法中传入的menuList的数目是不确定的,每个menuList.get(i),都对应一个runnableList.get(i).现在需要根据menuList.size()动态改变case的数目 ...
VUE中动态改变字体大小
VUE中动态改变字体大小父组件将自己的数据传递送给子组件展示,子组件监听click操作,emit发送出去,父组件监听通过emit发送的信息,改变控制字体大小的postFontSize,通过style ...
echarts动态改变series，数据重合问题
echarts动态改变series值,来动态更新图表,发现数据有重合问题产生原因是: Echarts会默认将更新的数据和之前数据合并解决办法: setOption时设置第二个参数为true myC ...

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

echarts：实现legend中的textBorderColor动态改变问题相关推荐

最新文章

热门文章