echarts用前端展示后端传递过来的数据

最近一段时间因为毕业的论文要求，对于数据的展示和处理，我想到了用echats直接画折线图等等，比较直观，由于项目后端值提供了数据接口，所以重点对于echarts的应用我放在了前端，下面是具体事例
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.大功告成啦！

以上事例来源于网上，我根据这个demo做出了自己的项目，我的项目比这个要复杂不少，有时间把我的项目贴出来，重点在于对后端传递json数据做处理，得到自己想要的json数据就可以套用上面的模板了。