From 712765a02d8ac6473704b1bcd70ff905ac30e631 Mon Sep 17 00:00:00 2001
From: ader-h <1059803085@qq.com>
Date: Tue, 7 Apr 2026 19:12:53 -0700
Subject: [PATCH] fix(adaptive): add bottom padding when dataZoom exists in
 adaptive mode

---
 src/option/RectSys/adaptive.js | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/option/RectSys/adaptive.js b/src/option/RectSys/adaptive.js
index ddde71e8..d24741fc 100644
--- a/src/option/RectSys/adaptive.js
+++ b/src/option/RectSys/adaptive.js
@@ -13,6 +13,7 @@ import datazoom from '../config/datazoom';
 import xkey from '../config/xAxis/xkey';
 import xdata from '../config/xAxis/xdata';
 import mobile from '../../util/mobile';
+import { isArray } from '../../util/type';
 // 组装直角坐标系自适应
 function AdaptiveRectSys(baseOpt, iChartOpt, echartsIns, self) {
   if (baseOpt.xAxis[0].type !== 'category') return;
@@ -32,6 +33,21 @@ function AdaptiveRectSys(baseOpt, iChartOpt, echartsIns, self) {
   // 设置字体
   ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`;
   let maxItemWidth = (rect.width - (iXdata.length - 1) * 8) / iXdata.length;
+  // 计算超出最合适的datazoom end
+  let overLoneWidth = 0;
+  let overLoneIndex = 0;
+  for (let index = 0; index < iXdata.length; index++) {
+    const item = iXdata[index];
+    const width = ctx.measureText(item).width;
+    if(maxItemWidth < width){
+      overLoneWidth += width + 8;
+      overLoneIndex ++;
+    }
+  }
+  // 为了文字完全显示，计算出超长文字 + 最小间隙对 / 默认单项的宽度
+  const regularWidth = maxItemWidth * overLoneIndex + 8 * overLoneIndex
+  const widthParcent = parseFloat((regularWidth / overLoneWidth) * 100 );
+
   for (let index = 0; index < iXdata.length; index++) {
     const item = iXdata[index];
     const next = iXdata[index+1] ;
@@ -46,12 +62,17 @@ function AdaptiveRectSys(baseOpt, iChartOpt, echartsIns, self) {
           iChartOpt.dataZoom.mini = true;
           iChartOpt.dataZoom.bottom = 0;
           iChartOpt.dataZoom.start = 0;
-          iChartOpt.dataZoom.end = iChartOpt.dataZoom.end || 80;
+          iChartOpt.dataZoom.end = iChartOpt.dataZoom.end || 80; // widthParcent < 30 ? 30 : widthParcent;
           iChartOpt.dataZoom.type = isMobile ? "inside" : 'slider';
+          // 设定底部datazoom 预留高度需大于 18 --- 取自设计稿
+          if(iChartOpt.padding && isArray(iChartOpt.padding) && iChartOpt.padding[2] < 18){
+            setAdaptiveGrid(baseOpt, 18)
+          }
         }
         break;
       } else {
         iChartOpt.dataZoom.show = false;
+        setAdaptiveGrid(baseOpt, iChartOpt.padding?.[2] || 0 )
       }
     }
   }
@@ -59,5 +80,13 @@ function AdaptiveRectSys(baseOpt, iChartOpt, echartsIns, self) {
   baseOpt.dataZoom = datazoom(iChartOpt);
 }
 
+function setAdaptiveGrid(baseOpt, value){
+  if (isArray(baseOpt.grid)) {
+    baseOpt.grid[0].bottom = value;
+  } else {
+    baseOpt.grid.bottom = value;
+  }
+}
+
 export default AdaptiveRectSys;