From 5b7e92c0c05bcd959e18d37bdb0611bdcb08bf0d Mon Sep 17 00:00:00 2001
From: sz-p <sz_p@outlook.com>
Date: Wed, 15 Jan 2025 17:28:21 +0800
Subject: [PATCH 1/2] fix(dataZoom): data zoom length should take the handle
 icon width into account #20686

---
 src/component/dataZoom/SliderZoomView.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/component/dataZoom/SliderZoomView.ts b/src/component/dataZoom/SliderZoomView.ts
index 4c1a66e83a..8943658e8d 100644
--- a/src/component/dataZoom/SliderZoomView.ts
+++ b/src/component/dataZoom/SliderZoomView.ts
@@ -292,8 +292,14 @@ class SliderZoomView extends DataZoomView {
 
         // Position barGroup
         const rect = thisGroup.getBoundingRect([sliderGroup]);
-        thisGroup.x = location.x - rect.x;
-        thisGroup.y = location.y - rect.y;
+        // there is only scaleX on sliderGroup.
+        thisGroup.scaleX = this._size[0] / rect.width;
+        // scaleY on sliderGroup is a bad idea.
+        // Because of the moveHandleSize maybe greater than zoom bar height.
+        // clip is better than scale hard.
+        const scaleY = this._size[1] / rect.height;
+        thisGroup.x = location.x - rect.x * thisGroup.scaleX;
+        thisGroup.y = location.y - rect.y * scaleY;
         thisGroup.markRedraw();
     }
 

From 0ab65640245c0a9e714f5fca741593783db34a34 Mon Sep 17 00:00:00 2001
From: sz-p <sz_p@outlook.com>
Date: Wed, 15 Jan 2025 17:28:34 +0800
Subject: [PATCH 2/2] test(dataZoom): data zoom length should take the handle
 icon width into account #20686

---
 test/dataZoom-clip.html | 51 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 50 insertions(+), 1 deletion(-)

diff --git a/test/dataZoom-clip.html b/test/dataZoom-clip.html
index b360ee9716..8a120739f9 100644
--- a/test/dataZoom-clip.html
+++ b/test/dataZoom-clip.html
@@ -39,6 +39,7 @@
 
         <div id="main0"></div>
         <div id="main1"></div>
+        <div id="main2"></div>
         <div class="chart" id="b"></div>
 
 
@@ -290,6 +291,54 @@
 
 
 
+        <script>
+
+            require(['echarts'], function (echarts) {
+                var option = {
+                    color: ["#3398DB"],
+                    tooltip: {
+                        trigger: "axis"
+                    },
+                    grid: {
+                        left: 0,
+                        right: 0
+                    },
+                    xAxis: {
+                        data: ["2015-02-23", "2015-02-24"]
+                    },
+                    yAxis: {
+                        show: false,
+                    },
+                    dataZoom: [{
+                        showDetail: false,
+                        left: 0,
+                        right: 0,
+                        moveHandleStyle: {
+                            color: "rgba(215, 59, 59, 1)"
+                        },
+                        fillerColor:"rgba(0,0,0,0)",
+                        moveHandleSize: 7,
+                        handleSize: "100%",
+                        borderRadius:100,
+                        borderWidth:0
+                    }],
+                    series: {
+                        name: "Beijing AQI",
+                        type: "bar",
+                        data: [86, 207]
+                    }
+                };
+
+                var chart = testHelper.create(echarts, 'main2', {
+                    title: [
+                        'HandleIcon and dataZoomBar should be complete on default with **dataZoom.left = 0 and dataZoom.right = 0**',
+                    ],
+                    option: option
+                });
+            });
+
+        </script>
+
 
 
 
@@ -298,4 +347,4 @@
 
 
     </body>
-</html>
\ No newline at end of file
+</html>