echarts如何給柱形圖的每個柱子設置不同顏色
總結下這幾日用echarts庫作基本圖形遇到的一些問題。
echarts快速上手可參考官網:
http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
在作柱形圖時,如果需要給每個柱子設置不同顏色,參考以下說明:
var option = {
xAxis: {
data: ["蘋果","小米","華為","其他"]
},
yAxis: {
splitLine:{ show:false} //改設置不顯示坐標區域內的y軸分割線
},
series: [{
name: '手機品牌',
type: 'bar',
data: [19, 15, 40, 32],
//設置柱子的寬度
barWidth : 30,
//配置樣式
itemStyle: {
//通常情況下:
normal:{
//每個柱子的顏色即為colorList數組里的每一項,如果柱子數目多於colorList的長度,則柱子顏色循環使用該數組
color: function (params){
var colorList = ['rgb(164,205,238)','rgb(42,170,227)','rgb(25,46,94)','rgb(195,229,235)'];
return colorList[params.dataIndex];
}
},
//鼠標懸停時:
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
}],
//控制邊距
grid: {
left: '0%',
right:'10%',
containLabel: true,
},
};
