Merge branch 'qhse_file' of shuzhihua/pms-iot-vue into master

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' },
@@ -141,7 +143,8 @@ function getChartLayout(chartRef: Ref<HTMLDivElement | undefined>) {
     distributionLegendGap: compact ? 4 : 10,
     distributionLegendFontSize: compact ? 10 : 14,
     trendGridTop: compact ? 10 : 32,
-    trendGridRight: compact ? 12 : THEME.grid.right,
+    trendGridLeft: compact ? 34 : 48,
+    trendGridRight: compact ? 34 : 48,
     trendGridBottom: compact ? 2 : THEME.grid.bottom,
     legendTop: compact ? 0 : 4,
     legendRight: compact ? 2 : 6,
@@ -155,7 +158,8 @@ function getChartLayout(chartRef: Ref<HTMLDivElement | undefined>) {
     barGap: compact ? '12%' : '5%',
     barCategoryGap: compact ? '46%' : '36%',
     labelDistance: compact ? 4 : 7,
-    labelFontSize: compact ? 10 : 12
+    distributionLabelFontSize: compact ? 6 : 8,
+    trendLabelFontSize: compact ? 10 : 12
   }
 }
 
@@ -238,37 +242,8 @@ function getDistributionOption(
         fontFamily: FONT_FAMILY
       }
     }),
-    graphic: [
-      {
-        type: 'text',
-        left: '19.5%',
-        top: '45%',
-        style: {
-          text: `总库存\n${formatAmount(inventoryTotal)}万元`,
-          textAlign: 'center',
-          fill: THEME.text.strong,
-          fontSize: layout.compact ? 8 : 10,
-          fontWeight: 700,
-          lineHeight: layout.distributionTitleLineHeight + 6,
-          fontFamily: FONT_FAMILY
-        }
-      },
-      {
-        type: 'text',
-        left: '67%',
-        top: '45%',
-        style: {
-          text: `总积压\n${formatAmount(backlogTotal)}万元`,
-          textAlign: 'center',
-          fill: THEME.text.strong,
-          fontSize: layout.compact ? 8 : 10,
-          fontWeight: 700,
-          lineHeight: layout.distributionTitleLineHeight + 6,
-          fontFamily: FONT_FAMILY
-        }
-      }
-    ],
     series: [
+      // ===== 第一个饼图：库存数据（带外标签） =====
       {
         name: '库存',
         type: 'pie',
@@ -283,17 +258,14 @@ function getDistributionOption(
           bleedMargin: 0,
           formatter: '{b}\n{d}%',
           color: 'inherit',
-          fontSize: layout.labelFontSize,
+          fontSize: layout.distributionLabelFontSize,
           fontWeight: 500,
           fontFamily: FONT_FAMILY
         },
         labelLine: {
           show: true,
-          // length: layout.compact ? 6 : 10,
-          // length2: layout.compact ? 8 : 14,
           minTurnAngle: 90,
           lineStyle: {
-            color: distributionColors[0],
             width: 1.5,
             opacity: 1
           }
@@ -320,6 +292,34 @@ function getDistributionOption(
           }
         }))
       },
+      // ===== 第二个饼图：库存中心文字（不显示饼图） =====
+      {
+        name: '库存中心文字',
+        type: 'pie',
+        radius: ['0%', '0%'],
+        center: ['25%', layout.distributionPieCenterY],
+        label: {
+          show: true,
+          position: 'center',
+          formatter: `总库存\n${formatAmount(inventoryTotal)}万元`,
+          color: THEME.text.strong,
+          fontSize: layout.compact ? 8 : 10,
+          fontWeight: 700,
+          lineHeight: layout.distributionTitleLineHeight + 6,
+          fontFamily: FONT_FAMILY
+        },
+        data: [{ name: '中心文字', value: 1 }],
+        animation: false,
+        tooltip: { show: false },
+        legend: { show: false },
+        // ✅ 关键：禁用所有交互
+        silent: true,
+        emphasis: {
+          scale: false,
+          label: { show: false }
+        }
+      },
+      // ===== 第三个饼图：积压数据（带外标签） =====
       {
         name: '积压库存',
         type: 'pie',
@@ -334,17 +334,14 @@ function getDistributionOption(
           bleedMargin: 0,
           formatter: '{b}\n{d}%',
           color: 'inherit',
-          fontSize: layout.labelFontSize,
+          fontSize: layout.distributionLabelFontSize,
           fontWeight: 500,
           fontFamily: FONT_FAMILY
         },
         labelLine: {
           show: true,
-          // length: layout.compact ? 6 : 10,
-          // length2: layout.compact ? 8 : 14,
           minTurnAngle: 90,
           lineStyle: {
-            color: distributionColors[0],
             width: 1.5,
             opacity: 1
           }
@@ -372,6 +369,33 @@ function getDistributionOption(
               }
             }
           }))
+      },
+      // ===== 第四个饼图：积压中心文字（不显示饼图） =====
+      {
+        name: '积压中心文字',
+        type: 'pie',
+        radius: ['0%', '0%'],
+        center: ['73%', layout.distributionPieCenterY],
+        label: {
+          show: true,
+          position: 'center',
+          formatter: `总积压\n${formatAmount(backlogTotal)}万元`,
+          color: THEME.text.strong,
+          fontSize: layout.compact ? 8 : 10,
+          fontWeight: 700,
+          lineHeight: layout.distributionTitleLineHeight + 6,
+          fontFamily: FONT_FAMILY
+        },
+        data: [{ name: '中心文字', value: 1 }],
+        animation: false,
+        tooltip: { show: false },
+        legend: { show: false },
+        // ✅ 关键：禁用所有交互
+        silent: true,
+        emphasis: {
+          scale: false,
+          label: { show: false }
+        }
       }
     ]
   }
@@ -422,6 +446,7 @@ function getInventoryAgingOption(data: unknown): echarts.EChartsOption {
     animation: false,
     grid: {
       ...THEME.grid,
+      left: layout.trendGridLeft,
       top: layout.trendGridTop,
       right: layout.trendGridRight,
       bottom: layout.trendGridBottom
@@ -434,7 +459,7 @@ function getInventoryAgingOption(data: unknown): echarts.EChartsOption {
     }),
     xAxis: {
       type: 'category',
-      boundaryGap: false,
+      boundaryGap: true,
       data: months,
       axisTick: { show: false },
       axisLabel: {
@@ -487,7 +512,7 @@ function getInventoryAgingOption(data: unknown): echarts.EChartsOption {
         label: {
           show: true,
           color: THEME.color.orange.line,
-          fontSize: layout.labelFontSize,
+          fontSize: layout.trendLabelFontSize,
           fontFamily: FONT_FAMILY,
           formatter(params: any) {
             return `${formatAmount(Number(params.value))}万`
@@ -529,7 +554,7 @@ function initTrendChart() {
 
 function resizeCharts() {
   distributionChart?.resize()
-  trendChart?.resize()
+  scheduleTrendResize()
 }
 
 function handleDistributionResize() {
@@ -539,6 +564,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()
@@ -632,6 +670,8 @@ onMounted(() => {
       initDistributionChart()
       distributionResizeObserver = new ResizeObserver(handleDistributionResize)
       distributionResizeObserver.observe(distributionChartRef.value!)
+      trendResizeObserver = new ResizeObserver(scheduleTrendResize)
+      trendResizeObserver.observe(trendChartRef.value!)
     })
   })
   window.addEventListener('resize', resizeCharts)
@@ -659,6 +699,12 @@ onUnmounted(() => {
   window.removeEventListener('rhkb:resize', resizeCharts)
   distributionResizeObserver?.disconnect()
   distributionResizeObserver = null
+  trendResizeObserver?.disconnect()
+  trendResizeObserver = null
+  if (trendResizeFrame !== null) {
+    cancelAnimationFrame(trendResizeFrame)
+    trendResizeFrame = null
+  }
   destroyCharts()
 })
 </script>

src/views/pms/stat/rhkb/inventorySituation.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' },
@@ -140,8 +142,9 @@ function getChartLayout(chartRef: Ref<HTMLDivElement | undefined>) {
     distributionLegendItemSize: compact ? 9 : 13,
     distributionLegendGap: compact ? 4 : 10,
     distributionLegendFontSize: compact ? 10 : 14,
-    trendGridTop: compact ? 10 : 32,
-    trendGridRight: compact ? 12 : THEME.grid.right,
+    trendGridTop: compact ? 24 : 48,
+    trendGridLeft: compact ? 34 : 48,
+    trendGridRight: compact ? 34 : 48,
     trendGridBottom: compact ? 2 : THEME.grid.bottom,
     legendTop: compact ? 0 : 4,
     legendRight: compact ? 2 : 6,
@@ -155,7 +158,9 @@ function getChartLayout(chartRef: Ref<HTMLDivElement | undefined>) {
     barGap: compact ? '12%' : '5%',
     barCategoryGap: compact ? '46%' : '36%',
     labelDistance: compact ? 4 : 7,
-    labelFontSize: compact ? 10 : 12
+    distributionLabelFontSize: compact ? 6 : 8,
+    trendLabelFontSize: compact ? 10 : 12,
+    trendLabelDistance: compact ? 4 : 8
   }
 }
 
@@ -238,37 +243,8 @@ function getDistributionOption(
         fontFamily: FONT_FAMILY
       }
     }),
-    graphic: [
-      {
-        type: 'text',
-        left: '19.5%',
-        top: '45%',
-        style: {
-          text: `总库存\n${formatAmount(inventoryTotal)}万元`,
-          textAlign: 'center',
-          fill: THEME.text.strong,
-          fontSize: layout.compact ? 8 : 10,
-          fontWeight: 700,
-          lineHeight: layout.distributionTitleLineHeight + 6,
-          fontFamily: FONT_FAMILY
-        }
-      },
-      {
-        type: 'text',
-        left: '67%',
-        top: '45%',
-        style: {
-          text: `总积压\n${formatAmount(backlogTotal)}万元`,
-          textAlign: 'center',
-          fill: THEME.text.strong,
-          fontSize: layout.compact ? 8 : 10,
-          fontWeight: 700,
-          lineHeight: layout.distributionTitleLineHeight + 6,
-          fontFamily: FONT_FAMILY
-        }
-      }
-    ],
     series: [
+      // ===== 第一个饼图：库存数据（带外标签） =====
       {
         name: '库存',
         type: 'pie',
@@ -283,17 +259,14 @@ function getDistributionOption(
           bleedMargin: 0,
           formatter: '{b}\n{d}%',
           color: 'inherit',
-          fontSize: layout.labelFontSize,
+          fontSize: layout.distributionLabelFontSize,
           fontWeight: 500,
           fontFamily: FONT_FAMILY
         },
         labelLine: {
           show: true,
-          // length: layout.compact ? 6 : 10,
-          // length2: layout.compact ? 8 : 14,
           minTurnAngle: 90,
           lineStyle: {
-            color: distributionColors[0],
             width: 1.5,
             opacity: 1
           }
@@ -320,6 +293,34 @@ function getDistributionOption(
           }
         }))
       },
+      // ===== 第二个饼图：库存中心文字（不显示饼图） =====
+      {
+        name: '库存中心文字',
+        type: 'pie',
+        radius: ['0%', '0%'],
+        center: ['25%', layout.distributionPieCenterY],
+        label: {
+          show: true,
+          position: 'center',
+          formatter: `总库存\n${formatAmount(inventoryTotal)}万元`,
+          color: THEME.text.strong,
+          fontSize: layout.compact ? 8 : 10,
+          fontWeight: 700,
+          lineHeight: layout.distributionTitleLineHeight + 6,
+          fontFamily: FONT_FAMILY
+        },
+        data: [{ name: '中心文字', value: 1 }],
+        animation: false,
+        tooltip: { show: false },
+        legend: { show: false },
+        // ✅ 关键：禁用所有交互
+        silent: true,
+        emphasis: {
+          scale: false,
+          label: { show: false }
+        }
+      },
+      // ===== 第三个饼图：积压数据（带外标签） =====
       {
         name: '积压库存',
         type: 'pie',
@@ -334,17 +335,14 @@ function getDistributionOption(
           bleedMargin: 0,
           formatter: '{b}\n{d}%',
           color: 'inherit',
-          fontSize: layout.labelFontSize,
+          fontSize: layout.distributionLabelFontSize,
           fontWeight: 500,
           fontFamily: FONT_FAMILY
         },
         labelLine: {
           show: true,
-          // length: layout.compact ? 6 : 10,
-          // length2: layout.compact ? 8 : 14,
           minTurnAngle: 90,
           lineStyle: {
-            color: distributionColors[0],
             width: 1.5,
             opacity: 1
           }
@@ -372,6 +370,33 @@ function getDistributionOption(
               }
             }
           }))
+      },
+      // ===== 第四个饼图：积压中心文字（不显示饼图） =====
+      {
+        name: '积压中心文字',
+        type: 'pie',
+        radius: ['0%', '0%'],
+        center: ['73%', layout.distributionPieCenterY],
+        label: {
+          show: true,
+          position: 'center',
+          formatter: `总积压\n${formatAmount(backlogTotal)}万元`,
+          color: THEME.text.strong,
+          fontSize: layout.compact ? 8 : 10,
+          fontWeight: 700,
+          lineHeight: layout.distributionTitleLineHeight + 6,
+          fontFamily: FONT_FAMILY
+        },
+        data: [{ name: '中心文字', value: 1 }],
+        animation: false,
+        tooltip: { show: false },
+        legend: { show: false },
+        // ✅ 关键：禁用所有交互
+        silent: true,
+        emphasis: {
+          scale: false,
+          label: { show: false }
+        }
       }
     ]
   }
@@ -422,6 +447,7 @@ function getInventoryAgingOption(data: unknown): echarts.EChartsOption {
     animation: false,
     grid: {
       ...THEME.grid,
+      left: layout.trendGridLeft,
       top: layout.trendGridTop,
       right: layout.trendGridRight,
       bottom: layout.trendGridBottom
@@ -434,7 +460,7 @@ function getInventoryAgingOption(data: unknown): echarts.EChartsOption {
     }),
     xAxis: {
       type: 'category',
-      boundaryGap: false,
+      boundaryGap: true,
       data: months,
       axisTick: { show: false },
       axisLabel: {
@@ -445,7 +471,7 @@ function getInventoryAgingOption(data: unknown): echarts.EChartsOption {
     },
     yAxis: {
       type: 'value',
-      name: '万元',
+      // name: '万元',
       min: 0,
       axisTick: { show: false },
       axisLabel: {
@@ -486,12 +512,18 @@ function getInventoryAgingOption(data: unknown): echarts.EChartsOption {
         },
         label: {
           show: true,
+          position: 'top',
+          distance: layout.trendLabelDistance,
           color: THEME.color.orange.line,
-          fontSize: layout.labelFontSize,
+          fontSize: layout.trendLabelFontSize,
           fontFamily: FONT_FAMILY,
           formatter(params: any) {
             return `${formatAmount(Number(params.value))}万`
           }
+        },
+        labelLayout: {
+          hideOverlap: false,
+          moveOverlap: 'shiftY'
         }
       }
     ]
@@ -529,7 +561,7 @@ function initTrendChart() {
 
 function resizeCharts() {
   distributionChart?.resize()
-  trendChart?.resize()
+  scheduleTrendResize()
 }
 
 function handleDistributionResize() {
@@ -539,6 +571,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()
@@ -632,6 +677,8 @@ onMounted(() => {
       initDistributionChart()
       distributionResizeObserver = new ResizeObserver(handleDistributionResize)
       distributionResizeObserver.observe(distributionChartRef.value!)
+      trendResizeObserver = new ResizeObserver(scheduleTrendResize)
+      trendResizeObserver.observe(trendChartRef.value!)
     })
   })
   window.addEventListener('resize', resizeCharts)
@@ -659,6 +706,12 @@ onUnmounted(() => {
   window.removeEventListener('rhkb:resize', resizeCharts)
   distributionResizeObserver?.disconnect()
   distributionResizeObserver = null
+  trendResizeObserver?.disconnect()
+  trendResizeObserver = null
+  if (trendResizeFrame !== null) {
+    cancelAnimationFrame(trendResizeFrame)
+    trendResizeFrame = null
+  }
   destroyCharts()
 })
 </script>

src/views/pms/stat/rykb/inventory-situation.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' },
@@ -141,7 +143,8 @@ function getChartLayout(chartRef: Ref<HTMLDivElement | undefined>) {
     distributionLegendGap: compact ? 4 : 10,
     distributionLegendFontSize: compact ? 10 : 14,
     trendGridTop: compact ? 10 : 32,
-    trendGridRight: compact ? 12 : THEME.grid.right,
+    trendGridLeft: compact ? 34 : 48,
+    trendGridRight: compact ? 34 : 48,
     trendGridBottom: compact ? 2 : THEME.grid.bottom,
     legendTop: compact ? 0 : 4,
     legendRight: compact ? 2 : 6,
@@ -155,7 +158,8 @@ function getChartLayout(chartRef: Ref<HTMLDivElement | undefined>) {
     barGap: compact ? '12%' : '5%',
     barCategoryGap: compact ? '46%' : '36%',
     labelDistance: compact ? 4 : 7,
-    labelFontSize: compact ? 10 : 12
+    distributionLabelFontSize: compact ? 6 : 8,
+    trendLabelFontSize: compact ? 10 : 12
   }
 }
 
@@ -238,37 +242,8 @@ function getDistributionOption(
         fontFamily: FONT_FAMILY
       }
     }),
-    graphic: [
-      {
-        type: 'text',
-        left: '19.5%',
-        top: '45%',
-        style: {
-          text: `总库存\n${formatAmount(inventoryTotal)}万元`,
-          textAlign: 'center',
-          fill: THEME.text.strong,
-          fontSize: layout.compact ? 8 : 10,
-          fontWeight: 700,
-          lineHeight: layout.distributionTitleLineHeight + 6,
-          fontFamily: FONT_FAMILY
-        }
-      },
-      {
-        type: 'text',
-        left: '67%',
-        top: '45%',
-        style: {
-          text: `总积压\n${formatAmount(backlogTotal)}万元`,
-          textAlign: 'center',
-          fill: THEME.text.strong,
-          fontSize: layout.compact ? 8 : 10,
-          fontWeight: 700,
-          lineHeight: layout.distributionTitleLineHeight + 6,
-          fontFamily: FONT_FAMILY
-        }
-      }
-    ],
     series: [
+      // ===== 第一个饼图：库存数据（带外标签） =====
       {
         name: '库存',
         type: 'pie',
@@ -283,17 +258,17 @@ function getDistributionOption(
           bleedMargin: 0,
           formatter: '{b}\n{d}%',
           color: 'inherit',
-          fontSize: layout.labelFontSize,
+          fontSize: layout.distributionLabelFontSize,
+          distanceToLabelLine: 1, // 标签与引导线的距离
           fontWeight: 500,
           fontFamily: FONT_FAMILY
         },
         labelLine: {
           show: true,
-          // length: layout.compact ? 6 : 10,
-          // length2: layout.compact ? 8 : 14,
           minTurnAngle: 90,
+          length: layout.compact ? 10 : 15, // 引导线第一段长度
+          length2: layout.compact ? 12 : 20, // 引导线第二段长度
           lineStyle: {
-            color: distributionColors[0],
             width: 1.5,
             opacity: 1
           }
@@ -320,6 +295,34 @@ function getDistributionOption(
           }
         }))
       },
+      // ===== 第二个饼图：库存中心文字（不显示饼图） =====
+      {
+        name: '库存中心文字',
+        type: 'pie',
+        radius: ['0%', '0%'],
+        center: ['25%', layout.distributionPieCenterY],
+        label: {
+          show: true,
+          position: 'center',
+          formatter: `总库存\n${formatAmount(inventoryTotal)}万元`,
+          color: THEME.text.strong,
+          fontSize: layout.compact ? 8 : 10,
+          fontWeight: 700,
+          lineHeight: layout.distributionTitleLineHeight + 6,
+          fontFamily: FONT_FAMILY
+        },
+        data: [{ name: '中心文字', value: 1 }],
+        animation: false,
+        tooltip: { show: false },
+        legend: { show: false },
+        // ✅ 关键：禁用所有交互
+        silent: true,
+        emphasis: {
+          scale: false,
+          label: { show: false }
+        }
+      },
+      // ===== 第三个饼图：积压数据（带外标签） =====
       {
         name: '积压库存',
         type: 'pie',
@@ -334,17 +337,14 @@ function getDistributionOption(
           bleedMargin: 0,
           formatter: '{b}\n{d}%',
           color: 'inherit',
-          fontSize: layout.labelFontSize,
+          fontSize: layout.distributionLabelFontSize,
           fontWeight: 500,
           fontFamily: FONT_FAMILY
         },
         labelLine: {
           show: true,
-          // length: layout.compact ? 6 : 10,
-          // length2: layout.compact ? 8 : 14,
           minTurnAngle: 90,
           lineStyle: {
-            color: distributionColors[0],
             width: 1.5,
             opacity: 1
           }
@@ -372,6 +372,33 @@ function getDistributionOption(
               }
             }
           }))
+      },
+      // ===== 第四个饼图：积压中心文字（不显示饼图） =====
+      {
+        name: '积压中心文字',
+        type: 'pie',
+        radius: ['0%', '0%'],
+        center: ['73%', layout.distributionPieCenterY],
+        label: {
+          show: true,
+          position: 'center',
+          formatter: `总积压\n${formatAmount(backlogTotal)}万元`,
+          color: THEME.text.strong,
+          fontSize: layout.compact ? 8 : 10,
+          fontWeight: 700,
+          lineHeight: layout.distributionTitleLineHeight + 6,
+          fontFamily: FONT_FAMILY
+        },
+        data: [{ name: '中心文字', value: 1 }],
+        animation: false,
+        tooltip: { show: false },
+        legend: { show: false },
+        // ✅ 关键：禁用所有交互
+        silent: true,
+        emphasis: {
+          scale: false,
+          label: { show: false }
+        }
       }
     ]
   }
@@ -422,6 +449,7 @@ function getInventoryAgingOption(data: unknown): echarts.EChartsOption {
     animation: false,
     grid: {
       ...THEME.grid,
+      left: layout.trendGridLeft,
       top: layout.trendGridTop,
       right: layout.trendGridRight,
       bottom: layout.trendGridBottom
@@ -434,7 +462,7 @@ function getInventoryAgingOption(data: unknown): echarts.EChartsOption {
     }),
     xAxis: {
       type: 'category',
-      boundaryGap: false,
+      boundaryGap: true,
       data: months,
       axisTick: { show: false },
       axisLabel: {
@@ -487,7 +515,7 @@ function getInventoryAgingOption(data: unknown): echarts.EChartsOption {
         label: {
           show: true,
           color: THEME.color.orange.line,
-          fontSize: layout.labelFontSize,
+          fontSize: layout.trendLabelFontSize,
           fontFamily: FONT_FAMILY,
           formatter(params: any) {
             return `${formatAmount(Number(params.value))}万`
@@ -529,7 +557,7 @@ function initTrendChart() {
 
 function resizeCharts() {
   distributionChart?.resize()
-  trendChart?.resize()
+  scheduleTrendResize()
 }
 
 function handleDistributionResize() {
@@ -539,6 +567,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()
@@ -632,6 +673,8 @@ onMounted(() => {
       initDistributionChart()
       distributionResizeObserver = new ResizeObserver(handleDistributionResize)
       distributionResizeObserver.observe(distributionChartRef.value!)
+      trendResizeObserver = new ResizeObserver(scheduleTrendResize)
+      trendResizeObserver.observe(trendChartRef.value!)
     })
   })
   window.addEventListener('resize', resizeCharts)
@@ -659,6 +702,12 @@ onUnmounted(() => {
   window.removeEventListener('rhkb:resize', resizeCharts)
   distributionResizeObserver?.disconnect()
   distributionResizeObserver = null
+  trendResizeObserver?.disconnect()
+  trendResizeObserver = null
+  if (trendResizeFrame !== null) {
+    cancelAnimationFrame(trendResizeFrame)
+    trendResizeFrame = null
+  }
   destroyCharts()
 })
 </script>