eachars動態的改變柱狀圖的顏色

開發中會遇到這種情況：

只有一個類型，但是想實現不同的顏色展示，如圖：

這種給人感覺很不舒服，這時候，需要給柱體顏色動態的變動；在綁定數據的X軸哪裏，eachars提供了一個itemStyle屬性，不過這個屬性得我們自己去寫：下圖中，紅色框部分即可改變柱體的顏色

代碼：
 

itemStyle: {
                        normal: {
                            color: function(params) {
                                var index = params.dataIndex;  //得到當前數據的下標

                                //注意，如果顏色太少的話，後面顏色不會自動循環，最好多定義幾個顏色
                                var colorList = ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#8A8A8A','#8B4500','#436EEE'
                                                ,'#4A4A4A','#0000AA','#218868','#63B8FF','#737373','#7FFF00','#8B0000','#8B8682','#BCD2EE','#EEE9BF'];

                                //如果數據大於了了顏色長度，則將大於部分的顏色重新再顏色list裏面定義
                                if (params.dataIndex >= colorList.length) {
                                    index = params.dataIndex - colorList.length;
                                }

                                //返回每個下標對應的顏色
                                return colorList[index];
                            }
                        }
                    }

這樣，就算你只有一個類型，也可以動態的變動顏色了，