layui实现报表数据

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);
};