Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev

packages/effects/plugins/src/echarts/use-echarts.ts

@@ -46,6 +46,21 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
     },
   });
 
+  const getChartEl = (): HTMLElement | null => {
+    const refValue = chartRef?.value as unknown;
+    if (!refValue) return null;
+    if (refValue instanceof HTMLElement) {
+      return refValue;
+    }
+    const maybeComponent = refValue as { $el?: HTMLElement };
+    return maybeComponent.$el ?? null;
+  };
+
+  const isElHidden = (el: HTMLElement | null): boolean => {
+    if (!el) return true;
+    return el.offsetHeight === 0 || el.offsetWidth === 0;
+  };
+
   const getOptions = computed((): EChartsOption => {
     if (!isDark.value) {
       return {};
@@ -83,6 +98,13 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
         return;
       }
       nextTick(() => {
+        const el = getChartEl();
+        if (isElHidden(el)) {
+          useTimeoutFn(async () => {
+            resolve(await renderEcharts(currentOptions));
+          }, 30);
+          return;
+        }
         useTimeoutFn(() => {
           if (!chartInstance) {
             const instance = initCharts();
@@ -97,6 +119,10 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
   };
 
   function resize() {
+    const el = getChartEl();
+    if (isElHidden(el)) {
+      return;
+    }
     chartInstance?.resize({
       animation: {
         duration: 300,