PHP前端开发

PHP 使用Echarts生成数据统计报表详解

百变鹏仔 3周前 (11-27) #echarts
文章标签 详解

本文主要介绍了php 使用echarts生成数据统计报表的实现代码,需要的朋友可以参考下,希望能帮助到大家。

echarts统计,简单示例

先看下效果图

看下代码

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

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

<p></p><p></p><p></p>

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

下面是具体方法

<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中一些参数不太理解的,大家可以参考官网 Echarts Documentation