echarts 柱状图颜色设置
- 在使用echarts时,遇到一个问题,就是本来应该直接在color中设置的多个颜色不起作用,只显示第一个颜色
用demo中的代码举例:
option = {
color: ['#c23531','#2f4554', '#61a0a8'],
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
对应显示的样式为:
这种情况下更改柱形图颜色的话,可以这样写:
option = {
//这里就不重要了,可以删掉
color: ['#c23531','#2f4554', '#61a0a8'],
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
//设置柱的宽度,要是数据太少,柱子太宽不美观~
barWidth:70,
type: 'bar',
itemStyle: {
normal: {
//这里是重点
color: function(params) {
//注意,如果颜色太少的话,后面颜色不会自动循环,最好多定义几个颜色
var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
return colorList[params.dataIndex]
}
}
}
}]
};
如果希望自动循环已经有的颜色循环显示,可以添加一个判断:
//给大于颜色数量的柱体添加循环颜色的判断
if (params.dataIndex >= colorList.length) {
index = params.dataIndex - colorList.length;
}
最终效果图: