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

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

新老客户大回馈,云服务器低至5折


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的统计图就出来了

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


原文链接:http://www.phpxs.com/post/6375/
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:PHP生成短链接的实例汇总与分享

下一篇:MySQL基础入门之常用命令使用