mysql+thinkphp +amcharts 完成图表统计功能
思路：从mysql数据库查询数据，经过thinkphp 后端控制器做逻辑处理，返回给前端，前端调用Amcharts 插件
1.数据查询：
public function order($time='',$radio=1){
if($time== ''){
$time = Date("Y");
}
$bt = $time."-01-01 00:00:00";
$et = (string)((int)$time+1)."-01-01 00:00:00";
$sql='';
if($radio==1){
$sql="SELECT right(tt.month,2) as month, IFNULL( we.web, 0 ) as web, IFNULL( wx.weixin, 0 ) as weixin, IFNULL( ad.andriod, 0 ) as andriod , IFNULL( ip.iphone, 0 ) as iphone
FROM (
(
SELECT DATE_FORMAT( `AddTime` , '%Y-%m' ) AS
MONTH FROM `order`
WHERE State = 2
AND AddTime >= '$bt'
AND AddTime < '$et'
GROUP BY MONTH
) AS tt
LEFT JOIN (
SELECT DATE_FORMAT( `AddTime` , '%Y-%m' ) AS
MONTH , SUM( `PayMoney` ) AS web
FROM `order`
WHERE `OrderSource` =1
AND State = 2
AND AddTime >= '$bt'
AND AddTime < '$et'
GROUP BY MONTH
) AS we ON tt.month = we.month
LEFT JOIN (
SELECT DATE_FORMAT( `AddTime` , '%Y-%m' ) AS
MONTH , SUM( `PayMoney` ) AS weixin
FROM `order`
WHERE `OrderSource` =2
AND State = 2
AND AddTime >= '$bt'
AND AddTime < '$et'
GROUP BY MONTH
) AS wx ON tt.month = wx.month
LEFT JOIN (
SELECT DATE_FORMAT( `AddTime` , '%Y-%m' ) AS
MONTH , SUM( `PayMoney` ) AS andriod
FROM `order`
WHERE `OrderSource` =3
AND State = 2
AND AddTime >= '$bt'
AND AddTime < '$et'
GROUP BY MONTH
) AS ad ON tt.month = ad.month
LEFT JOIN (
SELECT DATE_FORMAT( `AddTime` , '%Y-%m' ) AS
MONTH , SUM( `PayMoney` ) AS iphone
FROM `order`
WHERE `OrderSource` =4
AND State = 2
AND AddTime >= '$bt'
AND AddTime < '$et'
GROUP BY MONTH
) AS ip ON tt.month = ip.month
)";
}else{
$sql="SELECT right(tt.month,2) as month, IFNULL( we.web, 0 ) as web, IFNULL( wx.weixin, 0 ) as weixin, IFNULL( ad.andriod, 0 ) as andriod, IFNULL( ip.iphone, 0 ) as iphone
FROM (
(
SELECT DATE_FORMAT( `AddTime` , '%Y-%m' ) AS
MONTH FROM `order`
WHERE State = 2
AND AddTime >= '$bt'
AND AddTime < '$et'
GROUP BY MONTH
) AS tt
LEFT JOIN (
SELECT DATE_FORMAT( `AddTime` , '%Y-%m' ) AS
MONTH , count( `id` ) AS web
FROM `order`
WHERE `OrderSource` =1
AND State = 2
AND AddTime >= '$bt'
AND AddTime < '$et'
GROUP BY MONTH
) AS we ON tt.month = we.month
LEFT JOIN (
SELECT DATE_FORMAT( `AddTime` , '%Y-%m' ) AS
MONTH , count( `id` ) AS weixin
FROM `order`
WHERE `OrderSource` =2
AND State = 2
AND AddTime >= '$bt'
AND AddTime < '$et'
GROUP BY MONTH
) AS wx ON tt.month = wx.month
LEFT JOIN (
SELECT DATE_FORMAT( `AddTime` , '%Y-%m' ) AS
MONTH , count( `id` ) AS andriod
FROM `order`
WHERE `OrderSource` =3
AND State = 2
AND AddTime >= '$bt'
AND AddTime < '$et'
GROUP BY MONTH
) AS ad ON tt.month = ad.month
LEFT JOIN (
SELECT DATE_FORMAT( `AddTime` , '%Y-%m' ) AS
MONTH , count( `id` ) AS iphone
FROM `order`
WHERE `OrderSource` =4
AND State = 2
AND AddTime >= '$bt'
AND AddTime < '$et'
GROUP BY MONTH
) AS ip ON tt.month = ip.month
)";
}
$m = new Model();//实例化对象模型
//echo $sql;
$o = $m->query($sql);
//dump(json_encode($o));
$this-> o = json_encode($o);
$this-> ol = $o;
$this-> time = $time;
$this-> radio = $radio;
$this-> timearr = $temp;
$this ->display('order');
}
public function recharge($time='',$radio=1,$year=NULL,$month=NULL){
$this->meta_title = '充值信息统计';
$sql= '';
if($radio==1){//按月统计
if($time== ''){
$time = Date("Y");
}
$bt = $time."-01-01 00:00:00";
$et = (string)((int)$time+1)."-01-01 00:00:00";
$sql="SELECT right(tt.month,2) as month, IFNULL( we.usum, 0 ) as usum
FROM (
(
SELECT DATE_FORMAT( `AddTime` , '%Y-%m' ) AS
MONTH FROM `recharge`
WHERE PayType in(0,1)
AND AddTime >= '$bt'
AND AddTime < '$et'
GROUP BY MONTH
) AS tt
LEFT JOIN (
SELECT DATE_FORMAT( `AddTime` , '%Y-%m' ) AS
MONTH , sum( `Money` ) AS usum
FROM `recharge`
WHERE PayType in(0,1)
AND AddTime >= '$bt'
AND AddTime < '$et'
GROUP BY MONTH
) AS we ON tt.month = we.month
)";
$this-> showname = '月';
}else{//按天统计
if(!$year){
$year = Date("Y");
}
$time = Date("Y");
if(!$month){
$month = Date("m");
}
$bt = $year.'-'.$month."-01 00:00:00";
$et = date('Y-m-d H:i:s',strtotime('+1 month',strtotime($bt)));
$sql="SELECT right(tt.month,2) as month, IFNULL( we.usum, 0 ) as usum
FROM (
(
SELECT DATE_FORMAT( `AddTime` , '%Y-%m-%d' ) AS
MONTH FROM `recharge`
WHERE PayType in(0,1)
AND AddTime >= '$bt'
AND AddTime < '$et'
GROUP BY MONTH
) AS tt
LEFT JOIN (
SELECT DATE_FORMAT( `AddTime` , '%Y-%m-%d' ) AS
MONTH , sum( `Money` ) AS usum
FROM `recharge`
WHERE PayType in(0,1)
AND AddTime >= '$bt'
AND AddTime < '$et'
GROUP BY MONTH
) AS we ON tt.month = we.month
)";
$this-> showname = '天';
}
$m = new Model();//实例化对象模型
//echo $sql;
$o = $m->query($sql);
//dump($o);
$this-> o = json_encode($o);
$this-> ol = $o;
$this-> time = $time;
$this-> radio = $radio;
$this-> year = $year;
$this-> month = $month;
$this ->display('recharge');
}
用到分组查询，sql 函数 有
A. right(tt.month,2) as month
B. IFNULL( we.usum, 0 ) as usum
C. count( `id` ) AS unum
D. sum( `Money` ) AS usum
E. SELECT DATE_FORMAT( `AddTime` , '%Y-%m' ) AS
MONTH FROM `table`
WHERE XXXXX
GROUP BY MONTH（分组group by 直接用select 后面的month即可）
'%Y-%m' 是时间格式，DATE_FORMAT 用于时间格式为“2012-01-01 00:01:22”的这种形式。
F. SELECT FROM_UNIXTIME( `AddTime` , '%Y-%m-%d') AS
MONTH , count( `id` ) AS unum
FROM `table`
WHERE XXXXX
GROUP BY MONTH
FROM_UNIXTIME 用于时间戳格式。
分组的思想是先查询出有哪些组，然后在查询出符合的数据，然后用left join 来组合。
2. 前端数据整合
A. 数据格式
给前端的数据格式为JSON：
var chartData = [
{
"month": "01",
"web": 2.5,
"weixin": 2.5,
"andriod": 2.1,
"iphone": 1.3
},
{
"month": "02",
"web": 2.6,
"weixin": 2.7,
"andriod": 2.2,
"iphone": 1.3
},
{
"month": "03",
"web": 2.5,
"weixin": 2.5,
"andriod": 2.1,
"iphone": 1.3
},
{
"month": "04",
"web": 2.6,
"weixin": 2.7,
"andriod": 2.2,
"iphone": 1.3
},
{
"month": "05",
"web": 2.8,
"weixin": 2.9,
"andriod": 2.4,
"iphone": 1.3
},
{
"month": "06",
"web": 2.8,
"weixin": 2.9,
"andriod": 2.4,
"iphone": 1.3
},
{
"month": "07",
"web": 2.5,
"weixin": 2.5,
"andriod": 2.1,
"iphone": 1.3
},
{
"month": "08",
"web": 2.6,
"weixin": 2.7,
"andriod": 2.2,
"iphone": 1.3
},
{
"month": "09",
"web": 2.8,
"weixin": 2.9,
"andriod": 2.4,
"iphone": 1.3
},
{
"month": "10",
"web": 2.8,
"weixin": 2.9,
"andriod": 2.4,
"iphone": 1.3
},
{
"month": "11",
"web": 2.8,
"weixin": 2.9,
"andriod": 2.4,
"iphone": 1.3
},
{
"month": "12",
"web": 2.8,
"weixin": 2.9,
"andriod": 2.4,
"iphone": 1.3
}
];
thinkphp 查询出来的数据时数组，用json_encode 转换成JSON 数组
$o = $m->query($sql);
$this-> o = json_encode($o);
$this-> ol = $o;
B. html 代码（要画图的层）
<div id="chartdiv" style="width: 700px; height: 500px;float:left"></div>
C. 画图
柱状图：
var chart;
var chartData = <?=$o?>;
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "month";
chart.plotAreaBorderAlpha = 0.2; // AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.gridAlpha = 0.1;
categoryAxis.axisAlpha = 0;
categoryAxis.gridPosition = "start"; // value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.stackType = "regular";
valueAxis.gridAlpha = 0.1;
valueAxis.axisAlpha = 0;
chart.addValueAxis(valueAxis); // GRAPHS
// first graph
var graph = new AmCharts.AmGraph();
graph.title = "官网";
graph.labelText = "[[value]]";
graph.valueField = "web";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.lineColor = "#ef3051";
graph.balloonText = "<span style='color:#555555;'>[[category]]</span><br><span style='font-size:14px'>[[title]]:<b>[[value]]</b></span>";
chart.addGraph(graph); // second graph
graph = new AmCharts.AmGraph();
graph.title = "微信";
graph.labelText = "[[value]]";
graph.valueField = "weixin";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.lineColor = "#d46724";
graph.balloonText = "<span style='color:#555555;'>[[category]]</span><br><span style='font-size:14px'>[[title]]:<b>[[value]]</b></span>";
chart.addGraph(graph); // third graph
graph = new AmCharts.AmGraph();
graph.title = "安卓";
graph.labelText = "[[value]]";
graph.valueField = "andriod";
graph.type = "column";
//graph.newStack = true; // this line starts new stack
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.lineColor = "#21d277";
graph.balloonText = "<span style='color:#555555;'>[[category]]</span><br><span style='font-size:14px'>[[title]]:<b>[[value]]</b></span>";
chart.addGraph(graph); // fourth graph
graph = new AmCharts.AmGraph();
graph.title = "苹果";
graph.labelText = "[[value]]";
graph.valueField = "iphone";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.lineColor = "#7e90f2";
graph.balloonText = "<span style='color:#555555;'>[[category]]</span><br><span style='font-size:14px'>[[title]]:<b>[[value]]</b></span>";
chart.addGraph(graph); // LEGEND
var legend = new AmCharts.AmLegend();
legend.borderAlpha = 0.2;
legend.horizontalGap = 10;
chart.addLegend(legend);
chart.depth3D = 25;
chart.angle = 30; // WRITE
chart.write("chartdiv");
}); // this method sets chart 2D/3D
function setDepth() {
if (document.getElementById("rb1").checked) {
chart.depth3D = 0;
chart.angle = 0;
} else {
chart.depth3D = 25;
chart.angle = 30;
}
chart.validateNow();
}
折线图：
var chart;
var chartData = <?=$o?>;
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "__IMG__/amcharts/images/";
chart.marginLeft = 20;
chart.marginRight = 20;
chart.marginTop = 20;
chart.dataProvider = chartData;
chart.categoryField = "month"; // AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = false; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "MM"; // our data is daily, so we set minPeriod to DD
// value axis
var valueAxis = new AmCharts.ValueAxis();
valueAxis.inside = true;
valueAxis.tickLength = 0;
valueAxis.axisAlpha = 0;
//valueAxis.minimum = 0;
//valueAxis.maximum = 100000000;
chart.addValueAxis(valueAxis); // GRAPH
var graph = new AmCharts.AmGraph();
graph.dashLength = 3;
graph.lineColor = "#7717D7";
graph.valueField = "usum";
graph.dashLength = 3;
graph.bullet = "round";
chart.addGraph(graph); // CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chart.addChartCursor(chartCursor); // GUIDES are used to create horizontal range fills
var guide = new AmCharts.Guide();
guide.value = 0;
guide.toValue = 1000000000000;
guide.fillColor = "#CC0000";
guide.fillAlpha = 0.2;
guide.lineAlpha = 0;
valueAxis.addGuide(guide);
// WRITE
chart.write("chartdiv");
});
// this method sets chart 2D/3D
function setDepth() {
if (document.getElementById("rb1").checked) {
chart.depth3D = 0;
chart.angle = 0;
} else {
chart.depth3D = 25;
chart.angle = 30;
}
chart.validateNow();
}
amcharts 插件要用到的文件：
amcharts.js amcharts图片文件夹（如下）
mysql+thinkphp +amcharts 完成图表统计功能的更多相关文章
- 若依项目整合eCharts实现图表统计功能
eCharts是一款强大的图表统计工具,具体介绍可查看其官网 http://echarts.baidu.com/echarts2/index.html 下面记录一下如何在若依项目中使用eCharts. ...
- Mysql的with rollup分组统计功能（5.1以上版本）
RollUp是上卷功能,类似于数据挖掘中的上卷操作. ROLLUp的功能和Order by功能是互斥的. mysql> SELECT year, SUM(profit) FROM sales G ...
- mtools 是由MongoDB 官方工程师实现的一套工具集，可以很快速的日志查询分析、统计功能，此外还支持本地集群部署管理.
mtools 是由MongoDB 官方工程师实现的一套工具集,可以很快速的日志查询分析.统计功能,此外还支持本地集群部署管理 https://www.cnblogs.com/littleatp/p/9 ...
- 通过百度echarts实现数据图表展示功能
现在我们在工作中,在开发中都会或多或少的用到图表统计数据显示给用户.通过图表可以很直观的,直接的将数据呈现出来.这里我就介绍说一下利用百度开源的echarts图表技术实现的具体功能. 1.对于不太理解 ...
- 世界上最好的语言搭建短链接及统计功能(附API代码)
前言 在这个营销的时代,短链接和二维码是企业进行营销中非常重要的工具,不仅仅是缩短了链接,而且还可以通过扩展获得更多的数据,诸如点击数.下载量.来源以及时间等等. 网上搜寻了一下比较有名有U.NU和0 ...
- Springboot项目配置druid数据库连接池,并监控统计功能
pom.xml配置依赖 <!-- https://mvnrepository.com/artifact/com.alibaba/druid --> <dependency> & ...
- MySQL 8.0有什么新功能
https://mysqlserverteam.com/whats-new-in-mysql-8-0-generally-available/ 我们自豪地宣布MySQL 8.0的一般可用性. 现在下载 ...
- go语言实战教程之 后台管理页面统计功能开发（1）
本节内容我们将学习开发实现后台管理平台页面统计功能开发的功能接口,本章节内容将涉及到多种请求路由的方式. 功能介绍 后台管理平台不仅是功能管理平台,同时还是数据管理平台.从数据管理平台角度来说,在管理 ...
- 使用SignalR ASP.NET Core来简单实现一个后台实时推送数据给Echarts展示图表的功能
什么是 SignalR ASP.NET Core ASP.NET Core SignalR 是一种开放源代码库,可简化将实时 web 功能添加到应用程序的功能. 实时 web 功能使服务器端代码可以立 ...
随机推荐
- idea+tomcat 解决 debug超级慢 问题
最近在用intellij idea 开发程序,发现debug的时候启动得特别慢,正常run的时候启动的特别快,相差30多倍. 方法断点会戏剧性的降低debug的速度.当时并没有在意,因为并不清晰这个方 ...
- 滴滴Booster移动APP质量优化框架 学习之旅 二
推荐阅读: 滴滴Booster移动App质量优化框架-学习之旅 一 Android 模块Api化演练 不一样视角的Glide剖析(一) 续写滴滴Booster移动APP质量优化框架学习之旅,上篇文章分 ...
- 第一课、OpenGL绘制直线等等
第一课.OpenGL绘制直线等等 分类: [开发技术]OpenGL 2012-01-18 14:59 5217人阅读 评论(0) 收藏 举报 buffer图形c // // main.c // o ...
- UITableView设置Cell左滑多个按钮（编辑，删除，置顶等）
一.iOS7不支持cell多个按钮这个时候可以使用一个三方库JZTableViewRowAction,引用类扩展文件并实现其代理方法 JZTableViewRowAction下载地址:http://d ...
- LeetCode: 598 Range Addition II(easy)
题目: Given an m * n matrix M initialized with all 0's and several update operations. Operations are r ...
- SEO优化之——rel=canonical(整合重复页)
用法一 如图所示 有三个页面,三个页面的访问路径都不一样,但是现实的内容page2和page3显示的内容和page1一样,这时候在三个page中分别都加入了<link res="can ...
- js读取excel中日期格式转换问题
在使用js-xlsx插件来读取excel时,会将2018/10/16这种数据自动装换成48264.12584511. 所以需要自己手动再转换回来 // excel读取2018/01/01这种时间格式是 ...
- 3dmax沿立方体边扩展出面
这个做法有问题,接缝问题处理起来很麻烦,立方体与平面的拼接基本就做不到 做建筑时,一般先做墙,然后通过墙扩展出地表,这么做可以保证墙和地表是一体的,避免产生缝隙 1 新建2个Cube 2 转换为可编辑 ...
- 洛谷 P5162 WD与积木【多项式求逆】
设f[i]为i个积木能堆出来的种类,g[i]为i个积木能堆出来的种类和 \[ f[n]=\sum_{i=1}^{n}C_{n}^{i}g[n-i] \] \[ g[n]=\sum_{i=1}^{n}C ...
- 洛谷P4052 [JSOI2007]文本生成器（AC自动机）
传送门 好像这题的确只能用AC自动机做了……Aufun大佬太强啦 正着难我们反着做,用总共单词个数减去没有一个单词都不包含的 然后考虑怎么处理一个单词都不包含的,就是跑不到单词的结尾节点 定义$f[i ...