專案裡使用Echarts開發柱狀統計圖，需要讓每個柱子顯示不同的顏色也顏色固定，簡單通過color設定不起作用，現記錄柱狀圖重要屬性以及顏色控制方法。

xAxis

• 型別：{Array|Object}
• • 只有一個橫軸座標時，可以省略陣列寫成Object
• • 最多同時存在兩條橫軸，位置互斥，預設第一條在底部，第二條在頂部

// option 的xAxis
xAxis : {
       show : false,// 預設為true，顯示下方x軸；設定為false不顯示
       type : 'category',// 座標軸型別，共三種：類目category、數值、時間。
       data : ['海爾'
 
,'美的','格力']// 柱子名稱
       axisLabel : {// 座標軸文字標籤
           show : false,// 預設為true，顯示標籤；設定為false不顯示
           interval : 0,// 預設為"auto",自動隱藏顯示不下的標籤；0：全部顯示;{number}:使用者指定間隔;{function}回撥函式：傳遞引數[index，data[index]]，返回true顯示，返回false隱藏
           rotate : 90,// 預設為0:標籤不旋轉
           textStyle{// 文字樣式
           } 
       }
}   
 

yAxis

yAxis : [
    {
        type : 'value',
        name:'數量',
         min: 0,//最小是多少，最大是多少，預設一次增加多少
         max: 30,
         interval: 6,
         axisLabel: {//顯示格式化
             formatter: '{value} 包'
         }
    }
]

series

series : [
    {
        name: '數量',
        type: 'bar',
        itemStyle: {
            normal: {
    　　　　　　　 //這裡用函式控制柱子顏色，定義一個list，然後根據所以取得不同的值
 

                color: function(params) {
                    var colorList = [
                      '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                       '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                       '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                    ];
                    return colorList[params.dataIndex]
                },　　　　
                label: {
                    show: true,
                    position: 'top',
                    formatter: '{b}\n{c}'
                }
            }
        },
　　　　　//設定柱的寬度，要是資料太少，柱子太寬不美觀~
　　　　　barWidth:70,
        data: [28,15,9,4,7,8,23,11,17]
    }
]