From 1e029dbc9afb2ff3ce0fb27ca16742d7b95f5eda Mon Sep 17 00:00:00 2001
From: vent <101112169+ventupx@users.noreply.github.com>
Date: Tue, 30 Sep 2025 05:09:33 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E5=9C=BA=E6=99=AF=20echarts=20=E5=9C=A8=E4=BD=BF=E7=94=A8=20v-?=
 =?UTF-8?q?show=20=E6=97=B6=E8=8E=B7=E5=8F=96=E4=B8=8D=E5=88=B0=20width=20?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98=20(#6776)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plugins/src/echarts/use-echarts.ts        | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/effects/plugins/src/echarts/use-echarts.ts b/packages/effects/plugins/src/echarts/use-echarts.ts
index d2e96ebb..b5ff6d42 100644
--- a/packages/effects/plugins/src/echarts/use-echarts.ts
+++ b/packages/effects/plugins/src/echarts/use-echarts.ts
@@ -32,6 +32,21 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
   const { height, width } = useWindowSize();
   const resizeHandler: () => void = useDebounceFn(resize, 200);
 
+  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 {};
@@ -54,7 +69,7 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
 
   const renderEcharts = (
     options: EChartsOption,
-    clear = true,
+    clear = true
   ): Promise<Nullable<echarts.ECharts>> => {
     cacheOptions = options;
     const currentOptions = {
@@ -69,6 +84,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();
@@ -83,6 +105,10 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
   };
 
   function resize() {
+    const el = getChartEl();
+    if (isElHidden(el)) {
+      return;
+    }
     chartInstance?.resize({
       animation: {
         duration: 300,