From 369cb035030124e0c1fe2c74a882781c0e90a556 Mon Sep 17 00:00:00 2001
From: fandi-1205 <141796004+fandi-1205@users.noreply.github.com>
Date: Fri, 28 Jun 2024 15:29:41 +0800
Subject: [PATCH] fix(custom): grid area clipping in custom series #19993
 (#20043)

---
 .../helper/createClipPathFromCoordSys.ts      |   2 +-
 test/clip-custom.html                         | 127 ++++++++++++++++++
 2 files changed, 128 insertions(+), 1 deletion(-)
 create mode 100644 test/clip-custom.html
diff --git a/src/chart/helper/createClipPathFromCoordSys.ts b/src/chart/helper/createClipPathFromCoordSys.ts
index 74ec7f8e90..191ac95c62 100644
--- a/src/chart/helper/createClipPathFromCoordSys.ts
+++ b/src/chart/helper/createClipPathFromCoordSys.ts
@@ -43,7 +43,7 @@ function createGridClipPath(
     let width = rect.width;
     let height = rect.height;
 
-    const lineWidth = seriesModel.get(['lineStyle', 'width']) || 2;
+    const lineWidth = seriesModel.get(['lineStyle', 'width']) || 0;
     // Expand the clip path a bit to avoid the border is clipped and looks thinner
     x -= lineWidth / 2;
     y -= lineWidth / 2;
diff --git a/test/clip-custom.html b/test/clip-custom.html
new file mode 100644
index 0000000000..3e32aab73a
--- /dev/null
+++ b/test/clip-custom.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="lib/simpleRequire.js"></script>
+    <script src="lib/config.js"></script>
+    <script src="lib/jquery.min.js"></script>
+    <script src="lib/facePrint.js"></script>
+    <script src="lib/testHelper.js"></script>
+    <!-- <script src="ut/lib/canteen.js"></script> -->
+    <link rel="stylesheet" href="lib/reset.css" />
+</head>
+
+<body>
+    <style>
+    </style>
+
+
+
+    <div id="main0"></div>
+
+
+
+
+
+    <script>
+        require([
+            'echarts',
+            // 'map/js/china',
+            // './data/nutrients.json'
+        ], function (echarts) {
+            var option;
+
+            const data = [
+                [-10, 100, 20, 'A'],
+            ];
+
+            option = {
+                xAxis: {
+                    min: 0,
+                    max: 10,
+                    axisLine: {
+                        lineStyle: {
+                            width: '1',
+                        },
+                    },
+
+
+                },
+                yAxis: {
+                    scale: true,
+                    min: 0,
+                    max: 10,
+                    axisLine: {
+                        lineStyle: {
+                            width: '1',
+                        },
+                    },
+                },
+                series: [
+                    {
+                        type: 'custom',
+                        clip: true, // CLIP = true
+                        renderItem: function (params, api) {
+                            var yValue = api.value(2);
+                            var start = api.coord([api.value(0), yValue]);
+                            var size = api.size([api.value(1) - api.value(0), yValue]);
+                            var style = api.style();
+                            return {
+                                type: 'rect',
+                                shape: {
+                                    x: start[0],
+                                    y: start[1],
+                                    width: size[0],
+                                    height: size[1],
+                                },
+                                style: {
+                                    fill: '#4f81bd',
+                                    opacity: 0.5
+                                }
+                            };
+                        },
+                        data: data
+                    }
+                ]
+            };
+
+
+
+            var chart = testHelper.create(echarts, 'main0', {
+                title: [
+                    'Clipping in custom series off by 1 pixel',
+                    'In the case of customization, modify the range of the clipping path',
+
+                ],
+                option: option
+
+            });
+        });
+    </script>
+
+
+</body>
+
+</html>
\ No newline at end of file
