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);