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

最終效果圖：