echarts统计,简单示例

先看下效果图

看下代码

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中一些参数不太理解的,大家可以参考官网  Echarts Documentation

多动手,会更优秀

PHP 使用Echarts生成数据统计报表的更多相关文章

  1. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器功能简介---实时数据统计报表、视频文件上传、点播、分享、集成

    熟悉EasyDSS流媒体服务器的小伙伴应该都知道,EasyDSS通过将EasyRTMP推流的直播流进行直播转码.智能处理.视频分发,再通过 CDN 分发节点分发到终端播放 SDK为观众播放高清低延时的 ...

  2. echarts 数据统计报表

    官网   http://echarts.baidu.com/index.html 我们下载好开发包后就可以开始了,第一步引入开发包,和需要的主题文件(可定义自己的主体文件),并定义好页面布局.2.0以 ...

  3. EasyDSS流媒体解决方案实现的实时数据统计报表、视频文件上传、点播、分享、集成代码等功能

    之前的EasyDSS作为rtmp流媒体服务器自从推出就备受用户好评,随着用户的需求的变更产品自身的发展是必须的: 为了更好的用户体验和和功能的完善,我们在EasyDSS的基础上增添了服务器硬件数据报表 ...

  4. python制作简单excel统计报表3之将mysql数据库中的数据导入excel模板并生成统计图

    python制作简单excel统计报表3之将mysql数据库中的数据导入excel模板并生成统计图 # coding=utf-8 from openpyxl import load_workbook ...

  5. Echarts 之三 —— 地市联动数据统计二

    一.简介 除了是一个地图之外,我们也可以使用多地图进行地市.区县联动数据统计.需求如下:展示整改广东省的地图,并显示统计信息,当点击某一个地市的时候,就显示该地市的地图,并统计该地市区县的数据信息.二 ...

  6. Echarts 之二——地市联动数据统计

    一.简介 通过地图可以更直观地展示各个地区的统计数据,能够更清楚地进行数据分析.有些场景下,我们不仅仅需要对每个地市进行统计分析.更需要对地市一下的区县进行数据统计,并进行联动.此事我们可以通过Ech ...

  7. ECharts – 大数据时代,重新定义数据图表

    ECharts 基于 Canvas 的纯 Javascript 图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对 ...

  8. 一个统计报表sql问题

    今天朋友问我了一个统计报表的sql问题.我弄了好久.终于算是写出来了.这里记录下. 问题:  id--------------name--------------addtime1            ...

  9. statpot:使用mongo+bootstrap+highcharts做统计报表

    最近做了一个统计项目,这个统计项目大致的需求是统计接口的访问速度.客户端会调用一个接口来记录接口的访问情况,我的需求就需要分析这些数据,然后做出个统计报表. 需求实现 最初的时候想着每天把这些接口访问 ...

随机推荐

  1. Is It A Tree?

    Is It A Tree? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...

  2. VMware三种网络模式

    VMware网络配置详解一:三种网络模式简介安装好虚拟机以后,在网络连接里面可以看到多了两块网卡: 其中VMnet1是虚拟机Host-only模式的网络接口,VMnet8是NAT模式的网络接口,这些后 ...

  3. 0_Simple__cudaOpenMP

    在OpenMP的多线程程序中,各线程分别调用CUDA进行计算.OpenMP的简单示例. ▶ 源代码: #include <omp.h> #include <stdio.h> # ...

  4. transform的影响

    http://www.cnblogs.com/chuangweili/p/5167986.html transform 各种影响 1.提升元素的z-index层级,下面这个例子会让前面的图片显示在上面 ...

  5. js 添加事件 attachEvent 和 addEventListener 的区别

    1.addEventListener 适用w3c标准方法addEventListener绑定事件,如下,事件的执行顺序和绑定顺序一致,执行顺序为method1->method2->meth ...

  6. font-size:100% 原因

    The browser default which is something like 16pt for Firefox, You can check by going into Firefox op ...

  7. JS中有关正则表达式的一些常见应用

    总所周知,正则表达式主要用于字符串处理.表单验证等,简单的代码量实现复杂的功能 1.身份证号码的一个校验 先做一个简单的位数校验来判断身份证的合法性:(15位数字或18位数字或17位数字加X|x) v ...

  8. .Net主线程扑捉子线程中的异常

    首先看一段C#代码:运行后发现主线程通过try{}catch{}是不能扑捉子线程中的抛出来的异常. 代码 );        }        public void run()        {   ...

  9. Python之re正则模块

    正则表达式可以帮助我们更好的描述复制的文本格式,可以更好地利用它们对文本数据进行检索.替换.提取和修改操作. http://www.cnblogs.com/huxi/archive/2010/07/0 ...

  10. 优雅的使用Chrome调试Node程序

    前言 我不知道大家用什么来调试node程序.可能有的人用node-inspect,但是这货很久没更新了,而且一堆的bug用起来很不爽:可能有的人用命令行来,但是这样操作不够灵活:还有人只用consol ...