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 功能使服务器端代码可以立 ...
随机推荐
- Protobuf 文件生成工具 Prototool 命令详解
Protobuf 文件生成工具 Prototool 命令详解 简介 Prototool 是 Protobuf 文件的生成工具, 目前支持go, php, java, c#, object c 五种语言 ...
- SetROP2
一个Windows API SetROP2(int nDrawMode)的使用 该函数的主要的作用是根据nDrawMode设置的方式重新设定绘图的方式,下面就不同的nDrawMode值具体解释绘图模式 ...
- 2014年第五届蓝桥杯国赛 Log大侠（区间合并+Java递归效率分析）
1678: Log大侠 java 时间限制: 2 Sec 内存限制: 256 MB提交: 20 解决: 1 题目描述 atm参加了速算训练班,经过刻苦修炼,对以2为底的对数算得飞快,人称L ...
- 我也来Show一下我的VisualStudio2017
1.首先,在微软官方网站下载VS2017的安装程序,后续的安装将通过这个安装程序来引导.这里有三个版本可供选择:社区版.专业版和企业版,社区版免费,专业版和企业版可以免费体验,之后收费,当然,在中国盗 ...
- OVS编译
下载源码 # git clone https://github.com/openvswitch/ovs.git # cd ovs # git checkout branch-2.8 下载依赖包 # y ...
- solidity 学习笔记（5）接口
接口:不用实现方法,仅仅定义方法. pragma solidity ^; contract cat{ //cat实际上实现了接口animalEat,因为他们有相同的方法. string name; f ...
- jsp学习与提高（三）——JSP Cookie 处理
1.cookie是什么 Cookie是存储在客户机的文本文件,它们保存了大量轨迹信息.在servlet技术基础上,JSP显然能够提供对HTTP cookie的支持. 通常有三个步骤来识别回头客: 服务 ...
- Nacos深入浅出（八）
Nacos-spring-context.java 感觉这个后台要比之前的Nacos复杂多了,涉及到很多基础的概念,慢慢看,这个后面慢慢更新解析过程 看到他的目录结构一个是基于注解,一个是XML的解析 ...
- 3分钟简单了解 prototype 和 __proto__
关于prototype 1. 所有的函数都会有一个prototype属性,属性值是一个普通对象: 2. 当我们去new一个构造函数的实例时,构造函数的原型对象(prototype)会被赋值给它实例的[ ...
- NET Core 2.0 自定义
ASP.NET Core 2.0 自定义 _ViewStart 和 _ViewImports 的目录位置 在 ASP.NET Core 里扩展 Razor 查找视图目录不是什么新鲜和困难的事情,但 _ ...