PHP uses Echarts to generate data statistics report implementation

This article mainly introduces PHP using Echarts to generate data statistics report implementation code, the need for friends can refer to the following

Echarts statistics, simple example

Let's see.

Look at the code.

HTML page prepares a DOM for echarts, wide and high custom

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

JS file can refer to the official website, or download here, introduce

<script type= "Text/javascript" src= "__root__/public/admin/lib/jquery/nowdatachars/echarts-all.js" ></ Script>

Here are the specific methods

<script type= "Text/javascript" > var date = [],num = []; $ (document). Ready (function () {//Draw feedback Amount graph var init_echarts = function () {var refreshchart = function (show_d        ATA) {My_demo_chart = Echarts.init (document.getElementById (' echart_show '));        My_demo_chart.showloading ({text: ' Loading ... ', Effect: ' whirling '});  var echarts_all_option = {title: {text: ', Subtext: ' User trend '}, tooltip: {trigger: ' Axis '}, Legend: {data: [' Number of users ', ' User Consumption '}, toolbox : {show:true, feature: {mark: {show:true}, DataView: {show:true, read              Only:false}, Magictype: {show:true, type: [' line ', ' Bar ']}, restore: {show:true},                Saveasimage: {show:true}//myTool2: {//show:true,//title: ' Custom extension method ',// ICon: ' image://http://echarts.baidu.com/images/favicon.png ',//Onclick:function () {//Aler            T (' Custom ')//}//}}}, Datazoom: {show:false, start:0, end:100}, Xaxis: [{type: ' category ', b Oundarygap:true, Data:show_data[1]}, {type: ' category ', b Oundarygap:true, Data:show_data[1]}], YAxis: [{typ E: ' Value ', scale:true, Name: ' Number of users ', Boundarygap: [0, 0.5]//boundary               GAP: [0.2, 0.2]}, {type: ' value ', scale:true, Name: ' Number of users ',              Boundarygap: [0, 0.5]}], series: [{name: ' User consumption ', Type: ' Bar ',             Xaxisindex:1, Data:show_data[0]}, {name: ' Number of users ',        Type: ' line ', Xaxisindex:1, Data:show_data[0]}]};        My_demo_chart.hideloading ();      My_demo_chart.setoption (echarts_all_option);      }; Get Raw data $.ajax ({URL: "__controller__/getres", Async:false, DataType: ' JSON ', type: ' Post '          , Success:function (msg) {var result = Msg.result;              if (Msg.code = =) {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);    }          }        }      });    };    Default load var Default_load = (function () {init_echarts ();  })(); });</script>

The controller queries the data you need (the date and number of queries here)

Polyline Statistics 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));  }

At this point, a simple echarts chart is out.

Echarts some of the parameters are not very understanding, we can refer to the official website Echarts documentation

Related recommendations:

PHP based on mobile phone number judge operator

Laravel5.2 using CAPTCHA to generate a verification code for login

A detailed description of the bucket ordering of the PHP sorting algorithm series