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. 字節跳動21屆秋招運營兩輪面試經驗分享
- 2. Java 3 年，25K 多嗎？
- 3. mysql安裝部署
- 4. web前端開發中父鏈和子鏈方式實現通信
- 5. 3.1.6 spark體系之分佈式計算-scala編程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在線
- 8. 在線畫圖
- 9. devtools熱部署
- 10. 編譯和鏈接
歡迎關注本站公眾號,獲取更多信息
