From a4d803f6c0bffc9d6b3abd385111682d7b5d7de5 Mon Sep 17 00:00:00 2001
From: hxada <huanxiqiao@qq.com>
Date: Thu, 4 Jul 2024 14:13:58 +0800
Subject: [PATCH] feature(axis): add feature to remove SplitLine on specified
 tick

---
 src/component/axis/CartesianAxisView.ts | 11 +++-
 src/coord/Axis.ts                       |  4 +-
 src/coord/axisCommonTypes.ts            |  6 +-
 src/coord/axisDefault.ts                |  2 +
 test/axis-splitLine.html                | 83 +++++++++++++++++++++++++
 5 files changed, 101 insertions(+), 5 deletions(-)
 create mode 100644 test/axis-splitLine.html

diff --git a/src/component/axis/CartesianAxisView.ts b/src/component/axis/CartesianAxisView.ts
index 3cc48e3041..abc3e8cff7 100644
--- a/src/component/axis/CartesianAxisView.ts
+++ b/src/component/axis/CartesianAxisView.ts
@@ -123,6 +123,8 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
         const splitLineModel = axisModel.getModel('splitLine');
         const lineStyleModel = splitLineModel.getModel('lineStyle');
         let lineColors = lineStyleModel.get('color');
+        const showMinLine = splitLineModel.get('showMinLine') !== false;
+        const showMaxLine = splitLineModel.get('showMaxLine') !== false;
 
         lineColors = zrUtil.isArray(lineColors) ? lineColors : [lineColors];
 
@@ -142,6 +144,12 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
         for (let i = 0; i < ticksCoords.length; i++) {
             const tickCoord = axis.toGlobalCoord(ticksCoords[i].coord);
 
+            if ((i === 0 && !showMinLine) || (i === ticksCoords.length - 1 && !showMaxLine)) {
+                continue;
+            }
+
+            const tickValue = ticksCoords[i].tickValue;
+
             if (isHorizontal) {
                 p1[0] = tickCoord;
                 p1[1] = gridRect.y;
@@ -156,9 +164,8 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
             }
 
             const colorIndex = (lineCount++) % lineColors.length;
-            const tickValue = ticksCoords[i].tickValue;
             const line = new graphic.Line({
-                anid: tickValue != null ? 'line_' + ticksCoords[i].tickValue : null,
+                anid: tickValue != null ? 'line_' + tickValue : null,
                 autoBatch: true,
                 shape: {
                     x1: p1[0],
diff --git a/src/coord/Axis.ts b/src/coord/Axis.ts
index 5a33a33973..bdaca28735 100644
--- a/src/coord/Axis.ts
+++ b/src/coord/Axis.ts
@@ -302,7 +302,7 @@ function fixOnBandTicksCoords(
     let diffSize;
     if (ticksLen === 1) {
         ticksCoords[0].coord = axisExtent[0];
-        last = ticksCoords[1] = {coord: axisExtent[1]};
+        last = ticksCoords[1] = {coord: axisExtent[1], tickValue: ticksCoords[0].tickValue};
     }
     else {
         const crossLen = ticksCoords[ticksLen - 1].tickValue - ticksCoords[0].tickValue;
@@ -315,7 +315,7 @@ function fixOnBandTicksCoords(
         const dataExtent = axis.scale.getExtent();
         diffSize = 1 + dataExtent[1] - ticksCoords[ticksLen - 1].tickValue;
 
-        last = {coord: ticksCoords[ticksLen - 1].coord + shift * diffSize};
+        last = {coord: ticksCoords[ticksLen - 1].coord + shift * diffSize, tickValue: dataExtent[1] + 1};
 
         ticksCoords.push(last);
     }
diff --git a/src/coord/axisCommonTypes.ts b/src/coord/axisCommonTypes.ts
index 5ebdab3a1c..fe4e4fc6f6 100644
--- a/src/coord/axisCommonTypes.ts
+++ b/src/coord/axisCommonTypes.ts
@@ -258,7 +258,11 @@ interface MinorTickOption {
 
 interface SplitLineOption {
     show?: boolean,
-    interval?: 'auto' | number | ((index:number, value: string) => boolean)
+    interval?: 'auto' | number | ((index:number, value: string) => boolean),
+    // true | false
+    showMinLine?: boolean,
+    // true | false
+    showMaxLine?: boolean,
     // colors will display in turn
     lineStyle?: LineStyleOption<ZRColor | ZRColor[]>
 }
diff --git a/src/coord/axisDefault.ts b/src/coord/axisDefault.ts
index 4d2c6674b3..ae589f365a 100644
--- a/src/coord/axisDefault.ts
+++ b/src/coord/axisDefault.ts
@@ -93,6 +93,8 @@ const defaultOption: AxisBaseOption = {
     },
     splitLine: {
         show: true,
+        showMinLine: true,
+        showMaxLine: true,
         lineStyle: {
             color: ['#E0E6F1'],
             width: 1,
diff --git a/test/axis-splitLine.html b/test/axis-splitLine.html
new file mode 100644
index 0000000000..2dfd1a320d
--- /dev/null
+++ b/test/axis-splitLine.html
@@ -0,0 +1,83 @@
+<!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>
+        <div id="main"></div>
+
+        <script>
+            require(['echarts'], function (echarts) {
+                var chartDom = document.getElementById('main');
+                var myChart = echarts.init(chartDom);
+                var option;
+
+                option = {
+                    xAxis: {
+                    type: 'category',
+                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                    splitLine: {
+                        show: true,
+                        showMinLine: false, // do not show the first splitLine
+                        showMaxLine: false, // do not show the last splitLine
+                        lineStyle: {
+                            color: 'black',
+                            width:3
+                        }
+                    },
+                },
+                    yAxis: {
+                    type: 'value',
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: 'rgba(255,100,0,0.8)',
+                            width: 12
+                        }
+                    }
+                },
+                    series: [
+                        {
+                        data: [150, 230, 224, 218, 135, 147, 260],
+                        type: 'line'
+                        }
+                    ]
+                };
+
+                option && myChart.setOption(option);
+            })
+        </script>
+
+    </body>
+</html>
+