From 292ee989196ec5ab4351cdbb6f3ef6ccf45dba31 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期五, 26 九月 2025 11:38:39 +0800
Subject: [PATCH] 订单页面统计图
---
manager/src/views/statistics/order.vue | 250 ++++++++++++++++++++++++++++++++++++++++++++-----
manager/src/api/orderStatistics.jsx | 8 +
2 files changed, 229 insertions(+), 29 deletions(-)
diff --git a/manager/src/api/orderStatistics.jsx b/manager/src/api/orderStatistics.jsx
index 9be17b4..3a77ad5 100644
--- a/manager/src/api/orderStatistics.jsx
+++ b/manager/src/api/orderStatistics.jsx
@@ -21,3 +21,11 @@
params: param
})
}
+
+export const getOrderTimePeriod = (param) =>{
+ return service({
+ url:"/lmk/statistics/orderTimePeriod",
+ method: "GET",
+ params: param
+ })
+}
diff --git a/manager/src/views/statistics/order.vue b/manager/src/views/statistics/order.vue
index 17fb7a6..9433b56 100644
--- a/manager/src/views/statistics/order.vue
+++ b/manager/src/views/statistics/order.vue
@@ -74,6 +74,19 @@
</Card>
<Card class="card">
+ <div class="my-chart-container">
+ <div class="chart-wrapper">
+ <div class="chart-header">
+ <h2>娴忚鏁版嵁/璁㈠崟鏃堕棿娈� 瓒嬪娍鍥�</h2>
+ </div>
+ <div ref="orderTimePeriodChartDom" class="chart-container"></div>
+ </div>
+ </div>
+
+ </Card>
+
+
+ <Card class="card">
<div>
<h4>浜ゆ槗姒傚喌</h4>
<div class="flex">
@@ -271,7 +284,7 @@
import refundRow from "./order/refundOrder";
import affixTime from "@/components/affix-time";
import * as echarts from 'echarts';
-import {pvUvData,getOrderCount,getViewAndCompletionRateCount} from "../../api/orderStatistics";
+import {pvUvData,getOrderCount,getViewAndCompletionRateCount,getOrderTimePeriod} from "../../api/orderStatistics";
export default {
components: { orderRow, refundRow, affixTime },
@@ -282,6 +295,8 @@
chart: null, //pvuv
orderCountChart:null, //璁㈠崟鏃ヨ秼鍔�
viewPrintChart:null,
+ orderTimePeriodChart:null,
+
currentType:"goods",
currentLimit:10,
// 缁熻鏁版嵁
@@ -606,24 +621,40 @@
const dates = [];
const today = new Date();
let days = 1;
+ console.log(param.year)
+ console.log(param.month)
+ if(param.year !== null && param.year !== undefined && param.month !== null && param.month !== undefined && param.month !=='' ){
+ // 褰撲紶鍏ュ勾浠藉拰鏈堜唤鏃讹紝鐢熸垚璇ユ湀浠界殑鎵�鏈夋棩鏈�
+ const year = parseInt(param.year);
+ const month = parseInt(param.month);
+ // 鑾峰彇璇ユ湀鐨勫ぉ鏁�
+ const daysInMonth = new Date(year, month, 0).getDate();
- // 纭畾澶╂暟閫昏緫涓嶅彉
- if (param.searchType === "TODAY") {
- days = 1;
- } else if (param.searchType === "YESTERDAY") {
- days = 1;
- } else if (param.searchType === "LAST_SEVEN") {
- days = 7;
- } else if (param.searchType === "LAST_THIRTY") {
- days = 30;
+ // 鐢熸垚璇ユ湀鎵�鏈夋棩鏈�
+ for (let day = 1; day <= daysInMonth; day++) {
+ const date = new Date(year, month - 1, day); // 鏈堜唤浠�0寮�濮嬶紝鎵�浠ヨ鍑�1
+ dates.push(this.formatDate(date, 'MM-dd'));
+ }
+
+ }else{
+ // 纭畾澶╂暟閫昏緫涓嶅彉
+ if (param.searchType === "TODAY") {
+ days = 1;
+ } else if (param.searchType === "YESTERDAY") {
+ days = 1;
+ } else if (param.searchType === "LAST_SEVEN") {
+ days = 7;
+ } else if (param.searchType === "LAST_THIRTY") {
+ days = 30;
+ }
+ for (let i = days - 1; i >= 0; i--) {
+ const date = new Date(today);
+ date.setDate(today.getDate() - i);
+ dates.push(this.formatDate(date, 'MM-dd'));
+ }
}
-
// 鐢熸垚鏃ユ湡鏁扮粍閫昏緫涓嶅彉
- for (let i = days - 1; i >= 0; i--) {
- const date = new Date(today);
- date.setDate(today.getDate() - i);
- dates.push(this.formatDate(date, 'MM-dd'));
- }
+
return dates;
},
@@ -638,20 +669,29 @@
if (this.orderCountChart){
this.orderCountChart.resize()
}
+ if (this.orderTimePeriodChart){
+ this.orderTimePeriodChart.resize();
+ }
},
initChart(){
this.chart = echarts.init(this.$refs.chartDom)
this.viewPrintChart = echarts.init(this.$refs.viewPrintChartDom)
this.orderCountChart = echarts.init(this.$refs.orderCountChartDom)
+ this.orderTimePeriodChart = echarts.init(this.$refs.orderTimePeriodChartDom)
this.updateChartData(this.orderParams)
this.updateOrderCountChartDate(this.orderParams)
let form = {...this.orderParams};
+ console.log(this.currentType)
+ console.log(this.currentLimit)
form.currentType = this.currentType;
form.currentLimit = this.currentLimit;
+ console.log(form)
this.updateViewAndCompletionRateData(form)
+
+ this.updateOrderTimePeriodData(this.orderParams)
},
// 鏇存柊鍥捐〃鏁版嵁
async updateChartData(param) {
@@ -660,7 +700,7 @@
// 璁剧疆鍥捐〃閰嶇疆
this.chart.setOption(this.getChartOption(this.getDates(param), pvData, uvData))
},
-// 鑾峰彇鍥捐〃閰嶇疆椤�
+ // 鑾峰彇鍥捐〃閰嶇疆椤�
// 鍥捐〃閰嶇疆椤癸紙鎭㈠鍘熷棰滆壊锛�
getChartOption(dates, pvData, uvData) {
return {
@@ -791,7 +831,7 @@
animationEasing: 'cubicOut'
};
},
-// 鐢熸垚pv/uv鍥捐〃鏁版嵁
+ // 鐢熸垚pv/uv鍥捐〃鏁版嵁
async generateChartData(param) {
// 1. 澹版槑涓篴sync鍑芥暟
// 2. 浣跨敤await绛夊緟鎺ュ彛杩斿洖锛岀‘淇濇暟鎹幏鍙栧悗鍐嶇户缁�
@@ -916,23 +956,23 @@
},
//-------------
-//-------------娴忚閲忥紝瀹屾挱鐜囷紝
+ //-------------娴忚閲忥紝瀹屾挱鐜囷紝
handleLimitChange(limit) {
if (this.currentLimit !== limit) {
this.currentLimit = limit
- let from = {...this.orderParams}
- from.currentLimit = this.currentLimit;
- from.currentType = this.currentType;
- this.updateViewAndCompletionRateData(from) // 閲嶆柊鍔犺浇鏁版嵁
+ let form = {...this.orderParams}
+ form.currentLimit = this.currentLimit;
+ form.currentType = this.currentType;
+ this.updateViewAndCompletionRateData(form) // 閲嶆柊鍔犺浇鏁版嵁
}
},
handleTypeChange(type) {
if (this.currentType !== type){// 閬垮厤閲嶅鐐瑰嚮
this.currentType = type // 鏇存柊褰撳墠绫诲瀷
- let from = {...this.orderParams}
- from.currentLimit = this.currentLimit;
- from.currentType = this.currentType;
- this.updateViewAndCompletionRateData(from) // 閲嶆柊鍔犺浇鏁版嵁
+ let form = {...this.orderParams}
+ form.currentLimit = this.currentLimit;
+ form.currentType = this.currentType;
+ this.updateViewAndCompletionRateData(form) // 閲嶆柊鍔犺浇鏁版嵁
}
},
@@ -1050,9 +1090,159 @@
]
};
},
-
-
//-------------
+ //-------------娴忚鏁版嵁锛屼笅璁㈠崟鏃ユ湡鏃堕棿娈靛垎鏋�
+ async updateOrderTimePeriodData(param){
+ const { viewData,countData,dateData} = await this.generateOrderTimePeriodChartData(param);
+ this.orderTimePeriodChart.setOption(this.getOrderTimePeriodChartOption(viewData,countData,dateData));
+ },
+ async generateOrderTimePeriodChartData(param){
+ let viewData= [];
+ let countData =[];
+ let dateData = [];
+ try {
+ const res = await getOrderTimePeriod(param); // 绛夊緟鎺ュ彛鍝嶅簲
+ if (res.code === 200) {
+ viewData = res.data.viewData;
+ countData = res.data.countData
+ dateData = res.data.dateData;
+ }
+ } catch (error) {
+ console.error("鎺ュ彛璋冪敤澶辫触", error);
+
+ }
+ return { viewData,countData,dateData}
+
+ },
+ getOrderTimePeriodChartOption(viewData,countData,dateData){
+ return {
+ tooltip: {
+ trigger: 'axis',
+ backgroundColor: 'rgba(255, 255, 255, 0.9)',
+ borderColor: '#eee',
+ borderWidth: 1,
+ textStyle: { color: '#333' },
+ formatter: (params) => {
+ const date = params[0].name;
+ const view = params.find(item => item.seriesName === '娴忚鏁版嵁')?.value || 0;
+ const count= params.find(item => item.seriesName === '璁㈠崟鏃堕棿娈�')?.value || 0;
+ // 浼樺寲锛氭坊鍔犳崲琛岀杞箟锛岄伩鍏嶆綔鍦ㄦ牸寮忛棶棰橈紙鍙�夛紝涓嶅奖鍝嶅姛鑳斤級
+ return `<div class="font-medium">${date}</div>
+ <div>娴忚鏁版嵁: <span style="color: #165DFF; font-weight: bold">${view.toLocaleString()}</span></div>
+ <div>璁㈠崟鏃堕棿娈�: <span style="color: #00b42a; font-weight: bold">${count.toLocaleString()}</span></div>`;
+ },
+ },
+ legend: {
+ data: ['娴忚鏁版嵁', '璁㈠崟鏃堕棿娈�'],
+ top: 0,
+ textStyle: { color: '#666' }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true,
+ top: '15%'
+ },
+ xAxis: {
+ type: 'category',
+ data: dateData,
+ axisLine: { lineStyle: { color: '#eee' } },
+ axisTick: { show: false },
+ axisLabel: { interval: 'auto', rotate: 0, color: '#86909C' },
+ splitLine: { show: false }
+ },
+ yAxis: {
+ type: 'value',
+ axisLine: { show: false },
+ axisTick: { show: false },
+ axisLabel: { color: '#86909C', formatter: '{value}' },
+ splitLine: { lineStyle: { color: '#f2f3f5' } },
+ min: 0
+ },
+ series: [
+ // PV鎶樼嚎锛堜繚鐣欏師濮嬭摑鑹茬郴锛屼紭鍖栫偣绾胯鎺ワ級
+ {
+ name: '娴忚鏁版嵁',
+ type: 'line',
+ data: viewData,
+ symbol: 'circle',
+ symbolSize: 6, // 淇濈暀鍘熸湁鐐瑰ぇ灏�
+ emphasis: {
+ symbolSize: 8,
+ showSymbol: true
+ },
+ lineStyle: {
+ width: 3, // 淇濈暀鍘熸湁绾垮
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+ { offset: 0, color: '#165DFF' }, // 鍘熷PV涓昏壊
+ { offset: 1, color: '#36CFC9' } // 鍘熷娓愬彉杈呭姪鑹�
+ ]),
+ // 鍏抽敭浼樺寲1锛氱嚎鏉＄鐐硅涓哄渾瑙掞紝閬垮厤鈥滃垏鍙ｂ�濈┖鐧�
+ cap: 'round',
+ // 鍏抽敭浼樺寲2锛氱嚎鏉℃嫄瑙掕涓哄渾瑙掞紝閬垮厤琛旀帴闂撮殭
+ join: 'round',
+ // 杈呭姪锛氭帶鍒舵嫄瑙掑渾瑙掑ぇ灏忥紙涓庣嚎瀹藉尮閰嶏紝閬垮厤婧㈠嚭锛�
+ miterLimit: 3
+ },
+ itemStyle: {
+ color: '#165DFF', // 鍘熷鐐归鑹�
+ borderColor: '#fff', // 淇濈暀鐧借壊杈规锛堝寮哄眰娆℃劅锛�
+ // 鍏抽敭浼樺寲3锛氬噺灏忚竟妗嗗搴︼紝閬垮厤閬尅绾挎潯瀵艰嚧鏂眰
+ borderWidth: 0 // 浠�2璋冩暣涓�1.5
+ },
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: 'rgba(22, 93, 255, 0.2)' }, // 鍘熷濉厖鑹�
+ { offset: 1, color: 'rgba(22, 93, 255, 0)' }
+ ])
+ },
+ smooth: true,
+ showSymbol: true, // 淇濈暀浣犺缃殑鈥滈粯璁ゆ樉绀烘墍鏈夌偣鈥�
+ },
+ // UV鎶樼嚎锛堜繚鐣欏師濮嬬豢鑹茬郴锛屽悓PV浼樺寲閫昏緫锛�
+ {
+ name: '璁㈠崟鏃堕棿娈�',
+ type: 'line',
+ data: countData,
+ symbol: 'circle',
+ symbolSize: 6, // 淇濈暀鍘熸湁鐐瑰ぇ灏�
+ emphasis: {
+ symbolSize: 8,
+ showSymbol: true
+ },
+ lineStyle: {
+ width: 3, // 淇濈暀鍘熸湁绾垮
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+ { offset: 0, color: '#00b42a' }, // 鍘熷UV涓昏壊
+ { offset: 1, color: '#72c140' } // 鍘熷娓愬彉杈呭姪鑹�
+ ]),
+ // 鍚孭V浼樺寲锛氱鐐瑰渾瑙�+鎷愯鍦嗚
+ cap: 'round',
+ join: 'round',
+ miterLimit: 3
+ },
+ itemStyle: {
+ color: '#00b42a', // 鍘熷鐐归鑹�
+ borderColor: '#fff', // 淇濈暀鐧借壊杈规
+ // 鍚孭V浼樺寲锛氬噺灏忚竟妗嗗搴�
+ borderWidth: 0 // 浠�2璋冩暣涓�1.5
+ },
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: 'rgba(0, 180, 42, 0.2)' }, // 鍘熷濉厖鑹�
+ { offset: 1, color: 'rgba(0, 180, 42, 0)' }
+ ])
+ },
+ smooth: true,
+ showSymbol: true, // 淇濈暀鈥滈粯璁ゆ樉绀烘墍鏈夌偣鈥�
+ }
+ ],
+ animation: true,
+ animationDuration: 1500,
+ animationEasing: 'cubicOut'
+ };
+ },
formatDate(date) {
const month = date.getMonth() + 1; // 鏈堜唤浠�0寮�濮嬶紝闇�+1
@@ -1127,6 +1317,8 @@
form.currentType = this.currentType;
form.currentLimit = this.currentLimit;
this.updateViewAndCompletionRateData(form)
+
+ this.updateOrderTimePeriodData(this.orderParams)
},
// 瀹炰緥鍖栬鍗曟瑙�
--
Gitblit v1.8.0