xAxis : [ui
{spa
type : 'category',code
// name:'額度',orm
//這是設置的false，就不不顯示下方的x軸，默認是true的string
show: false,it
//這裏呢，就是每一個柱的name了，根據實際狀況下就行了，我就先寫這三個io
data : ['最多','平均','最少'],function
axisLabel: {form
//這個是傾斜角度，也是考慮到文字過多的時候，方式覆蓋採用傾斜class
// 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]
}
]
說明：其實還能夠利用color來設置柱狀圖顏色，可是有時候color設置是沒有效果的。因此就採用了上述方法。