PHP如何使用Echarts生成数据统计报表

推荐：《PHP视频教程》

先看下效果图

看下代码

HTML页面 为ECharts准备一个Dom，宽高自定义

div class="panel panel-info">
    　　div class="panel-body">
    　　　　div id="echart_show" style="height:500px">
    /div>
    　　/div>
    /div>
    

js文件可以参考官网，或者在这里下载，引入

script tyPE="text/javascript" src="__ROOT__/Public/admin/lib/jquery/nowdatachars/echarts-all.js">
    /script>
    

下面是具体方法

script type="text/javascript">
        VAR date = [],num = [];
    $(document).ready(function () {
        // 绘制反馈量图形        var inIT_echarts = function () {
            var refreshChart = function (show_data) {
                    my_demo_chart = echarts.init(document.getElementById('echart_show'));
                my_demo_chart.showLoading({
                    text: '加载中...',                    effect: 'whirling'                }
    );
                var echarts_all_option = {
                    title: {
                        text: '',                        suBText: '用户走势'                    }
,                    tooltip: {
                        trigger: 'axis'                    }
,                    legend: {
                        data: ['用户数', '用户消耗']                    }
,                    toolbox: {
                        show: true,                        feature: {
                            mark: {
show: true}
,                            dataView: {
show: true, readOnly: false}
,                            magicType: {
show: true, type: ['line', 'bar']}
,                            reStore: {
show: true}
,                            saveAsImage: {
show: true}
//                            myTool2: {
//                                show: true,//                                title: '自定义扩展方法',//                                icon: 'image://http://echarts.baidu.COM/images/favicon.png',//                                onclick: function (){
//                                    alert('自定义')//                                }
//                            }
                        }
                    }
,                    dataZoom: {
                        show: false,                        start: 0,                        end: 100                    }
,                    xAxis: [                        {
                            type: 'category',                            boundaryGap: true,                            data: show_data[1]                        }
,                        {
                            type: 'category',                            boundaryGap: true,                            data: show_data[1]                        }
                    ],                    yAxis: [                        {
                            type: 'value',                            scale: true,                            name: '用户数',                            boundaryGap: [0, 0.5]//                            boundaryGap: [0.2, 0.2]                        }
,                        {
                            type: 'value',                            scale: true,                            name: '用户数',                            boundaryGap: [0, 0.5]                        }
                    ],                    series: [                        {
                            name: '用户消耗',                            type: 'bar',                            xAxisIndex: 1,                            data: show_data[0]                        }
,                        {
                            name: '用户数',                            type: 'line',                            xAxisIndex: 1,                            data:show_data[0]                        }
                    ]                }
    ;
                    my_demo_chart.hideLoading();
                    my_demo_chart.setOption(echarts_all_option);
            }
    ;
            // 获取原始数据            $.ajax({
                url:"__CONTROLLER__/getRes",                async:false,                dataType:'json',                type:'post',                success:function(msg){
                        var result = msg.result;
                    if(msg.code == 200){
                            for(var i = 0 ;
     i  result.length;
 i++){
                                date.push(result[i].date);
                                num.push(result[i].count);
                                msg[0] = num;
                                msg[1] = date;
                                refreshChart(msg);
                        }
                    }
                }
            }
    );
        }
    ;
        // 默认加载        var default_load = (function () {
                init_echarts();
        }
    )();
    }
    );
    /script>
    

控制器中查询自己需要的数据 （这里查询的日期和对应的数量）

//折线统计    public function getRes(){
            $user = M('account');
            $SQL = "SELECT date(createTime) AS date,count(*) as count From t_account  group by date ";
            $result = $user->
    query($sql);
            $this->
    ajaxReturn(array('code'=>
    200,'result'=>
    $result));
    }
    

至此，一个简单的echarts的统计图就出来了

对echarts中一些参数不太理解的，大家可以参考官网 https://www.echartsjs.com/option.html#title

以上就是PHP如何使用Echarts生成数据统计报表的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！