436 lines
16 KiB
HTML
436 lines
16 KiB
HTML
{include file="Public:header2"/}
|
||
<script src="https://image.zfunbox.cn/echarts-5.6.0/dist/echarts.js"></script>
|
||
<style>
|
||
.s-row {
|
||
margin-top: 5px;
|
||
margin-bottom: 5px;
|
||
}
|
||
</style>
|
||
|
||
<body>
|
||
<!-- 表格容器移到上面 -->
|
||
<div class="layui-fluid">
|
||
<div class="layui-card">
|
||
<div class="layui-card-body">
|
||
<table id="dataTable" lay-filter="dataTable"></table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 统计图表移到下面 -->
|
||
<div class="layui-fluid">
|
||
<div class="layui-card">
|
||
<div class="layui-row">
|
||
<div class="layui-col-xs6">
|
||
<div class="layui-card">
|
||
<div class="layui-card-body" style="padding: 0px;">
|
||
<div class="layui-row">
|
||
<div id="main" style="width: 100%;height:350px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs6">
|
||
<div class="layui-card">
|
||
<div class="layui-card-body" style="padding: 0px;">
|
||
<div class="layui-row">
|
||
<div id="chongzhi" style="width: 100%;height:350px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs6">
|
||
<div class="layui-card">
|
||
<div class="layui-card-body" style="padding: 0px;">
|
||
<div class="layui-row">
|
||
<div id="lirun" style="width: 100%;height:350px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs6">
|
||
<div class="layui-card">
|
||
<div class="layui-card-body" style="padding: 0px;">
|
||
<div class="layui-row">
|
||
<div id="qita" style="width: 100%;height:350px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{include file="Public:footer"/}
|
||
<script type="text/javascript">
|
||
// 通用图表初始化方法
|
||
function initChart(divId, option) {
|
||
var chart = echarts.init(document.getElementById(divId));
|
||
chart.setOption(option);
|
||
return chart;
|
||
}
|
||
|
||
// 假设这是你的 JSON 数据
|
||
// var jsonData = { $list| json_encode | raw};
|
||
|
||
// 将 JSON 数据转换为以日期为键的对象，方便快速查找
|
||
var dataMap = {};
|
||
// jsonData.forEach(function (item) {
|
||
// var date = item.record_date; // 提取日期
|
||
// dataMap[date] = {
|
||
// login: item.login_count,
|
||
// register: item.register_count,
|
||
// consume: item.consume_user_count,
|
||
// consume_rmb_count: item.consume_rmb_count,
|
||
// recharge_amount: item.recharge_amount,
|
||
// balance_consume: item.balance_consume,
|
||
// recharge_sum: item.recharge_sum,
|
||
// shipment_money: item.shipment_money,
|
||
// send_money: item.send_money,
|
||
// recycle_money: item.recycle_money,
|
||
// profit_money: item.profit_money,
|
||
// all_shipment_money: item.all_shipment_money,
|
||
// all_recycle_money: item.all_recycle_money,
|
||
// all_money: item.all_money,
|
||
|
||
// };
|
||
// });
|
||
|
||
// 生成从 2025-03-01 到当前日期的所有日期
|
||
function generateDateRange(startDate, endDate) {
|
||
var dates = [];
|
||
var currentDate = new Date(startDate);
|
||
var endDateObj = new Date(endDate);
|
||
while (currentDate <= endDateObj) {
|
||
dates.push(currentDate.toISOString().split('T')[0]); // 格式化为 YYYY-MM-DD
|
||
currentDate.setDate(currentDate.getDate() + 1); // 增加一天
|
||
}
|
||
return dates;
|
||
}
|
||
|
||
var startDate = '2025-03-01';
|
||
var endDate = new Date().toISOString().split('T')[0]; // 当前日期
|
||
var dateRange = generateDateRange(startDate, endDate);
|
||
|
||
// 填充数据
|
||
var loginData = [];
|
||
var registerData = [];
|
||
var consumeData = [];
|
||
var consume_rmb_count = [];
|
||
//充值金额
|
||
var recharge_amount = [];
|
||
//余额消费
|
||
var balance_consume = [];
|
||
var recharge_sum = [];
|
||
|
||
var shipment_money = [];
|
||
var send_money = [];
|
||
var recycle_money = [];
|
||
var profit_money = [];
|
||
var all_shipment_money = [];
|
||
var all_recycle_money = [];
|
||
var all_money = [];
|
||
$(function () {
|
||
$.ajax({
|
||
url: '/admin/statistics_dailyStatistics',
|
||
type: 'GET',
|
||
success: function (res) {
|
||
console.log(res);
|
||
var recharge_amount = [];
|
||
var recharge_d = [];
|
||
res.data.forEach(function (item) {
|
||
// {
|
||
// "day": "2025-04-29",
|
||
// "order_count": 615,
|
||
// "user_count": 1,
|
||
// "price": 0,
|
||
// "use_money": 70495,
|
||
// "use_integral": 50,
|
||
// "use_money2": 222450,
|
||
// "user_login": 6,
|
||
// "user_register": 0,
|
||
// "amount_paid": 0
|
||
// }
|
||
loginData.push([item.day, item.user_login]);
|
||
registerData.push([item.day, item.user_register]);
|
||
recharge_amount.push([item.day, item.price]);
|
||
recharge_d.push([item.day, item.use_money]);
|
||
});
|
||
console.log(loginData);
|
||
console.log(registerData);
|
||
initUserOption();
|
||
initChongzhiOption(recharge_amount, recharge_d);
|
||
initDataTable(res.data); // 初始化表格
|
||
}
|
||
})
|
||
})
|
||
|
||
// 生成时间序列数据
|
||
function generateTimeSeriesData(startDate, count, interval) {
|
||
var data = [];
|
||
var currentDate = new Date(startDate);
|
||
for (var i = 0; i < count; i++) {
|
||
data.push([
|
||
currentDate.toISOString().split('T')[0], // 格式化为 YYYY-MM-DD
|
||
Math.floor(Math.random() * 500) // 随机生成一个值
|
||
]);
|
||
currentDate.setDate(currentDate.getDate() + interval); // 按间隔增加天数
|
||
}
|
||
return data;
|
||
}
|
||
|
||
function initUserOption() {
|
||
var option = {
|
||
title: {
|
||
text: '用户数据'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ['登录', '注册']
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '15%', // 为 dataZoom 留出空间
|
||
containLabel: true
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'time', // 设置为时间轴
|
||
boundaryGap: false,
|
||
axisLabel: {
|
||
formatter: '{MM}-{dd}' // 自定义时间显示格式
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
dataZoom: [ // 添加 dataZoom 组件
|
||
{
|
||
type: 'slider', // 滑动条型 dataZoom
|
||
xAxisIndex: 0, // 控制 x 轴
|
||
start: 50, // 默认起始位置（0%）
|
||
end: 100 // 默认结束位置（50%）
|
||
},
|
||
{
|
||
type: 'inside', // 内置型 dataZoom，支持鼠标滚轮缩放
|
||
xAxisIndex: 0
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '登录',
|
||
type: 'line',
|
||
|
||
data: loginData // 使用生成的时间序列数据
|
||
},
|
||
{
|
||
name: '注册',
|
||
type: 'line',
|
||
|
||
data: registerData // 使用生成的时间序列数据
|
||
},
|
||
// {
|
||
// name: '消费人数',
|
||
// type: 'line',
|
||
|
||
// data: consumeData // 使用生成的时间序列数据
|
||
// },
|
||
// {
|
||
// name: '微信充值人数',
|
||
// type: 'line',
|
||
// stack: 'Total',
|
||
// data: consume_rmb_count // 使用生成的时间序列数据
|
||
// }
|
||
]
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表
|
||
var myChart = initChart('main', option);
|
||
}
|
||
// 指定图表的配置项和数据
|
||
|
||
function initChongzhiOption(recharge_amount, recharge_d) {
|
||
// 指定图表的配置项和数据
|
||
var option1 = {
|
||
title: {
|
||
text: '订单支付数据'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ['RMB支付', '钻石支付']
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '15%', // 为 dataZoom 留出空间
|
||
containLabel: true
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'time', // 设置为时间轴
|
||
boundaryGap: false,
|
||
axisLabel: {
|
||
formatter: '{MM}-{dd}' // 自定义时间显示格式
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
dataZoom: [ // 添加 dataZoom 组件
|
||
{
|
||
type: 'slider', // 滑动条型 dataZoom
|
||
xAxisIndex: 0, // 控制 x 轴
|
||
start: 50, // 默认起始位置（0%）
|
||
end: 100 // 默认结束位置（50%）
|
||
},
|
||
{
|
||
type: 'inside', // 内置型 dataZoom，支持鼠标滚轮缩放
|
||
xAxisIndex: 0
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: 'RMB支付',
|
||
type: 'line',
|
||
|
||
data: recharge_amount // 使用生成的时间序列数据
|
||
},
|
||
{
|
||
name: '钻石支付',
|
||
type: 'line',
|
||
|
||
data: recharge_d // 使用生成的时间序列数据
|
||
}
|
||
]
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表
|
||
var chongzhi = initChart('chongzhi', option1);
|
||
}
|
||
|
||
function initLirunOption() {
|
||
// 指定图表的配置项和数据
|
||
var option3 = {
|
||
title: {
|
||
text: '其他数据'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ['出货价值', '发货价值', '回收价值']
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '15%', // 为 dataZoom 留出空间
|
||
containLabel: true
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'time', // 设置为时间轴
|
||
boundaryGap: false,
|
||
axisLabel: {
|
||
formatter: '{MM}-{dd}' // 自定义时间显示格式
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
dataZoom: [ // 添加 dataZoom 组件
|
||
{
|
||
type: 'slider', // 滑动条型 dataZoom
|
||
xAxisIndex: 0, // 控制 x 轴
|
||
start: 50, // 默认起始位置（0%）
|
||
end: 100 // 默认结束位置（50%）
|
||
},
|
||
{
|
||
type: 'inside', // 内置型 dataZoom，支持鼠标滚轮缩放
|
||
xAxisIndex: 0
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '出货价值',
|
||
type: 'line',
|
||
|
||
data: shipment_money // 使用生成的时间序列数据
|
||
},
|
||
{
|
||
name: '发货价值',
|
||
type: 'line',
|
||
|
||
data: send_money // 使用生成的时间序列数据
|
||
},
|
||
{
|
||
name: '回收价值',
|
||
type: 'line',
|
||
|
||
data: recycle_money // 使用生成的时间序列数据
|
||
}
|
||
]
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表
|
||
var qita = initChart('qita', option3);
|
||
}
|
||
|
||
// 初始化数据表格
|
||
function initDataTable(data) {
|
||
data = data.reverse();
|
||
layui.use('table', function () {
|
||
var table = layui.table;
|
||
|
||
// 表格初始化
|
||
table.render({
|
||
elem: '#dataTable',
|
||
data: data,
|
||
title: '统计数据',
|
||
cols: [[
|
||
{ field: 'day', title: '日期', width: 180, sort: true, rowspan: 3 },
|
||
{ title: '用户信息', colspan: 2 },
|
||
{ title: '订单信息', colspan: 6 },
|
||
{ title: '钻石商城', colspan: 2 }
|
||
], [
|
||
{ field: 'user_register', title: '注册人数', width: 120 },
|
||
{ field: 'user_login', title: '登录人数', width: 120 },
|
||
{ field: 'order_count', title: '订单数量', width: 120 },
|
||
{ field: 'user_count', title: '用户数量', width: 120 },
|
||
{ field: 'price', title: 'RMB支付', width: 120 },
|
||
{ field: 'use_money', title: '钻石支付', width: 120 },
|
||
{ field: 'use_integral', title: 'UU币支付', width: 120 },
|
||
{ field: 'use_money2', title: '哒哒券支付', width: 120 },
|
||
{ field: 'amount_paid', title: '支付总额', width: 120 }
|
||
]],
|
||
page: true, // 开启分页
|
||
limit: 50, // 每页显示的条数
|
||
limits: [50, 100, 200], // 每页条数的选择项
|
||
height: 'full-200', // 表格高度
|
||
text: {
|
||
none: '暂无相关数据'
|
||
},
|
||
defaultSort: {
|
||
field: 'day',
|
||
type: 'desc'
|
||
}
|
||
});
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |