今天記錄一個Echart統計圖中的幾個小知識點以及方法（寫的不好，僅供參考）：如有不恰當之處，勞煩留言交流 （手動抱拳）
原圖入選所示第一張圖，改造后的圖是第二張：
改造前
改造后
首先看到這個圖的顏色，顏色的選擇按照自己的喜好和統計圖所應用的場景去找合適的幾個顏色組合，順便說一句，統計圖所應用場景不同，顏色的選也非常重要的，有些需要鮮艷一些，有些庄重一些，還有些需要有質感等等，所以統計圖顏色在某些場景中非常重要，因為顏色能給人最直觀視覺沖擊、第一映像；此圖中的顏色，是本人自己找了一個，
var myColor =[ '#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6' ]
接下來看看這個顏色是如何應用到圖中的文字、圖形上的，
左邊文字上 axisLabel 的顏色是在option中的對應的位置 這么設置的，關鍵地方寫了注釋
axisLabel: {
textStyle: { //文字的風格
//這個地方顏色是支持回調函數的這種的，如果是一種顏色則可以寫成： color :'#1089E7'
color : function(value, index) { //value, index這是傳入的兩個參數
var num = myColor.length; //得到myColor顏色數組的長度
return myColor[index % num]; //返回顏色數組中的一個對應的顏色值
},
fontSize: '16' //字體大小
}
}
中間空心的條形圖顏色設置，
itemStyle: {
normal: {
//這個地方顏色是支持回調函數的這種的，如果是一種顏色則可以寫成： color :'#1089E7'
color: function(params) { //傳入的參數
var num = myColor.length； //得到myColor顏色數組的長度
return myColor[params.dataIndex % num] //返回顏色數組中的一個對應的顏色值
},
}
},
要顯示在柱子上或者進度條上的值的格式和顏色及位置
label: {
normal: {
show: true, //是否顯現，不顯示的話設置成false
position: 'right', //顯示的位置
distance: 10, //距離侄子的值
// label要顯示的值比如： 20%
formatter: function(param) {
return param.value + '%'
},
textStyle: {
//這個地方顏色是支持回調函數的這種的，如果是一種顏色則可以寫成： color :'#1089E7'
color : function(params) {
var num = myColor.length; //得到myColor顏色數組的長度
return myColor[params.dataIndex % num]; //返回顏色數組中的一個對應的顏色值
},
fontSize: '16'
}
}
}
接着來看看看外邊的那個框是如何設置的
外面的那個框其實是兩個框的疊加，上個圖，就明白了,注意看圖：
標數字1的地方是最底層，數字2的地方是中間層，數字3的地方是第三次，他們之間的關系是疊加的關系，通過調整他們各自的寬度、顏色、透明度
來實現如圖中所示的這種有邊框、陰影的視覺效果,代碼在圖的后面，有注釋
{
name: '白框',
type: 'bar',
yAxisIndex: 1, //使用的 y 軸的 index,這里有三個Y軸，這是第二個，第一個是最上層的那個
barGap: '-100%', //柱子之間的距離
data: [99.9, 99.9, 99.9, 99.9], //柱子的長度
barWidth: 20, //y軸柱子寬度
itemStyle: {
normal: {
color: '#ffffff', //柱子顏色
barBorderRadius: [5,5,5,5] //各個棱角的弧度
}
},
z: 1 //z值越大約在上層，這里的1是在0上面的一層
},
{
name: '外框',
type: 'bar',
yAxisIndex: 2, //使用的 y 軸的 index,這里有三個Y軸，這是第二個，第一個是最上層的那個
barGap: '-100%', //柱子之間的距離
data: [100, 100, 100, 100], //柱子的長度
barWidth: 23, //y軸柱子寬度
itemStyle: {
normal: {
//這個地方顏色是支持回調函數的這種的，如果是一種顏色則可以寫成： color :'#1089E7'
color : function(params) {
var num = myColor.length; //得到myColor顏色數組的長度
return myColor[params.dataIndex % num]; //返回顏色數組中的一個對應的顏色值
},
color: function(params) {
var num = myColor.length; //得到myColor顏色數組的長度
return myColor[params.dataIndex % num]; //返回顏色數組中的一個對應的顏色值
},
}
barBorderRadius: [5,5,5,5], //各個棱角的弧度
},
z: 0 //z值越大約在上層，這里的0最底層
}