PHP 使用Echarts產生資料統計報表的實現

這篇文章主要介紹了PHP 使用Echarts產生資料統計報表的實現代碼,需要的朋友可以參考下

echarts統計，簡單樣本

先看下

看下代碼

HTML頁面 為ECharts準備一個Dom，寬高自訂

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

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中一些參數不太理解的，大家可以參考官網 Echarts Documentation

相關推薦：

PHP根據手機號判斷電訊廠商

Laravel5.2使用Captcha產生驗證碼實現登入

PHP排序演算法系列之桶排序的詳解