关于给Echarts柱子设置不同颜色的方案网上已经有了，不多啰嗦。其实就是通过设置itemStyle的color函数(可以当作函数回调)，使其设置一组颜色值通过函数返回值的下标一一对应将颜色赋给柱子上，大致操作就是下面的一段代码
var colors = [‘#4587E7’,’#35AB33’,’#F5AD1D’,’#ff7f50’,’#da70d6’,’#32cd32’,’#6495ed’];
option = {
…
series:[{
…
itemStyle: {
color: function(params) {
//通过返回值的下标一一对应将颜色赋给柱子上
return colors[params.dataIndex];
}
}
…
}]
}
See the Pen dawKPV by w3cbest.com (@w3cbest) on CodePen.
下面我们讲一下如何点击改变颜色
为啥子要讲这个呢，这是我在项目中遇到的需求,看下图:
See the Pen Echarts给柱子设置不同颜色点击变色 by w3cbest.com (@w3cbest) on CodePen.
需求是这样的，分值在小于20%的时候柱子显示红色，默认是蓝色，点击后为深蓝色，需求知道了接下来该如何实现呢？通过循环判断小于20%的值赋上颜色这样把data数组结构就改变成数组对象，这样效果已经出来了，就是在点击的时候不会换色，红色柱子已被定死了不能改变了，也就是说这个方法是行不通的，换其他方法，再不改变data数组的前提下是否可以呢，然后就结合了文章开头的给柱子添加不同颜色的思想和刚刚的那个点击变色没实现的方法实现了下面的效果，也就是我的需求
data = [7, 10, 20, 30, 10, 29, 16];
var colors = [];
for (var i = 0; i < data.length; i++) {
if(data[i] < 20){
colors.push(‘#EE4B46’);
}else{
colors.push(‘#00A1E9’);
}
};
option = {
…
data: data,
itemStyle: {
color: function(params) {
var key = params.dataIndex + 1;
if (key === curInt) {
return ‘#4587E7’;
} else {
return colors[params.dataIndex]
}
}
}
…
}
See the Pen Echarts给柱子设置不同颜色点击变色 by w3cbest.com (@w3cbest) on CodePen.
