perf:首页访问统计图优化

Yi.BBS.Vue3/src/components/echars/VisitsLineChart.vue

@@ -1,51 +0,0 @@
-<template>
-  <div ref="VisitsLineChart"></div>
-</template>
-<script setup>
-import * as echarts from "echarts/core";
-import { GridComponent } from "echarts/components";
-import { LineChart } from "echarts/charts";
-import { UniversalTransition } from "echarts/features";
-import { CanvasRenderer } from "echarts/renderers";
-import { ref, onMounted } from "vue";
-import { getWeek } from "@/apis/accessApi.js";
-echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
-
-const VisitsLineChart = ref(null);
-
-onMounted(async () => {
-  var myChart = echarts.init(VisitsLineChart.value, null, {
-    width: 320,
-    height: 230,
-  });
-  var option;
-
-  const response = await getWeek();
-
-  var numberData = response.data.map((x) => x.number);
-
-  option = {
-    xAxis: {
-      type: "category",
-      boundaryGap: false,
-      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
-    },
-    yAxis: {
-      type: "value",
-    },
-    series: [
-      {
-        data: numberData,
-        type: "line",
-        areaStyle: {},
-      },
-    ],
-  };
-
-  option && myChart.setOption(option);
-
-  window.addEventListener("resize", function () {
-    myChart.resize();
-  });
-});
-</script>

Yi.BBS.Vue3/src/router/index.js

@@ -41,7 +41,7 @@ const router = createRouter({
         {
           name: "index",
           path: "/index",
-          component: () => import("../views/Index.vue"),
+          component: () => import("../views/home/Index.vue"),
         },
         {
           name: "article",

Yi.BBS.Vue3/src/views/home/Index.vue

@@ -54,7 +54,7 @@
           <el-col :span="24">
             <InfoCard header="访问统计" class="VisitsLineChart" text="详情">
               <template #content>
-                <VisitsLineChart />
+                <VisitsLineChart :option="statisOptions" class="statisChart" />
               </template>
             </InfoCard>
           </el-col>
@@ -99,22 +99,25 @@
 </template>
 
 <script setup>
-import { onMounted, ref, reactive } from "vue";
+import { onMounted, ref, reactive, computed } from "vue";
 import DisscussCard from "@/components/DisscussCard.vue";
 import InfoCard from "@/components/InfoCard.vue";
 import PlateCard from "@/components/PlateCard.vue";
 import ScrollbarInfo from "@/components/ScrollbarInfo.vue";
 import AvatarInfo from "@/components/AvatarInfo.vue";
 import BottomInfo from "@/components/BottomInfo.vue";
-import VisitsLineChart from "@/components/echars/VisitsLineChart.vue";
+import VisitsLineChart from "./components/VisitsLineChart.vue";
 
 import { access } from "@/apis/accessApi.js";
 import { getList } from "@/apis/plateApi.js";
 import { getList as bannerGetList } from "@/apis/bannerApi.js";
 import { getList as discussGetList } from "@/apis/discussApi.js";
+import { getWeek } from "@/apis/accessApi.js";
+
 var plateList = ref([]);
 var discussList = ref([]);
 var bannerList = ref([]);
+const weekList = ref([]);
 
 const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }];
 //主题查询参数
@@ -131,8 +134,22 @@ onMounted(async () => {
   plateList.value = plateData.items;
   const { data: discussData } = await discussGetList(query);
   discussList.value = discussData.items;
-  // const { data: bannerData } = await bannerGetList();
-  // bannerList.value = bannerData.items;
+  const { data: bannerData } = await bannerGetList();
+  bannerList.value = bannerData.items;
+  const { data: weekData } = await getWeek();
+  weekList.value = weekData;
+});
+
+// 访问统计
+const statisOptions = computed(() => {
+  return {
+    xAxis: {
+      data: weekList.value.map((item) => item.creationTime),
+    },
+    series: {
+      data: weekList.value.map((item) => item.number),
+    },
+  };
 });
 </script>
 <style scoped>
@@ -174,4 +191,9 @@ onMounted(async () => {
 .VisitsLineChart >>> .el-card__body {
   padding: 0.5rem;
 }
+
+.statisChart {
+  width: 100%;
+  height: 300px;
+}
 </style>

Yi.BBS.Vue3/src/views/home/components/VisitsLineChart.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="v-chart" ref="statis"></div>
+</template>
+
+<script setup name="VisitsLineChart">
+import { ref, defineEmits, defineProps, defineExpose } from "vue";
+import useEcharts from "@/hooks/useEcharts";
+import { statisticsEcharts } from "../hooks/echartsConfig";
+const props = defineProps({
+  option: {
+    type: Object,
+    default: () => {},
+  },
+});
+const emits = defineEmits([
+  "chart-click", // 点击chart
+]);
+
+let statis = ref(null);
+const { resize } = useEcharts(statis, emits, props, statisticsEcharts);
+defineExpose({
+  resize,
+});
+</script>
+<style scoped lang="scss">
+.v-chart {
+  width: 100%;
+  height: 100%;
+}
+</style>

Yi.BBS.Vue3/src/views/home/hooks/echartsConfig.js

@@ -0,0 +1,81 @@
+export const statisticsEcharts = {
+  grid: {
+    top: "10%",
+    left: "4%",
+    right: "4%",
+    bottom: "5%",
+    containLabel: true,
+  },
+  tooltip: {
+    trigger: "axis",
+  },
+  xAxis: {
+    show: false,
+    type: "category",
+    data: [],
+    axisLine: {
+      lineStyle: {
+        color: "#999",
+      },
+    },
+  },
+  yAxis: [
+    {
+      type: "value",
+      splitNumber: 4,
+      splitLine: {
+        lineStyle: {
+          type: "dashed",
+          color: "#DDD",
+        },
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#333",
+        },
+      },
+      nameTextStyle: {
+        color: "#999",
+      },
+      splitArea: {
+        show: false,
+      },
+    },
+  ],
+  series: {
+    name: "访问量",
+    type: "line",
+    data: [],
+    lineStyle: {
+      normal: {
+        width: 5,
+        color: {
+          type: "linear",
+          colorStops: [
+            {
+              offset: 0,
+              color: "#a0cfff", // 浅蓝色，0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: "#0047AB", // 深蓝色，100% 处的颜色
+            },
+          ],
+          globalCoord: false, // 缺省为 false
+        },
+        shadowColor: "rgba(72,216,191, 0.3)",
+        shadowBlur: 10,
+        shadowOffsetY: 20,
+      },
+    },
+    itemStyle: {
+      normal: {
+        color: "#fff",
+        borderWidth: 10,
+        borderColor: "#A9F387",
+      },
+    },
+    smooth: true,
+  },
+};