echarts系列之動態修改柱狀圖顏色

echarts根據某一變量動態修改柱狀圖顏色

1.option中參數配置項series

 

{
     "name":"Android",
     "type":"bar",
     "data":bData,
     //配置樣式
     itemStyle: {   
        //一般狀況下：

　　　　　　normal:{
　　　　　　// 每一個柱子的顏色即爲colorList數組裏的每一項，若是柱子數目多於colorList的長度，則柱子顏色循環使用該數組
　　　　　　　　color: function (params){
　　　　　　　　return barColor()[params.dataIndex];

　　　　　　}
　　　　}

}

 

2.動態設置顏色的方法

（規則：不一樣version的柱狀顏色不同）

function barColor(){
                    var colorList = [
                                      '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                      '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                      '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0',
                                      '#FFB7DD','#660077','#FFCCCC','#FFC8B4','#550088',
                                      '#FFFFBB','#FFAA33','#99FFFF','#CC00CC','#FF77FF',
                                      '#CC00CC','#C63300','#F4E001','#9955FF','#66FF66',
                                      '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                      '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                      '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0',
                                      '#FFB7DD','#660077','#FFCCCC','#FFC8B4','#550088',
                                      '#FFFFBB','#FFAA33','#99FFFF','#CC00CC','#FF77FF',
                                      '#CC00CC','#C63300','#F4E001','#9955FF','#66FF66'
                                     
                                     
                                  ];
                     //console.log(params);
                        console.log(xAxisVersion.reverse());
                        var version_arr = xAxisVersion.reverse();
                        var unique_arr = xAxisVersion.unique();
                        var color_arr=[];
                        console.log(unique_arr);
                        var cur=-1;
                       
                       
                        for(var i=0;i<version_arr.length;i++){
                            cur=-1;
                            for(var j=0;j<unique_arr.length;j++){
                                if(version_arr[i]===unique_arr[j]){
                                    //console.log(version_arr[i],unique_arr[j]);
                                    //console.log(i,j);
                                    cur = j;
                                    break;
                                   
                                }
                             } 
                             
                            if(cur>=0){
                                color_arr.push(colorList[cur]); 
                                //console.log('==='+colorList[cur]);
                            }else{
                                color_arr[i]="#f00";
                            }
                        }
                        
                        color_arr=color_arr.reverse();
                        return color_arr;
                }