下面是橫向的柱狀圖：

option = {
　　backgroundColor:‘#fff‘,
　　tooltip: {
　　　　trigger: ‘item‘,
　　　　axisPointer: { // 坐標軸指示器，坐標軸觸發有效
　　　　　　type: ‘shadow‘ // 默認為直線，可選為：‘line‘ | ‘shadow‘
　　　　},
　　　　padding: 10,
　　　　formatter: function(params) {
　　　　　　return params.name + ‘</br>‘ + title+‘：‘ + params.value + ‘</br>‘ + ‘數據占比：‘ + params.data.rate+"%"
　　　　}
　　},
　　yAxis : [
　　　　{
　　　　　　type : ‘category‘,
　　　　　　data: res.datas.data[keyName],
　　　　　　name: reportType=="area"?"省份":"機型",
　　　　}
　　],
　　xAxis : [
　　　　{
　　　　　　type : ‘value‘,
　　　　axisLine:{
　　　　　　show:true,
　　　　　　lineStyle:{
　　　　　　　　color:‘#DDDDDD‘,
　　　　　　　　width:1
　　　　　　}
　　　　},
　　　　splitLine:{
　　　　　　show:false
　　　　},
　　　　axisLabel:{
　　　　　　show:true,
　　　　　　textStyle:{
　　　　　　　　color:‘#000‘
　　　　　　}
　　　　}
　　　}
　　],
series: [{
　　type: ‘bar‘,
　　data:[{

　　　　value:12,

　　　　rate:1

　　　　},{

　　　　value:13,

　　　　rate:2

　　　　}]
　　}],
label:{
　　normal:{
　　　　　　show:true,
　　　　　　position:‘right‘,
　　　　　　textStyle:{
　　　　　　　　color:‘black‘
　　　　　　},
　　　　　　formatter:function(params){
　　　　　　　　　　return params.value+"，"+params.data.rate+"%";

　　　　　　　}
　　　　}
　　}
};

其中

label:{
　　normal:{
　　　　show:true,
　　　　position:‘top‘,
　　　　textStyle:{
　　　　　　color:‘black‘
　　　　},

　　　　formatter:function(params){
　　　　　　return params.value+"，"+params.data.rate+"%";

　　　　}
　　}

}

使得柱狀圖上方可以顯示數值，formatter裏面是組合要顯示的內容組合。

xAxis : [
{
type : ‘value‘,
axisLine:{
show:true,
lineStyle:{
color:‘#DDDDDD‘,
width:1
}
},
splitLine:{
show:false
},
axisLabel:{
show:true,
textStyle:{
color:‘#000‘
}
}
}
],

這個裏面的type:value中的value 不能變化。而且series中的data數組中的每一項都要有value字段。不然圖表不生效。需要查看echart配置了解一下。

echarts問題記錄