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<length;i++) {
            if(data[i]['subject'] !== null) {
                xData.push(data[i]['subject'])
            }
            if(data[i]['subject_num'] !== null) {
                yData.push(data[i]['subject_num']);
            }
        }
    })

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<length;i++) {
            if(data[i]['subject'] !== null) {
                xData.push(data[i]['subject'])
            }
            if(data[i]['subject_num'] !== null) {
                yData.push(data[i]['subject_num']);
            }
        }
        getChart();
    });

6.结果如图所示：

7.大功告成啦！