perf: 更简单且兼容场景更多的首页图表尺寸自适应容器写法

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",

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
+    specifier: ^2.2.0
-    version: 2.1.2(echarts@5.4.3)(vue@3.4.5)
+    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):
+  /@pureadmin/utils@2.2.0(echarts@5.4.3)(vue@3.4.5):
-    resolution: {integrity: sha512-TjMLN6MBNa5WkJYMidk1LhTfmTlHcSEjFm1jtN3e5z9Q3jzfnu5jF8MC+b0WF0LzeRqnq6kICrxXpSn5/HqNIA==}
+    resolution: {integrity: sha512-G4/Qzu0QosXlfTO/gWvgpygugFuUVpwUspfuejIqBnrJEudBllx17wZdDjNEL27Uwg+HjXYjofXQUGUX4E2NtA==}
     peerDependencies:
       echarts: '*'
       vue: '*'

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>

src/views/welcome/components/chart/line.vue

@@ -24,6 +24,7 @@ const { setOptions } = useECharts(chartRef, {
 });
 
 setOptions({
+  container: ".line-card",
   xAxis: {
     type: "category",
     show: false,

src/views/welcome/components/chart/round.vue

@@ -13,6 +13,7 @@ const { setOptions } = useECharts(chartRef, {
 });
 
 setOptions({
+  container: ".line-card",
   title: {
     text: "100%",
     left: "47%",

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"
             />

src/views/welcome/utils.ts

@@ -1,6 +1,5 @@
 export { default as dayjs } from "dayjs";
-export { useResizeObserver } from "@vueuse/core";
+export { useDark, cloneDeep, randomGradient } from "@pureadmin/utils";
-export { useDark, debounce, cloneDeep, randomGradient } from "@pureadmin/utils";
 
 export function getRandomIntBetween(min: number, max: number) {
   return Math.floor(Math.random() * (max - min + 1)) + min;