首页 > 数据库 > PHP 使用Echarts生成数据统计报表详解
2019
07-19

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


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" src="/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: {             showtrue,             feature: {               mark: {showtrue},               dataView: {showtruereadOnlyfalse},               magicType: {showtruetype: ['line''bar']},               restore: {showtrue},               saveAsImage: {showtrue} //              myTool2: { //                show: true, //                title: '自定义扩展方法', //                icon: 'image://http://echarts.baidu.com/images/favicon.png', //                onclick: function (){ //                  alert('自定义') //                } //              }             }           },           dataZoom: {             showfalse,             start0,             end100           },           xAxis: [             {               type'category',               boundaryGaptrue,               data: show_data[1]             },             {               type'category',               boundaryGaptrue,               data: show_data[1]             }           ],           yAxis: [             {               type'value',               scaletrue,               name'用户数',               boundaryGap: [00.5] //              boundaryGap: [0.2, 0.2]             },             {               type'value',               scaletrue,               name'用户数',               boundaryGap: [00.5]             }           ],           series: [             {               name'用户消耗',               type'bar',               xAxisIndex1,               data: show_data[0]             },             {               name'用户数',               type'line',               xAxisIndex1,               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的统计图就出来了

以上内容希望帮助到大家,有需要的可以添加下方二维码进群交流学习新技术。

扫码芷若 获取免费视频学习资料

编程学习

查 看2019高级编程视频教程免费获取