库存

src/views/pms/stat/rdkb/rd-Inventory-safety.vue

@@ -61,6 +61,8 @@ const trendChartRef = ref<HTMLDivElement>()
 let distributionChart: echarts.ECharts | null = null
 let trendChart: echarts.ECharts | null = null
 let distributionResizeObserver: ResizeObserver | null = null
+let trendResizeObserver: ResizeObserver | null = null
+let trendResizeFrame: number | null = null
 
 const panelOptions: Array<{ label: string; value: ActivePanel }> = [
   { label: '存货分布', value: 'distribution' },
@@ -532,7 +534,7 @@ function initTrendChart() {
 
 function resizeCharts() {
   distributionChart?.resize()
-  trendChart?.resize()
+  scheduleTrendResize()
 }
 
 function handleDistributionResize() {
@@ -542,6 +544,19 @@ function handleDistributionResize() {
   renderDistributionChart()
 }
 
+function scheduleTrendResize() {
+  if (trendResizeFrame !== null) return
+
+  trendResizeFrame = requestAnimationFrame(() => {
+    trendResizeFrame = null
+    if (activePanel.value !== 'trend' || !trendChartRef.value) return
+
+    if (!trendChart) initTrendChart()
+    trendChart?.resize()
+    renderTrendChart()
+  })
+}
+
 function destroyCharts() {
   distributionChart?.dispose()
   trendChart?.dispose()
@@ -635,6 +650,8 @@ onMounted(() => {
       initDistributionChart()
       distributionResizeObserver = new ResizeObserver(handleDistributionResize)
       distributionResizeObserver.observe(distributionChartRef.value!)
+      trendResizeObserver = new ResizeObserver(scheduleTrendResize)
+      trendResizeObserver.observe(trendChartRef.value!)
     })
   })
   window.addEventListener('resize', resizeCharts)
@@ -662,6 +679,12 @@ onUnmounted(() => {
   window.removeEventListener('rhkb:resize', resizeCharts)
   distributionResizeObserver?.disconnect()
   distributionResizeObserver = null
+  trendResizeObserver?.disconnect()
+  trendResizeObserver = null
+  if (trendResizeFrame !== null) {
+    cancelAnimationFrame(trendResizeFrame)
+    trendResizeFrame = null
+  }
   destroyCharts()
 })
 </script>