龙空技术网

如何给ECharts柱状图设置一个高亮色

海瑞云游 70

前言:

眼前看官们对“echarts柱状图图例颜色自定义”大体比较注意,你们都需要分析一些“echarts柱状图图例颜色自定义”的相关内容。那么小编在网上汇集了一些有关“echarts柱状图图例颜色自定义””的相关资讯,希望你们能喜欢,看官们快快来学习一下吧!

在项目开发中用到echarts有这样的需求,比如要给一个星期的某个一天设置一个高亮色与其他天不同的颜色来区分开,那么我来演示一下如何达到这样的需求,我知道的方法有两种,也可能有其他方法,欢迎来吐槽

方法一

也是在官网上看到的,就是直接在data数据的数组上设置颜色,也就是说在数组的某一段需要添加对象值来达到这种效果

option = {......series: [{data: [120, {value: 200,itemStyle:{color: '#f00'}}, 150, 80, 70, 110, 130],......}]};

这种方法在处理数据的太麻烦,我不喜欢这种方法

方法二

设置itemStyle图形样式属性的color,这种方法是在formatter的启发下得到的,因为在文档上没有看到color有回调函数,首先要设置一个变量也就是高亮色的位置,这个变量的值可以后端给,也可以前端给(前端给的必定是死值), data数组我们不动,

const curInt = 2;option = {series:[{data:[...],<!-- 在这里设置 -->itemStyle:{color: function(params){const key = params.dataIndex;if(key === curInt){return '#E062AE';}else{return '#37A2DA'}}}}]};

好了,我知道的就这,方法是否对你有用,我就不知道了。

标签: #echarts柱状图图例颜色自定义 #echarts柱状图渐变透明