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

最終效果圖：