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

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