From b06ef0c312bd25c2e9f054d836695dea6f4b04b4 Mon Sep 17 00:00:00 2001
From: "Ray.Hao" <1490493387@qq.com>
Date: Tue, 17 Dec 2024 00:36:42 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20:recycle:=20=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index/index.vue | 53 ++++++++++++++++++++-------------------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index df4658d..4b5d5cd 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -83,19 +83,7 @@
       </template>
 
       <view class="charts-box">
-        <qiun-data-charts
-          type="line"
-          :chartData="chartData"
-          :opts="{
-            xAxis: {
-              rotateLabel: true, // 启用标签旋转
-              rotateAngle: -45, // 设置旋转角度
-            },
-            yAxis: {
-              disabled: true,
-            },
-          }"
-        />
+        <qiun-data-charts type="area" :chartData="chartData" :opts="chartOpts" />
       </view>
     </wd-card>
   </view>
@@ -106,15 +94,6 @@ import { dayjs } from "wot-design-uni";
 
 import LogAPI, { VisitStatsVO } from "@/api/system/log";
 
-interface VisitStats {
-  type: string;
-  title: string;
-  icon: string;
-  growthRate: number;
-  granularity: string;
-  todayCount: number;
-}
-
 const current = ref<number>(0);
 
 const visitStatsData = ref<VisitStatsVO>({
@@ -129,6 +108,28 @@ const visitStatsData = ref<VisitStatsVO>({
 // 图表数据
 const chartData = ref({});
 
+const chartOpts = ref({
+  padding: [20, 0, 20, 0],
+  xAxis: {
+    fontSize: 10,
+    rotateLabel: true,
+    rotateAngle: 30,
+  },
+  yAxis: {
+    disabled: true,
+  },
+  extra: {
+    area: {
+      type: "curve",
+      opacity: 0.2,
+      addLine: true,
+      width: 2,
+      gradient: true,
+      activeType: "hollow",
+    },
+  },
+});
+
 // 日期范围
 const recentDaysRange = ref(7);
 
@@ -192,12 +193,12 @@ const loadVisitTrendData = () => {
       categories: data.dates,
       series: [
         {
-          name: "浏览量(PV)",
-          data: data.pvList,
+          name: "访客数(UV)",
+          data: data.ipList,
         },
         {
-          name: "IP",
-          data: data.ipList,
+          name: "浏览量(PV)",
+          data: data.pvList,
         },
       ],
     };