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

这篇文章主要介绍了PHP 使用Echarts生成数据统计报表的实现代码,需要的朋友可以参考下

echarts统计，简单示例

先看下效果图

看下代码

HTML页面 为ECharts准备一个Dom，宽高自定义

<p class="panel panel-info">　　<p class="panel-body">　　　　<p id="ech<span>%本文来源gaodai#ma#com搞*代#码9网#</span><strong>搞gaodaima代码</strong>art_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>

喜欢 (0)赏

[搞代码]

分享 (0)