前端开发 大前端 W3Cbest

一个专注 WEB 开发的技术博客

0%

如何给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’
}
}
}
}]
};

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

坚持技术创作分享,您的支持将鼓励我继续创作!