472 lines
16 KiB
HTML
Executable File
472 lines
16 KiB
HTML
Executable File
{include file="Public:header2"/}
|
||
<script src="https://mh.shhuanmeng.com/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-row">
|
||
<div class="layui-col-xs6">
|
||
<div class="layui-card">
|
||
|
||
<div class="layui-card-body" style="padding: 0px;">
|
||
<div class="layui-row">
|
||
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
||
<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">
|
||
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
||
<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">
|
||
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
||
<div id="lirun" style="width: 100%;height:350px;"></div>
|
||
</div>
|
||
<div>
|
||
备注：总收入=订单支付+其他收入；<br />
|
||
备注：总支出=订单出货+其他支出；<br />
|
||
备注：利润=总收入-总支出；<br />
|
||
</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">
|
||
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
||
<div id="qita" style="width: 100%;height:350px;"></div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{include file="Public:footer"/}
|
||
<script type="text/javascript">
|
||
|
||
// 假设这是你的 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 = [];
|
||
dateRange.forEach(function (date) {
|
||
var data = dataMap[date] || {
|
||
login: 0, register: 0, consume: 0, consume_rmb_count: 0,
|
||
recharge_amount: 0,
|
||
balance_consume: 0,
|
||
recharge_sum: 0,
|
||
shipment_money: 0,
|
||
send_money: 0,
|
||
recycle_money: 0,
|
||
profit_money: 0,
|
||
all_shipment_money: 0,
|
||
all_recycle_money: 0,
|
||
all_money: 0
|
||
}; // 如果数据不存在，则默认为 0
|
||
loginData.push([date, data.login]);
|
||
registerData.push([date, data.register]);
|
||
consumeData.push([date, data.consume]);
|
||
consume_rmb_count.push([date, data.consume_rmb_count]);
|
||
recharge_amount.push([date, data.recharge_amount]);
|
||
balance_consume.push([date, data.balance_consume]);
|
||
recharge_sum.push([date, data.recharge_sum]);
|
||
|
||
shipment_money.push([date, data.shipment_money]);
|
||
send_money.push([date, data.send_money]);
|
||
recycle_money.push([date, data.recycle_money]);
|
||
profit_money.push([date, data.profit_money]);
|
||
|
||
all_shipment_money.push([date, data.all_shipment_money]);
|
||
all_recycle_money.push([date, data.all_recycle_money]);
|
||
all_money.push([date, data.all_money]);
|
||
|
||
|
||
});
|
||
|
||
// 输出结果
|
||
console.log('登录人数数据:', loginData);
|
||
console.log('注册人数数据:', registerData);
|
||
console.log('充值人数数据:', consumeData);
|
||
|
||
// 生成时间序列数据
|
||
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;
|
||
}
|
||
|
||
|
||
// 指定图表的配置项和数据
|
||
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 = echarts.init(document.getElementById('main'));
|
||
myChart.setOption(option);
|
||
|
||
// 指定图表的配置项和数据
|
||
var option1 = {
|
||
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: recharge_sum // 使用生成的时间序列数据
|
||
},
|
||
{
|
||
name: '微信充值',
|
||
type: 'line',
|
||
|
||
data: recharge_amount // 使用生成的时间序列数据
|
||
},
|
||
{
|
||
name: '余额充值',
|
||
type: 'line',
|
||
|
||
data: balance_consume // 使用生成的时间序列数据
|
||
}
|
||
]
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表
|
||
var chongzhi = echarts.init(document.getElementById('chongzhi'));
|
||
chongzhi.setOption(option1);
|
||
|
||
// 指定图表的配置项和数据
|
||
var option2 = {
|
||
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: all_money // 使用生成的时间序列数据
|
||
},
|
||
{
|
||
name: '总收入',
|
||
type: 'line',
|
||
|
||
data: all_recycle_money // 使用生成的时间序列数据
|
||
},
|
||
{
|
||
name: '总支出',
|
||
type: 'line',
|
||
|
||
data: all_shipment_money // 使用生成的时间序列数据
|
||
}
|
||
]
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表
|
||
var lirun = echarts.init(document.getElementById('lirun'));
|
||
lirun.setOption(option2);
|
||
|
||
// 指定图表的配置项和数据
|
||
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 = echarts.init(document.getElementById('qita'));
|
||
qita.setOption(option3);
|
||
</script>
|
||
</body>
|
||
|
||
</html> |