Echarts柱狀圖的每個柱子顯示不同顏色問題

在使用Echarts製作柱狀圖的時候,通常在橫軸每個標籤只有一個柱子的時候,每個柱子的顏色都是一樣的,如下圖所示:
這裏寫圖片描述
然而,很多時候我們爲了使界面更加美觀,通常會有使每個柱子顏色都不相同的需求。那麼這時候,我們需要在itemStyle的normal狀態下,首先根據柱子的數量設置一個顏色的數組。然後柱子會設定顏色。如果顏色數組少於柱子的數量,則柱子會循環使用設定的顏色。
代碼如下:
itemStyle: {
normal: {
color: function(params) {
 //首先定義一個數組
var colorList = [
'#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3',
'#B74AE5','#0AAF9F','#E89589'
];
return colorList[params.dataIndex]
},
     //以下爲是否顯示
label: {
show: false
}
}
}

實現效果如圖所示:
這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章