首页 > > 网络编程 > Mysql >

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

2019-07-24 09:00:18来源：编程学习网阅读 ()

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">



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