PHP前端开发

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

百变鹏仔 3周前 (11-27) #echarts
文章标签 如何使用

echarts统计,简单示例

推荐:《PHP视频教程》

先看下效果图

看下代码

立即学习“PHP免费学习笔记(深入)”;

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

<div><div><div></div></div></div>

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

<script></script>

下面是具体方法

<script>    var date = [],num = [];    $(document).ready(function () {        // 绘制反馈量图形        var init_echarts = function () {            var refreshChart = function (show_data) {                my_demo_chart = echarts.init(document.getElementById(&#39;echart_show&#39;));                my_demo_chart.showLoading({                    text: &#39;加载中...&#39;,                    effect: &#39;whirling&#39;                });                var echarts_all_option = {                    title: {                        text: &#39;&#39;,                        subtext: &#39;用户走势&#39;                    },                    tooltip: {                        trigger: &#39;axis&#39;                    },                    legend: {                        data: [&#39;用户数&#39;, &#39;用户消耗&#39;]                    },                    toolbox: {                        show: true,                        feature: {                            mark: {show: true},                            dataView: {show: true, readOnly: false},                            magicType: {show: true, type: [&#39;line&#39;, &#39;bar&#39;]},                            restore: {show: true},                            saveAsImage: {show: true}//                            myTool2: {//                                show: true,//                                title: &#39;自定义扩展方法&#39;,//                                icon: &#39;image://http://echarts.baidu.com/images/favicon.png&#39;,//                                onclick: function (){//                                    alert(&#39;自定义&#39;)//                                }//                            }                        }                    },                    dataZoom: {                        show: false,                        start: 0,                        end: 100                    },                    xAxis: [                        {                            type: &#39;category&#39;,                            boundaryGap: true,                            data: show_data[1]                        },                        {                            type: &#39;category&#39;,                            boundaryGap: true,                            data: show_data[1]                        }                    ],                    yAxis: [                        {                            type: &#39;value&#39;,                            scale: true,                            name: &#39;用户数&#39;,                            boundaryGap: [0, 0.5]//                            boundaryGap: [0.2, 0.2]                        },                        {                            type: &#39;value&#39;,                            scale: true,                            name: &#39;用户数&#39;,                            boundaryGap: [0, 0.5]                        }                    ],                    series: [                        {                            name: &#39;用户消耗&#39;,                            type: &#39;bar&#39;,                            xAxisIndex: 1,                            data: show_data[0]                        },                        {                            name: &#39;用户数&#39;,                            type: &#39;line&#39;,                            xAxisIndex: 1,                            data:show_data[0]                        }                    ]                };                my_demo_chart.hideLoading();                my_demo_chart.setOption(echarts_all_option);            };            // 获取原始数据            $.ajax({                url:"__CONTROLLER__/getRes",                async:false,                dataType:&#39;json&#39;,                type:&#39;post&#39;,                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-&gt;query($sql);        $this-&gt;ajaxReturn(array('code'=&gt;200,'result'=&gt;$result));    }

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

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