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

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

内容导读

收集整理的这篇技术教程文章主要介绍了PHP使用Echarts生成数据统计报表的实现,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2805字,纯文字阅读大概需要5分钟

内容图文

这篇文章主要介绍了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="__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

相关推荐:

PHP根据手机号判断运营商

Laravel5.2使用Captcha生成验证码实现登录

PHP排序算法系列之桶排序的详解

以上就是PHP 使用Echarts生成数据统计报表的实现的详细内容,更多请关注Gxl网其它相关文章!

内容总结

以上是为您收集整理的PHP使用Echarts生成数据统计报表的实现全部内容,希望文章能够帮你解决PHP使用Echarts生成数据统计报表的实现所遇到的程序开发问题。 如果觉得技术教程内容还不错,欢迎将网站推荐给程序员好友。

内容备注

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。


本文关键词:

联系我们

在线咨询:点击这里给我发消息

邮件:w420220301@qq.com