1. 程式人生 > >echarts 柱狀圖 ,顏色和顯示設定

echarts 柱狀圖 ,顏色和顯示設定

複製程式碼
  xAxis : [
            {
                type : 'category',
//                 name:'額度',
        //這是設定的false,就不不顯示下方的x軸,預設是true的
                show: false,
        //這裡呢,就是每個柱的name了,根據實際情況下就好了,我就先寫這三個
                data : ['最多','平均','最少'],
                axisLabel: {
             //這個是傾斜角度,也是考慮到文字過多的時候,方式覆蓋採用傾斜
// rotate: 30,             //這裡是考慮到x軸檔案過多的時候設定的,如果文字太多,預設是間隔顯示,設定為0,標示全部顯示,當然,如果x軸都不顯示,那也就沒有意義了 interval :0 } } ], yAxis : [ { type : 'value', name:'數量',           //下面的就很簡單了,最小是多少,最大是多少,預設一次增加多少 min:
0, max: 30, interval: 6,           //下面是顯示格式化,一般來說還是用的上的 axisLabel: { formatter: '{value} 包' } } ], series : [ { name: '數量', type: 'bar', itemStyle: { normal: {               //好,這裡就是重頭戲了,定義一個list,然後根據所以取得不同的值,這樣就實現了, color: function(
params) { // build a color map as your need. 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: '{c}' formatter: '{b}\n{c}' } } },           //設定柱的寬度,要是資料太少,柱子太寬不美觀~           barWidth:70, data: [28,15,9,4,7,8,23,11,17] } ]
複製程式碼