瑞都、瑞鹰存货分布

src/views/pms/stat/rykb/inventory-situation.vue

@@ -60,6 +60,7 @@ const trendChartRef = ref<HTMLDivElement>()
 
 let distributionChart: echarts.ECharts | null = null
 let trendChart: echarts.ECharts | null = null
+let distributionResizeObserver: ResizeObserver | null = null
 
 const panelOptions: Array<{ label: string; value: ActivePanel }> = [
   { label: '存货分布', value: 'distribution' },
@@ -528,6 +529,13 @@ function resizeCharts() {
   trendChart?.resize()
 }
 
+function handleDistributionResize() {
+  if (!distributionChartRef.value || !distributionChart) return
+
+  distributionChart.resize()
+  renderDistributionChart()
+}
+
 function destroyCharts() {
   distributionChart?.dispose()
   trendChart?.dispose()
@@ -616,7 +624,13 @@ async function requestInventoryDetail() {
 }
 
 onMounted(() => {
-  initDistributionChart()
+  nextTick(() => {
+    requestAnimationFrame(() => {
+      initDistributionChart()
+      distributionResizeObserver = new ResizeObserver(handleDistributionResize)
+      distributionResizeObserver.observe(distributionChartRef.value!)
+    })
+  })
   window.addEventListener('resize', resizeCharts)
   window.addEventListener('rhkb:resize', resizeCharts)
 })
@@ -640,6 +654,8 @@ watch(selectedDate, () => {
 onUnmounted(() => {
   window.removeEventListener('resize', resizeCharts)
   window.removeEventListener('rhkb:resize', resizeCharts)
+  distributionResizeObserver?.disconnect()
+  distributionResizeObserver = null
   destroyCharts()
 })
 </script>