最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

PHP如何使用Echarts生成数据统计报表

来源:动视网 责编:小采 时间:2020-11-02 18:23:05
文档

PHP如何使用Echarts生成数据统计报表

PHP如何使用Echarts生成数据统计报表:echarts统计,简单示例推荐:《PHP视频教程》先看下效果图看下代码HTML页面 为ECharts准备一个Dom,宽高自定义<div class="panel panel-info"> <div class="panel-body"> <div
推荐度:
导读PHP如何使用Echarts生成数据统计报表:echarts统计,简单示例推荐:《PHP视频教程》先看下效果图看下代码HTML页面 为ECharts准备一个Dom,宽高自定义<div class="panel panel-info"> <div class="panel-body"> <div
 echarts统计,简单示例

推荐:《PHP视频教程》

先看下效果图

看下代码

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

<div class="panel panel-info">
  <div class="panel-body">
    <div id="echart_show" style="height:500px"></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中一些参数不太理解的,大家可以参考官网 https://www.echartsjs.com/option.html#title

文档

PHP如何使用Echarts生成数据统计报表

PHP如何使用Echarts生成数据统计报表:echarts统计,简单示例推荐:《PHP视频教程》先看下效果图看下代码HTML页面 为ECharts准备一个Dom,宽高自定义<div class="panel panel-info"> <div class="panel-body"> <div
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top