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 功能使服务器端代码可以立 ...
随机推荐
- VC OnCtlColor函数来修改控件背景颜色
CWnd::OnCtlColor afx_msg HBRUSH OnCtlColor( CDC* pDC, CWnd* pWnd, UINT nCtlColor ); 返回值:OnCtlColor必须 ...
- URL辅助方法
URL辅助方法则负责用来产生url地址,那什么时候需要呢,以输出超链接来说,使用Html.ActionLink()辅助方法一定会产生超链接的a标签,如果只是想单纯的输出asp.net mvc的某个网址 ...
- HighChar
chart: { type:'bar', borderWidth:2, borderColor: '#CA5100', backgroundColor: '#90ED7D', shadow: { // ...
- JavaScript 原型的实际应用之实现一个 jQuery
我们平时使用jQuery大概是这样: let $p = $('p'); $p.css('fontSize', '40px'); 我们生成jQuery实例对象后,就可以使用原型上的css(), html ...
- 无监督学习：Neighbor Embedding(邻域嵌套)
一 Manifold Learning 我们要做的是非线性的降维,data是分布在低维空间里面,只是被扭曲到了高维空间. 比如地球的表面是一个二维平面,但是被塞到一个三维空间中. Manifold就是 ...
- JSP 标准标签库（JSTL）(菜鸟教程)
菜鸟教程 JSTL 1.1 与 JSTL 1.2 之间的区别?如何下载 JSTL 1.2? JSTL 1.2 中不要求 standard.jar 包. 您可以在 Maven 中央仓库中找到它们. ht ...
- ue4 retarge记录
动画重定位(相同骨骼) https://docs.unrealengine.com/latest/CHN/Engine/Animation/AnimationRetargeting/index.htm ...
- cf808D(xjb)
题目链接:http://codeforces.com/problemset/problem/808/D 题意:问能不能通过交换不超过两个元素的位置使得原数组变成能分成前,后和相等的连续两部分: 注意这 ...
- 加权并查集（银河英雄传说，Cube Stacking）
洛谷P1196 银河英雄传说 题目描述 公元五八○一年,地球居民迁移至金牛座α第二行星,在那里发表银河联邦创立宣言,同年改元为宇宙历元年,并开始向银河系深处拓展.宇宙历七九九年,银河系的两大军事集团在 ...
- eclipse中设置vm后缀文件以html高亮形式显示
第一步,打开Windows-preference-General-ContentTypes-Text-HTML 第二步,点击Add添加 "*.vm",Default-encodin ...