PHP 使用Echarts生成数据统计报表的实现代码

Mike

echarts统计，简单示例
先看下效果图

看下代码
html页面 为echarts准备一个dom，宽高自定义

<div class="panel panel-info">
<div class="panel-body">
<div id="echart_show"></div>
</div>
</div>

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
原文链接：http://www.cnblogs.com/csd97/p/8079055.html