From 8be4e475c6aea3de089556d9dc4df4951f16ebed Mon Sep 17 00:00:00 2001
From: MeetzhDing <3303652975@qq.com>
Date: Tue, 9 Aug 2022 12:49:01 +0800
Subject: [PATCH 1/2] feat(axis): provide splitLine.showMinLine and
 splitLine.showMaxLine

---
 src/component/axis/CartesianAxisView.ts | 25 +++++++++
 src/coord/axisCommonTypes.ts            |  4 ++
 src/coord/axisDefault.ts                |  4 +-
 test/axis-interval.html                 | 72 +++++++++++++++++++++++--
 4 files changed, 101 insertions(+), 4 deletions(-)

diff --git a/src/component/axis/CartesianAxisView.ts b/src/component/axis/CartesianAxisView.ts
index 3cc48e3041..808029fcad 100644
--- a/src/component/axis/CartesianAxisView.ts
+++ b/src/component/axis/CartesianAxisView.ts
@@ -29,6 +29,7 @@ import CartesianAxisModel from '../../coord/cartesian/AxisModel';
 import GridModel from '../../coord/cartesian/GridModel';
 import { Payload } from '../../util/types';
 import { isIntervalOrLogScale } from '../../scale/helper';
+import IntervalScale from '../../scale/Interval';
 
 const axisBuilderAttrs = [
     'axisLine', 'axisTickLabel', 'axisName'
@@ -135,6 +136,30 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
             tickModel: splitLineModel
         });
 
+        const axisScale = axis.scale as IntervalScale;
+        if (ticksCoords.length > 2 && axisScale.getInterval) {
+            const interval = axisScale.getInterval() || null;
+
+            const showMinLine = splitLineModel.get('showMinLine');
+            if (showMinLine === false
+                || (showMinLine === 'auto'
+                    && ticksCoords[1].tickValue - ticksCoords[0].tickValue < interval
+                )
+            ) {
+                ticksCoords.shift();
+            }
+
+            const showMaxLine = splitLineModel.get('showMaxLine');
+            if (showMaxLine === false
+                || (showMaxLine === 'auto'
+                    && ticksCoords[ticksCoords.length - 1].tickValue
+                        - ticksCoords[ticksCoords.length - 2].tickValue < interval
+                )
+            ) {
+                ticksCoords.pop();
+            }
+        }
+
         const p1 = [];
         const p2 = [];
 
diff --git a/src/coord/axisCommonTypes.ts b/src/coord/axisCommonTypes.ts
index e3241cb02e..756253e24b 100644
--- a/src/coord/axisCommonTypes.ts
+++ b/src/coord/axisCommonTypes.ts
@@ -244,6 +244,10 @@ interface MinorTickOption {
 
 interface SplitLineOption {
     show?: boolean,
+    // true | false | 'auto'(true when nick tick)
+    showMinLine?: boolean | 'auto',
+    // true | false | 'auto'(true when nick tick)
+    showMaxLine?: boolean | 'auto',
     interval?: 'auto' | number | ((index:number, value: string) => boolean)
     // colors will display in turn
     lineStyle?: LineStyleOption<ZRColor | ZRColor[]>
diff --git a/src/coord/axisDefault.ts b/src/coord/axisDefault.ts
index 05bc4083ee..2b955fc242 100644
--- a/src/coord/axisDefault.ts
+++ b/src/coord/axisDefault.ts
@@ -97,7 +97,9 @@ const defaultOption: AxisBaseOption = {
             color: ['#E0E6F1'],
             width: 1,
             type: 'solid'
-        }
+        },
+        showMinLine: true,
+        showMaxLine: true
     },
     splitArea: {
         show: false,
diff --git a/test/axis-interval.html b/test/axis-interval.html
index b84c3c8ba7..cb0fac67a0 100644
--- a/test/axis-interval.html
+++ b/test/axis-interval.html
@@ -69,6 +69,7 @@ <h1>Test xAxis.axisTick.interval</h1>
     </div>
 
     <div class="chart" id="main5"></div>
+    <div class="chart" id="main6"></div>
 
 
     <script>
@@ -110,8 +111,13 @@ <h1>Test xAxis.axisTick.interval</h1>
                 xAxis: {
                     type: 'time',
                     minInterval: 3600 * 1000,
-                    maxInterval: 3600 * 1000
-                    // splitNumber: 7
+                    maxInterval: 3600 * 1000,
+                    // splitNumber: 7,
+                    splitLine: {
+                        show: true,
+                        showMinLine: 'auto',
+                        showMaxLine: 'auto'
+                    }
                 },
                 yAxis: {},
                 series: [
@@ -534,8 +540,68 @@ <h1>Test xAxis.axisTick.interval</h1>
 
 
 
+    <script>
+
+        require([
+            'echarts'
+        ], function (echarts) {
+            function func(x) {
+                x /= 10;
+                return Math.sin(x) * Math.cos(x * 2 + 1) * Math.sin(x * 3 + 2) * 50;
+            }
+            function generateData() {
+                let data = [];
+                for (let i = -20; i <= 20; i += 0.1) {
+                    data.push([i, func(i)]);
+                }
+                return data;
+            }
+            const option = {
+                animation: false,
+                grid: {
+                    top: 40,
+                    left: 50,
+                    right: 40,
+                    bottom: 50
+                },
+                xAxis: {
+                    name: 'x',
+                    min: -22,
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: 'red'
+                        },
+                        showMinLine: 'auto',
+                        showMaxLine: 'auto'
+                    }
+                },
+                yAxis: {
+                    name: 'y',
+                    max: 45,
+                    splitLine: {
+                        show: true,
+                        showMinLine: 'auto',
+                        showMaxLine: 'auto'
+                    }
+                },
+                series: [
+                    {
+                        type: 'line',
+                        showSymbol: false,
+                        clip: true,
+                        data: generateData()
+                    }
+                ]
+            };
+            testHelper.create(echarts, 'main6', {
+                title: 'xAxis (type: value) should work with showMinLine and showMaxLine',
+                option: option
+            });
+        });
 
+    </script>
 
 </body>
 
-</html>
\ No newline at end of file
+</html>

From 7d34f5c9d7e5a9bcc46a7635836668f5ef360598 Mon Sep 17 00:00:00 2001
From: MeetzhDing <3303652975@qq.com>
Date: Thu, 10 Nov 2022 00:33:00 +0800
Subject: [PATCH 2/2] feat(axis): provide splitLine.showMinLine and
 splitLine.showMaxLine

---
 src/component/axis/CartesianAxisView.ts |   6 +-
 test/axis-interval.html                 | 120 ++++++++++++++++++------
 2 files changed, 93 insertions(+), 33 deletions(-)

diff --git a/src/component/axis/CartesianAxisView.ts b/src/component/axis/CartesianAxisView.ts
index 808029fcad..8d99105aac 100644
--- a/src/component/axis/CartesianAxisView.ts
+++ b/src/component/axis/CartesianAxisView.ts
@@ -138,10 +138,10 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
 
         const axisScale = axis.scale as IntervalScale;
         if (ticksCoords.length > 2 && axisScale.getInterval) {
-            const interval = axisScale.getInterval() || null;
+            const interval = axisScale.getInterval();
 
             const showMinLine = splitLineModel.get('showMinLine');
-            if (showMinLine === false
+            if (!showMinLine
                 || (showMinLine === 'auto'
                     && ticksCoords[1].tickValue - ticksCoords[0].tickValue < interval
                 )
@@ -150,7 +150,7 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
             }
 
             const showMaxLine = splitLineModel.get('showMaxLine');
-            if (showMaxLine === false
+            if (!showMaxLine
                 || (showMaxLine === 'auto'
                     && ticksCoords[ticksCoords.length - 1].tickValue
                         - ticksCoords[ticksCoords.length - 2].tickValue < interval
diff --git a/test/axis-interval.html b/test/axis-interval.html
index cb0fac67a0..4d17c74149 100644
--- a/test/axis-interval.html
+++ b/test/axis-interval.html
@@ -69,7 +69,11 @@ <h1>Test xAxis.axisTick.interval</h1>
     </div>
 
     <div class="chart" id="main5"></div>
-    <div class="chart" id="main6"></div>
+
+    <h1>Test xAxis.splitLine.showMinLine/showMaxLine</h1>
+    <div class="chart" id="main60"></div>
+    <div class="chart" id="main61"></div>
+    <div class="chart" id="main62"></div>
 
 
     <script>
@@ -538,68 +542,124 @@ <h1>Test xAxis.axisTick.interval</h1>
 
         </script>
 
-
-
     <script>
-
-        require([
-            'echarts'
-        ], function (echarts) {
+        require(["echarts"], function (echarts) {
             function func(x) {
                 x /= 10;
-                return Math.sin(x) * Math.cos(x * 2 + 1) * Math.sin(x * 3 + 2) * 50;
+                return (
+                    Math.sin(x) *
+                    Math.cos(x * 2 + 1) *
+                    Math.sin(x * 3 + 2) *
+                    50
+                );
             }
-            function generateData() {
+
+            function generateData(start, end, interval = 1) {
                 let data = [];
-                for (let i = -20; i <= 20; i += 0.1) {
+                for (let i = start; i <= end; i += interval) {
                     data.push([i, func(i)]);
                 }
                 return data;
             }
-            const option = {
+
+            const baseOption = {
                 animation: false,
                 grid: {
                     top: 40,
                     left: 50,
                     right: 40,
-                    bottom: 50
+                    bottom: 50,
                 },
                 xAxis: {
-                    name: 'x',
-                    min: -22,
                     splitLine: {
                         show: true,
                         lineStyle: {
-                            color: 'red'
+                            color: "red",
                         },
-                        showMinLine: 'auto',
-                        showMaxLine: 'auto'
-                    }
+                        showMinLine: "auto",
+                        showMaxLine: "auto",
+                    },
                 },
                 yAxis: {
-                    name: 'y',
+                    name: "y",
                     max: 45,
                     splitLine: {
                         show: true,
-                        showMinLine: 'auto',
-                        showMaxLine: 'auto'
-                    }
+                        showMinLine: "auto",
+                        showMaxLine: "auto",
+                    },
                 },
                 series: [
                     {
-                        type: 'line',
+                        type: "line",
                         showSymbol: false,
                         clip: true,
-                        data: generateData()
-                    }
-                ]
+                        data: generateData(-20, 20, 0.1),
+                    },
+                ],
             };
-            testHelper.create(echarts, 'main6', {
-                title: 'xAxis (type: value) should work with showMinLine and showMaxLine',
-                option: option
+
+            const oneMin = 60 * 1000;
+            let startTimestamp = +new Date() - 30 * oneMin;
+            let onTheMinTimestamp = (startTimestamp =
+                Math.floor(startTimestamp / oneMin) * oneMin);
+            const chart60 = testHelper.create(echarts, "main60", {
+                title: "xAxis (type: time) should work with showMinLine/showMaxLine auto",
+                option: echarts.util.merge(
+                    {
+                        series: [
+                            {
+                                ...baseOption.series[0],
+                                data: generateData(
+                                    Math.random() > 0.5
+                                        ? startTimestamp
+                                        : onTheMinTimestamp,
+                                    +new Date(),
+                                    oneMin
+                                ),
+                            },
+                        ],
+                        xAxis: { type: "time" },
+                    },
+                    baseOption
+                ),
             });
-        });
 
+            const valueOption = echarts.util.merge(baseOption, {
+                xAxis: { min: -22 },
+            });
+            const chart61 = testHelper.create(echarts, "main61", {
+                title: "xAxis (type: value) should work with showMinLine and showMaxLine",
+                option: valueOption,
+            });
+            window.chart61 = chart61;
+            let chart61Index = 0;
+            const showMinLineValues = ["auto", true, false];
+            setInterval(() => {
+                chart61Index += 1;
+                const newVal =
+                    showMinLineValues[
+                    chart61Index % showMinLineValues.length
+                        ];
+                // console.log(`chart61: xAxis (type: value) showMinLine/showMaxLine is ${newVal}`)
+                chart61.setOption({
+                    xAxis: {
+                        splitLine: {
+                            showMinLine: newVal,
+                            showMaxLine: newVal,
+                        },
+                    },
+                });
+            }, 3000);
+
+            const inverseOption = echarts.util.merge(baseOption, {
+                xAxis: { inverse: true },
+            });
+            testHelper.create(echarts, "main62", {
+                title: "xAxis (type: value, inverse) should work with showMinLine and showMaxLine",
+                option: inverseOption,
+            });
+        });
     </script>
 
 </body>