Echarts显示后台传送的json数据

1.前台发送请求：

 $.post("{:url('CaseWatch/getData')}",function (data) {
      console.log(data);
 }

2.后台从数据库查询数据（TP框架为例）：

 $sql = "SELECt  `subject`,COUNT(`subject`) as subject_num FROM tp_cases GROUP BY `subject`"; //学科统计
 $case_info  = Db::query($sql);   //学科统计
 return $case_info;  //默认返回json数据

3.返回结果如下：

4.对返回的数据处理：

    var xData = [];
    var yData = [];
    $.post("{:url('CaseWatch/getData')}",function (data) {
 var length = data.length;
 for (var i = 0; i
5.生成Echart代码写在函数中：
function getChart () {
 var myChart = echarts.init(document.getElementById('main'));
 // 指定图表的配置项和数据
 var option = {
     title: {
  text: '案例观看信息'
     },
     toolbox:{
  show:true,
  title:'案例信息',
  feature:{
      dataView:{
   show:true
      },
      saveAsImage:{
   type:'png',
   show:true
      },
      magicType:{
   show:true,
   type:['bar','line']
      }
  }
     },
     tooltip: {
  show:true,
  trigger:'item'
     },
     legend: {
  data:['数量']
     },
     xAxis: {
  data:xData,
  //数据项太多，斜着显示
  axisLabel:{
      interval:0,
      padding:[0,-5],
      rotate:45,
  },
     },
     yAxis: {},
     series: [{
  name: '数量',
  type: 'bar',
  data:yData,
     }]
 };
 myChart.setOption(option);
    }
5.在封装好数据后调用此函数即可：
$.post("{:url('CaseWatch/getData')}",function (data) {
 var length = data.length;
 for (var i = 0; i
6.结果如图所示：

7.大功告成啦！