警告:本站服务器将于2020-7-10到期,不再续费,本站如果有大家需要的资料赶紧备份,谢谢!另:我会陆陆续续将本站一些文章放入github上,请关注我。
当前位置:W3Cbest前端开发>ECharts>如何给ECharts柱状图设置一个高亮色

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

原创2018-10-07ECharts/JavaScript3581 次阅读 · 读完需要 2 分钟。

在项目开发中用到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'
}
}
}
}]
};

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

赞(7) 打赏
未经允许不得转载:W3Cbest前端开发>如何给ECharts柱状图设置一个高亮色

相关推荐

发表评论