Echarts 表格 从后台获取数据
最近一年的月份 建立试图
CREATE ALGORITHM = UNDEFINED DEFINER = `root` @`%` SQL SECURITY DEFINER VIEW `ctrl_11_month_view` AS
SELECT
DATE_FORMAT(CURDATE(), '%Y-%m') AS `month`
UNION
SELECT
DATE_FORMAT((CURDATE() - INTERVAL 1 MONTH), '%Y-%m') AS `month`
UNION
SELECT
DATE_FORMAT((CURDATE() - INTERVAL 2 MONTH), '%Y-%m') AS `month`
UNION
SELECT
DATE_FORMAT((CURDATE() - INTERVAL 3 MONTH), '%Y-%m') AS `month`
UNION
SELECT
DATE_FORMAT((CURDATE() - INTERVAL 4 MONTH), '%Y-%m') AS `month`
UNION
SELECT
DATE_FORMAT((CURDATE() - INTERVAL 5 MONTH), '%Y-%m') AS `month`
UNION
SELECT
DATE_FORMAT((CURDATE() - INTERVAL 6 MONTH), '%Y-%m') AS `month`
UNION
SELECT
DATE_FORMAT((CURDATE() - INTERVAL 7 MONTH), '%Y-%m') AS `month`
UNION
SELECT
DATE_FORMAT((CURDATE() - INTERVAL 8 MONTH), '%Y-%m') AS `month`
UNION
SELECT
DATE_FORMAT((CURDATE() - INTERVAL 9 MONTH), '%Y-%m') AS `month`
UNION
SELECT
DATE_FORMAT(
(CURDATE() - INTERVAL 10 MONTH),
'%Y-%m'
) AS `month`
UNION
SELECT
DATE_FORMAT(
(CURDATE() - INTERVAL 11 MONTH),
'%Y-%m'
) AS `month`
统计数据
#统计没个月交易额以及每月交易量
SELECT
t.MONTH AS 'month',
IFNULL(c.befores, 0) AS 'sums',
IFNULL(c.orderNum, 0) AS 'orderNum'
FROM
ctrl_12_month_view t
LEFT JOIN
(SELECT
YEAR(create_date),
MONTH(create_date),
SUM(befores) AS 'befores',
COUNT(create_date) AS 'orderNum',
DATE_FORMAT(create_date, '%Y-%m') AS 'create_date'
FROM
ctrl_order_info
WHERE order_status = 3
GROUP BY EXTRACT(YEAR_MONTH FROM create_date)) c
ON t.MONTH = c.create_date
GROUP BY t.MONTH ;
#统计每月注册会员的人数以及 入驻的艺术家
SELECT
t.`month` AS 'month',
IFNULL(m.yishu, 0) AS 'yishu',
IFNULL(s.huiyuan, 0) AS 'huiyuan'
FROM
ctrl_12_month_view t
LEFT JOIN
(SELECT
COUNT(1) AS 'yishu',
DATE_FORMAT(in_time, '%Y-%m') AS 'in_time'
FROM
`ctrl_member_info`
WHERE `member_type` = 1
AND `del_flag` = 0
GROUP BY EXTRACT(YEAR_MONTH FROM in_time)) m
ON t.`month` = m.in_time
LEFT JOIN
(SELECT
COUNT(1) AS 'huiyuan',
DATE_FORMAT(create_date, '%Y-%m') AS 'create_date'
FROM
`ctrl_member_info`
WHERE `del_flag` = 0
GROUP BY EXTRACT(YEAR_MONTH FROM create_date)) s
ON t.`month` = s.create_date
GROUP BY t.MONTH ;
#获取昨日的交易信息
SELECT
IFNULL(SUM(befores),0) AS 'sums',
IFNULL(COUNT(create_date),0) AS 'orderNum'
FROM
ctrl_order_info
WHERE order_status = 3
AND DATE(create_date) = DATE_SUB(CURDATE(), INTERVAL 1 DAY) ;
#获取昨日的注册信息 以及注册总人数
SELECT
(SELECT
COUNT(1) AS 'huiyuan'
FROM
`ctrl_member_info`
WHERE `del_flag` = 0
AND DATE(create_date) = DATE_SUB(CURDATE(), INTERVAL 1 DAY)) AS 'huiyuan',
(SELECT
COUNT(1) AS 'yishu'
FROM
`ctrl_member_info`
WHERE `member_type` = 1
AND `del_flag` = 0
AND DATE(in_time) = DATE_SUB(CURDATE(), INTERVAL 1 DAY)) AS 'yishu' ,
(SELECT COUNT(1)
FROM `ctrl_member_info`
WHERE `del_flag` = 0) AS 'peoples';
jsp 页面 数据处理
<script type="text/javascript">
$(document).ready(function () {
liushui();
zhuce();
});
</script>
<div id="container" class="quarter-div blue">
<div class="to_do_list">
<fieldset class="mj_field">
<legend align="right"><h3 style="padding-left: 10px;padding-right: 10px;color: green;">流水</h3></legend>
<div id="mj_ls" style="width: 100%;height: 88%;"></div>
</fieldset>
</div>
</div>
<div id="container1" class="quarter-div green">
<div class="to_do_list">
<fieldset class="mj_field">
<legend align="right"><h3 style="padding-left: 10px;padding-right: 10px;color: green;">昨日统计</h3>
</legend>
<ul class="tongji">
<li>
<fieldset class="mj_field">
<legend align="right"><h3 style="padding-left: 10px;padding-right: 10px;color: #22B0FF;">
昨日流水</h3></legend>
<ul class="yesterday">
<li><h3 style="padding-left: 10px;padding-right: 10px;color: #22B0FF;">昨日交易数量: ${ctrlOrderInfo.orderNum}个</h3></li>
<li><h3 style="padding-left: 10px;padding-right: 10px;color: #22B0FF;">昨日交易金额: ${ctrlOrderInfo.sums}元</h3></li>
</ul>
</fieldset>
</li>
<li>
<fieldset class="mj_field">
<legend align="right"><h3 style="padding-left: 10px;padding-right: 10px;color: #22B0FF;">
会员注册</h3></legend>
<ul class="yesterday">
<li><h3 style="padding-left: 10px;padding-right: 10px;color: #22B0FF;">昨日注册会员数: ${ctrlMemberInfo.huiyuan}人</h3></li>
<li><h3 style="padding-left: 10px;padding-right: 10px;color: #22B0FF;">昨日入驻艺术家: ${ctrlMemberInfo.yishu}人</h3></li>
</ul>
</fieldset>
</li>
</ul>
</fieldset>
</div>
</div>
<div id="container2" class="quarter-div orange">
<div class="to_do_list">
<fieldset class="mj_field">
<legend align="right"><h3 style="padding-left: 10px;padding-right: 10px;color: green;">注册</h3></legend>
<div id="zhuce" style="width: 100%;height: 88%;"></div>
</fieldset>
</div>
</div>
<script>
function liushui() {
var dom = document.getElementById("mj_ls");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '折柱混合';
//获取数据 数据类型是数组
var orderNum = []
var sums = [];
var month = [];
$.ajax({
url: '${ctx}/ctrlorderinfo/ctrlOrderInfo/getOrderList',//地址
dataType: 'json',//数据类型
type: 'POST',//类型
timeout: 2000,//超时
//请求成功
success: function (data) {
data.forEach(function (v) {
orderNum.push(v.orderNum);
sums.push(v.sums);
month.push(v.month);
});
var maxSums = eval("Math.max(" + sums.toString() + ")");
var maxOrderNum = eval("Math.max(" + orderNum.toString() + ")");
myChart.hideLoading();
myChart.setOption(option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data: ['数量', '交易额']
},
xAxis: [
{
type: 'category',
data: month,
axisPointer: {
type: 'shadow'
},
//x轴 倾斜显示
axisLabel: {
interval: 0,
rotate: 40
}
}
],
yAxis: [
{
type: 'value',
name: '数量/个',
min: 0,
//y轴最大数
max: maxOrderNum,
//y轴间距
interval: maxOrderNum / 10,
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
name: '交易额/元',
min: 0,
//y轴最大数
max: maxSums,
//y轴间距
interval: maxSums / 10,
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name: '数量',
type: 'bar',
data: orderNum,
itemStyle: { //配置样式，设置每一个柱子的颜色
normal: {
color: '#bcded8',
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 10
}
}
}
}
},
{
name: '交易额',
yAxisIndex: 1,
type: 'bar',
data: sums,
itemStyle: { //配置样式，设置每一个柱子的颜色
normal: {
color: '#dedca1',
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 10
}
}
}
}
}
]
});
console.info(orderNum);
console.info(data);
},
//失败/超时
error: function (XMLHttpRequest, textStatus, errorThrown) {
if (textStatus === 'timeout') {
alert('請求超時');
setTimeout(function () {
alert('从新请求');
}, 2000);
}
alert("error");
}
});
}
function zhuce() {
var dom = document.getElementById("zhuce");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '折柱混合';
var yishu = []
var huiyuan = [];
var month = [];
$.ajax({
url: '${ctx}/ctrlmemberinfo/ctrlMemberInfo/getMemberDate',//地址
dataType: 'json',//数据类型
type: 'POST',//类型
timeout: 2000,//超时
//请求成功
success: function (data) {
data.forEach(function (v) {
yishu.push(v.yishu);
huiyuan.push(v.huiyuan);
month.push(v.month);
});
var maxhuiyuan = eval("Math.max(" + huiyuan.toString() + ")");
myChart.hideLoading();
myChart.setOption(option = {
title: {
// text:'平台注册人数计：263 人',
// link:'http://www.baidu.com',//主标题超连接
target: 'blank',//主标题超连接打开方式
textStyle: { //设置主标题风格
color: '#47d1de',//设置主标题字体颜色
fontStyle: '' //主标题文字风格
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999999'
}
}
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data: ['会员', '艺术家']
},
xAxis: [
{
type: 'category',
data: month,
axisPointer: {
type: 'shadow'
},
axisLabel: {
interval: 0,
rotate: 40
}
}
],
yAxis: [
{
type: 'value',
name: '人数',
min: 0,
max: maxhuiyuan,
interval: maxhuiyuan / 10,
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name: '会员',
type: 'bar',
data: huiyuan,
itemStyle: { //配置样式，设置每一个柱子的颜色
normal: {
color: '#47d1de',
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 10
}
}
}
}
},
{
name: '艺术家',
type: 'bar',
data: yishu,
itemStyle: { //配置样式，设置每一个柱子的颜色
normal: {
color: '#de998d',
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 10
}
}
}
}
}
]
});
},
//失败/超时
error: function (XMLHttpRequest, textStatus, errorThrown) {
if (textStatus === 'timeout') {
alert('請求超時');
setTimeout(function () {
alert('从新请求');
}, 2000);
}
alert("error");
}
});
}
</script>
相关文章
- 1. Echarts后台获取数据
- 2. 从后台获取数据像表格中填充
- 3. vue中使用echarts并从Java后台获取数据
- 4. ECharts 从后台动态获取数据 （asp.net）
- 5. Echarts圆饼图从后台获取数据动态填充
- 6. Ext.grid.Panel 从后台获取数据源和数据格式详解
- 7. layui之数据表格--与后台交互获取数据
- 8. jquery ajax从后台获取数据
- 9. Echarts实时获取后台数据之一：Echarts新手入门
- 10. element ui 表格 处理后台获取的数据
- 更多相关文章...
- • PHP image_type_to_extension - 获取图片后缀 - PHP参考手册
- • jQuery Mobile 表格 - jQuery Mobile 教程
- • Flink 数据传输及反压详解
- • TiDB 在摩拜单车在线数据业务的应用和实践
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安装cuda+cuDNN
- 2. GitHub的使用说明
- 3. phpDocumentor使用教程【安装PHPDocumentor】
- 4. yarn run build报错Component is not found in path “npm/taro-ui/dist/weapp/components/rate/index“
- 5. 精讲Haproxy搭建Web集群
- 6. 安全测试基础之MySQL
- 7. C/C++编程笔记：C语言中的复杂声明分析，用实例带你完全读懂
- 8. Python3教程(1)----搭建Python环境
- 9. 李宏毅机器学习课程笔记2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里云ECS配置速记
欢迎关注本站公众号,获取更多信息
