From ebc245d0042caa2756ebfdbb8157d13b36f57421 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Tue, 9 Jan 2024 16:10:55 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=9B=B4=E7=AE=80=E5=8D=95=E4=B8=94?=
 =?UTF-8?q?=E5=85=BC=E5=AE=B9=E5=9C=BA=E6=99=AF=E6=9B=B4=E5=A4=9A=E7=9A=84?=
 =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=9B=BE=E8=A1=A8=E5=B0=BA=E5=AF=B8=E8=87=AA?=
 =?UTF-8?q?=E9=80=82=E5=BA=94=E5=AE=B9=E5=99=A8=E5=86=99=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                 |  2 +-
 pnpm-lock.yaml                               |  8 ++++----
 src/views/welcome/components/chart/bar.vue   |  8 ++------
 src/views/welcome/components/chart/line.vue  |  1 +
 src/views/welcome/components/chart/round.vue |  1 +
 src/views/welcome/index.vue                  | 14 +++-----------
 src/views/welcome/utils.ts                   |  3 +--
 7 files changed, 13 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index da539170e..2aa7d17eb 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "@logicflow/extension": "^1.2.19",
     "@pureadmin/descriptions": "^1.2.0",
     "@pureadmin/table": "^3.0.0",
-    "@pureadmin/utils": "^2.1.2",
+    "@pureadmin/utils": "^2.2.0",
     "@vueuse/core": "^10.7.1",
     "@vueuse/motion": "^2.0.0",
     "@wangeditor/editor": "^5.1.23",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 653aa58b0..4f2bfaa03 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ dependencies:
     specifier: ^3.0.0
     version: 3.0.0(element-plus@2.4.4)(typescript@5.3.3)
   '@pureadmin/utils':
-    specifier: ^2.1.2
-    version: 2.1.2(echarts@5.4.3)(vue@3.4.5)
+    specifier: ^2.2.0
+    version: 2.2.0(echarts@5.4.3)(vue@3.4.5)
   '@vueuse/core':
     specifier: ^10.7.1
     version: 10.7.1(vue@3.4.5)
@@ -1757,8 +1757,8 @@ packages:
       string-hash: 1.1.3
     dev: true
 
-  /@pureadmin/utils@2.1.2(echarts@5.4.3)(vue@3.4.5):
-    resolution: {integrity: sha512-TjMLN6MBNa5WkJYMidk1LhTfmTlHcSEjFm1jtN3e5z9Q3jzfnu5jF8MC+b0WF0LzeRqnq6kICrxXpSn5/HqNIA==}
+  /@pureadmin/utils@2.2.0(echarts@5.4.3)(vue@3.4.5):
+    resolution: {integrity: sha512-G4/Qzu0QosXlfTO/gWvgpygugFuUVpwUspfuejIqBnrJEudBllx17wZdDjNEL27Uwg+HjXYjofXQUGUX4E2NtA==}
     peerDependencies:
       echarts: '*'
       vue: '*'
diff --git a/src/views/welcome/components/chart/bar.vue b/src/views/welcome/components/chart/bar.vue
index d0351e297..6d9af1597 100644
--- a/src/views/welcome/components/chart/bar.vue
+++ b/src/views/welcome/components/chart/bar.vue
@@ -18,7 +18,7 @@ const { isDark } = useDark();
 const theme = computed(() => (isDark.value ? "dark" : "light"));
 
 const chartRef = ref();
-const { setOptions, resize } = useECharts(chartRef, {
+const { setOptions } = useECharts(chartRef, {
   theme
 });
 
@@ -27,7 +27,7 @@ watch(
   async () => {
     await nextTick(); // 确保DOM更新完成后再执行
     setOptions({
-      resize: false,
+      container: ".bar-card",
       color: ["#41b6ff", "#e85f33"],
       tooltip: {
         trigger: "axis",
@@ -101,10 +101,6 @@ watch(
     immediate: true
   }
 );
-
-defineExpose({
-  resize
-});
 </script>
 
 <template>
diff --git a/src/views/welcome/components/chart/line.vue b/src/views/welcome/components/chart/line.vue
index 533842c80..fa72ec19e 100644
--- a/src/views/welcome/components/chart/line.vue
+++ b/src/views/welcome/components/chart/line.vue
@@ -24,6 +24,7 @@ const { setOptions } = useECharts(chartRef, {
 });
 
 setOptions({
+  container: ".line-card",
   xAxis: {
     type: "category",
     show: false,
diff --git a/src/views/welcome/components/chart/round.vue b/src/views/welcome/components/chart/round.vue
index ed069e5c7..769f2b234 100644
--- a/src/views/welcome/components/chart/round.vue
+++ b/src/views/welcome/components/chart/round.vue
@@ -13,6 +13,7 @@ const { setOptions } = useECharts(chartRef, {
 });
 
 setOptions({
+  container: ".line-card",
   title: {
     text: "100%",
     left: "47%",
diff --git a/src/views/welcome/index.vue b/src/views/welcome/index.vue
index d1df69c00..8e811aa7c 100644
--- a/src/views/welcome/index.vue
+++ b/src/views/welcome/index.vue
@@ -1,20 +1,18 @@
 <script setup lang="ts">
 import { ref, markRaw } from "vue";
 import ReCol from "@/components/ReCol";
+import { useDark, randomGradient } from "./utils";
 import PureTable from "./components/table/index.vue";
 import { ReNormalCountTo } from "@/components/ReCountTo";
 import { useRenderFlicker } from "@/components/ReFlicker";
 import { barChart, lineChart, roundChart } from "./components/chart";
 import Segmented, { type OptionsType } from "@/components/ReSegmented";
-import { useResizeObserver, useDark, debounce, randomGradient } from "./utils";
 import { chartData, barChartData, progressData, latestNewsData } from "./data";
 
 defineOptions({
   name: "Welcome"
 });
 
-const barCardRef = ref();
-const barChartRef = ref();
 const { isDark } = useDark();
 
 let curWeek = ref(1); // 0上周、1本周
@@ -26,11 +24,6 @@ const optionsBasis: Array<OptionsType> = [
     label: "本周"
   }
 ];
-
-useResizeObserver(
-  barCardRef,
-  debounce(() => barChartRef.value.resize(), 60)
-);
 </script>
 
 <template>
@@ -57,7 +50,7 @@ useResizeObserver(
           }
         }"
       >
-        <el-card shadow="never">
+        <el-card class="line-card" shadow="never">
           <div class="flex justify-between">
             <span class="text-md font-medium">
               {{ item.name }}
@@ -113,14 +106,13 @@ useResizeObserver(
           }
         }"
       >
-        <el-card ref="barCardRef" shadow="never">
+        <el-card class="bar-card" shadow="never">
           <div class="flex justify-between">
             <span class="text-md font-medium">分析概览</span>
             <Segmented v-model="curWeek" :options="optionsBasis" />
           </div>
           <div class="flex justify-between items-start mt-3">
             <barChart
-              ref="barChartRef"
               :requireData="barChartData[curWeek].requireData"
               :questionData="barChartData[curWeek].questionData"
             />
diff --git a/src/views/welcome/utils.ts b/src/views/welcome/utils.ts
index 85e0ef436..7708a7e23 100644
--- a/src/views/welcome/utils.ts
+++ b/src/views/welcome/utils.ts
@@ -1,6 +1,5 @@
 export { default as dayjs } from "dayjs";
-export { useResizeObserver } from "@vueuse/core";
-export { useDark, debounce, cloneDeep, randomGradient } from "@pureadmin/utils";
+export { useDark, cloneDeep, randomGradient } from "@pureadmin/utils";
 
 export function getRandomIntBetween(min: number, max: number) {
   return Math.floor(Math.random() * (max - min + 1)) + min;