Detailed explanation of using Echarts to generate statistical reports with PHP

This article mainly introduces the implementation code of PHP using Echarts to generate data statistical reports. Friends who need it can refer to it. I hope it can help everyone.

echarts statistics, simple example

Look at the renderings first

##Look at the code

HTML page is ECharts Prepare a Dom, custom width and height

<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 it here, introduce

169411f9ea098c1e24dc15c2c381291f2cacc6d41bbb37262a98f745aa00fbf0

The following is the specific method

<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(&#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>

Query the data you need in the controller (the date queried here and the corresponding quantity)

//折线统计
  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 statistical chart has come out

If you don’t understand some parameters in echarts, you can refer to the official website Echarts Documentation

Related recommendations:

Detailed explanation of the correct posture of using Echarts in React components

HTML5, JS, JQuery, ECharts asynchronous loading

ECharts3 implements the operation of dynamic data + time axis

The above is the detailed content of Detailed explanation of using Echarts to generate statistical reports with PHP. For more information, please follow other related articles on the PHP Chinese website!