echarts问题记录

Posted 2020-10-30 yyumeng

 

下面是横向的柱状图：

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配置了解一下。