From a3828ee89b866f9b4857883cf6eee34170c5d87e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期五, 30 一月 2026 15:37:20 +0800
Subject: [PATCH] fix: 大屏初始化样式自适应问题

---
 src/components/Echarts/echarts.vue |   65 ++++++++++++++++++++++++++++++--
 1 files changed, 60 insertions(+), 5 deletions(-)

diff --git a/src/components/Echarts/echarts.vue b/src/components/Echarts/echarts.vue
index a386bb7..0e07163 100644
--- a/src/components/Echarts/echarts.vue
+++ b/src/components/Echarts/echarts.vue
@@ -6,8 +6,10 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onBeforeUnmount, watchEffect } from 'vue'
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import * as echarts from 'echarts'
+
+const emit = defineEmits(['finished'])
 
 // Props
 const props = defineProps({
@@ -91,6 +93,47 @@
 // Refs
 const chartRef = ref(null)
 let chartInstance = null
+let finishedHandler = null
+let initTimer = null
+let initAttempts = 0
+
+function clearInitTimer() {
+  if (initTimer) {
+    clearTimeout(initTimer)
+    initTimer = null
+  }
+}
+
+function isContainerReady() {
+  const el = chartRef.value
+  if (!el) return false
+  // offsetWidth/offsetHeight 鏇磋创杩戠湡瀹炲竷灞�锛堜负 0 寰�寰�浠ｈ〃杩樻病甯冨眬/涓嶅彲瑙侊級
+  return el.offsetWidth > 0 && el.offsetHeight > 0
+}
+
+function initChartWhenReady() {
+  clearInitTimer()
+  initAttempts += 1
+
+  if (!isContainerReady()) {
+    // 绛夊鍣ㄧ湡姝ｆ湁灏哄锛堥伩鍏嶉灞忓垵濮嬪寲鍋忕Щ/绌虹櫧锛岀儹鏇存柊鍚庢墠姝ｅ父鐨勬儏鍐碉級
+    // 鏈�澶氶噸璇曠害 3 绉掞紝閬垮厤鏃犻檺寰幆
+    if (initAttempts < 60) {
+      initTimer = setTimeout(initChartWhenReady, 50)
+    }
+    return
+  }
+
+  if (chartInstance) return
+  chartInstance = echarts.init(chartRef.value)
+  finishedHandler = () => emit('finished')
+  chartInstance.on('finished', finishedHandler)
+  renderChart()
+  // setOption 鍚庤ˉ涓�娆� resize锛岀‘淇濋灞忓昂瀵告纭�
+  nextTick(() => {
+    if (chartInstance) chartInstance.resize()
+  })
+}
 
 // Methods
 function generateChart(option) {
@@ -139,26 +182,38 @@
 
 // Lifecycle hooks
 onMounted(() => {
-  chartInstance = echarts.init(chartRef.value)
-  renderChart()
+  initAttempts = 0
+  initChartWhenReady()
   window.addEventListener('resize', windowResizeListener)
 })
 
 onBeforeUnmount(() => {
   if (chartInstance) {
     window.removeEventListener('resize', windowResizeListener)
+    if (finishedHandler) {
+      chartInstance.off('finished', finishedHandler)
+      finishedHandler = null
+    }
     chartInstance.dispose()
     chartInstance = null
   }
+  clearInitTimer()
 })
 
 // Watch all reactive props that affect the chart
 watch(
     () => [props.xAxis, props.yAxis, props.series, props.legend, props.tooltip, props.visualMap],
     () => {
-      if (chartInstance) {
-        renderChart()
+      // 濡傛灉棣栧睆杩樻病鍒濆鍖栨垚鍔燂紝绛夊緟瀹瑰櫒 ready 鍚庡啀娓叉煋
+      if (!chartInstance) {
+        initChartWhenReady()
+        return
       }
+      renderChart()
+      // 鏁版嵁鍙樺寲鍚庤ˉ涓�娆� resize锛岄伩鍏嶅竷灞�鍙樺寲瀵艰嚧鐨勫亸绉�
+      nextTick(() => {
+        if (chartInstance) chartInstance.resize()
+      })
     },
     { deep: true, immediate: true }
 )

--
Gitblit v1.9.3