下面是横向的柱状图：
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配置了解一下。
