ECharts设置柱状图颜色的方式

通过ECharts的itemStyle设定一个数组设定颜色的循环,详见begin到end的代码

 

option= {
backgroundColor: '#003',
title: {
text: '耗时',
textStyle: {
color: '#eee'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLine: {
lineStyle: {
color: '#eee'
}
}
},
yAxis: {
type: 'category',
data: serviceKey,
axisLine: {
lineStyle: {
color: '#eee'
}
}
},
series: [
{
name: '耗时',
type: 'bar',
data: avgTime,
//begin
itemStyle: { 
normal:{ 
color: function (params){
var colorList = ['rgb(205,85,85)','rgb(210,105,30)','rgb(0,139,0)','rgb(178,58,238)','rgb(54,100,139)'];
return colorList[params.dataIndex];
}
},
//鼠标悬停时:
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
//end

}
]

}
myChart.setOption(option);

 

posted @ 2017-07-23 17:15  corolcorona  阅读(16366)  评论(0编辑  收藏  举报