您的位置:首页 > 产品设计 > UI/UE

layui实现报表数据

2019-01-22 16:12 447 查看

1.html加载界面

<div id="building" ></div>

2.js渲染

//调方法传值
function getBuilding(){
var self =  this;
http({
url: this.api+'/WyReports/buildingReport',
dataType: 'json',
type: 'post',
success: function(resp) {
self.buildingReport(resp);//加载报表
}
})
};
//报表
function buildingReport(data){
var x = new Array();
var y = new Array();
for (var i=0;i<data.length;i++) {
x[i] = data[i].name;
y[i] = data[i].count;
}
var myChart = echarts.init(document.getElementById('building'));
option = {
title: {
text: '楼栋统计人数',
left: 'center',
top: 20,
textStyle: {
color: 'black'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},xAxis: {
   type: 'category',
   data: x
  },
  yAxis: {
   type: 'value'
  },
  series: [{
   data: y,
   type: 'bar',
   barWidth : 25
  }]
 };
 myChart.setOption(option);
};
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐