From b5de8ee027c4c0f4f8b039c9559b01f5bd54a896 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A3=B7=E5=8F=B6?= <14103883+leaf-phos@user.noreply.gitee.com> Date: Wed, 7 May 2025 18:07:13 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=B4=E6=97=B6=E6=8F=90=E4=BA=A4=EF=BC=8C?= =?UTF-8?q?=E6=9C=AA=E5=AE=8C=E6=88=90=E7=BB=9F=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/StatisticsCard/index.vue | 6 +- src/views/bst/index/AdminIndex.vue | 44 +++-- src/views/bst/index/components/AdminStat.vue | 55 ++---- src/views/bst/index/components/DeviceStat.vue | 10 +- .../bst/index/components/OrderDailyStat.vue | 179 +++++++++++++++--- src/views/bst/index/components/OrderRank.vue | 4 +- 6 files changed, 217 insertions(+), 81 deletions(-) diff --git a/src/components/StatisticsCard/index.vue b/src/components/StatisticsCard/index.vue index 5e63495..f69ef44 100644 --- a/src/components/StatisticsCard/index.vue +++ b/src/components/StatisticsCard/index.vue @@ -23,7 +23,7 @@ + + diff --git a/src/views/bst/index/components/OrderDailyStat.vue b/src/views/bst/index/components/OrderDailyStat.vue index d08b917..c8b1019 100644 --- a/src/views/bst/index/components/OrderDailyStat.vue +++ b/src/views/bst/index/components/OrderDailyStat.vue @@ -104,19 +104,81 @@ export default { const option = { color: [ - '#5B8FF9', // 柔和蓝 - 订单数量 - '#61DDAA', // 柔和绿 - 订单金额 - '#F6BD16', // 柔和黄 - 订单退款 - '#6DC8EC', // 淡青 - 订单实收 - '#9270CA', // 淡紫 - 分成金额 - '#E8684A', // 柔和橙 - 分成退款 - '#FF9D4D' // 柔和橙红 - 分成实收 + { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [{ + offset: 0, color: '#36D1DC' + }, { + offset: 1, color: '#5B86E5' + }] + }, + { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [{ + offset: 0, color: '#FF9966' + }, { + offset: 1, color: '#FF5E62' + }] + }, + { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [{ + offset: 0, color: '#834d9b' + }, { + offset: 1, color: '#d04ed6' + }] + }, + { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [{ + offset: 0, color: '#11998e' + }, { + offset: 1, color: '#38ef7d' + }] + }, + { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [{ + offset: 0, color: '#f46b45' + }, { + offset: 1, color: '#eea849' + }] + }, + { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [{ + offset: 0, color: '#8E2DE2' + }, { + offset: 1, color: '#4A00E0' + }] + }, + { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [{ + offset: 0, color: '#00b4db' + }, { + offset: 1, color: '#0083b0' + }] + } ], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, + backgroundColor: 'rgba(255, 255, 255, 0.9)', + borderColor: '#ccc', + borderWidth: 1, + textStyle: { + color: '#333' + }, formatter: function(params) { let result = params[0].axisValueLabel + '
'; params.forEach(param => { @@ -135,6 +197,9 @@ export default { legend: { data: ['订单数量', '支付金额', '支付退款', '支付实收', '分成金额', '分成退款', '分成实收'], top: 8, + textStyle: { + color: '#666' + }, selected: { '订单数量': true, '支付金额': false, @@ -158,6 +223,12 @@ export default { axisLabel: { interval: 'auto', fontSize: 12, + color: '#666' + }, + axisLine: { + lineStyle: { + color: '#ddd' + } }, boundaryGap: true }, @@ -169,6 +240,17 @@ export default { axisLabel: { formatter: value => { return value.toFixed(2) + ' 元' + }, + color: '#666' + }, + axisLine: { + lineStyle: { + color: '#ddd' + } + }, + splitLine: { + lineStyle: { + color: '#eee' } } }, @@ -177,7 +259,16 @@ export default { name: '订单数量', position: 'right', axisLabel: { - formatter: '{value}' + formatter: '{value}', + color: '#666' + }, + axisLine: { + lineStyle: { + color: '#ddd' + } + }, + splitLine: { + show: false } } ], @@ -188,9 +279,11 @@ export default { yAxisIndex: 1, data: orderCounts, itemStyle: { - opacity: 0.6 + opacity: 0.6, + borderRadius: [4, 4, 0, 0] }, - barWidth: '20%' + barWidth: '30%', + z: 1 }, { name: '支付金额', @@ -199,9 +292,16 @@ export default { data: orderAmounts, smooth: true, symbol: 'circle', - symbolSize: 5, + symbolSize: 6, + areaStyle: { + opacity: 0.1, + shadowColor: 'rgba(0,0,0,0.05)', + shadowBlur: 3 + }, lineStyle: { - width: 2 + width: 3, + shadowColor: 'rgba(0,0,0,0.1)', + shadowBlur: 5 } }, { @@ -211,9 +311,16 @@ export default { data: orderRefunds, smooth: true, symbol: 'circle', - symbolSize: 5, + symbolSize: 6, + areaStyle: { + opacity: 0.1, + shadowColor: 'rgba(0,0,0,0.05)', + shadowBlur: 3 + }, lineStyle: { - width: 2 + width: 3, + shadowColor: 'rgba(0,0,0,0.1)', + shadowBlur: 5 } }, { @@ -223,9 +330,16 @@ export default { data: orderNetAmounts, smooth: true, symbol: 'circle', - symbolSize: 6, + symbolSize: 7, + areaStyle: { + opacity: 0.1, + shadowColor: 'rgba(0,0,0,0.05)', + shadowBlur: 3 + }, lineStyle: { - width: 2 + width: 3, + shadowColor: 'rgba(0,0,0,0.1)', + shadowBlur: 5 } }, { @@ -235,9 +349,16 @@ export default { data: bonusAmounts, smooth: true, symbol: 'circle', - symbolSize: 5, + symbolSize: 6, + areaStyle: { + opacity: 0.1, + shadowColor: 'rgba(0,0,0,0.05)', + shadowBlur: 3 + }, lineStyle: { - width: 2 + width: 3, + shadowColor: 'rgba(0,0,0,0.1)', + shadowBlur: 5 } }, { @@ -247,9 +368,16 @@ export default { data: bonusRefunds, smooth: true, symbol: 'circle', - symbolSize: 5, + symbolSize: 6, + areaStyle: { + opacity: 0.1, + shadowColor: 'rgba(0,0,0,0.05)', + shadowBlur: 3 + }, lineStyle: { - width: 2 + width: 3, + shadowColor: 'rgba(0,0,0,0.1)', + shadowBlur: 5 } }, { @@ -259,9 +387,16 @@ export default { data: bonusNetAmounts, smooth: true, symbol: 'circle', - symbolSize: 6, + symbolSize: 7, + areaStyle: { + opacity: 0.1, + shadowColor: 'rgba(0,0,0,0.05)', + shadowBlur: 3 + }, lineStyle: { - width: 2 + width: 3, + shadowColor: 'rgba(0,0,0,0.1)', + shadowBlur: 5 } } ] diff --git a/src/views/bst/index/components/OrderRank.vue b/src/views/bst/index/components/OrderRank.vue index e6a46ca..ca83a5b 100644 --- a/src/views/bst/index/components/OrderRank.vue +++ b/src/views/bst/index/components/OrderRank.vue @@ -29,7 +29,7 @@ - + @@ -45,9 +45,9 @@