diff --git a/src/coord/Axis.ts b/src/coord/Axis.ts
index 5a33a33973..6f354d5966 100644
--- a/src/coord/Axis.ts
+++ b/src/coord/Axis.ts
@@ -17,7 +17,7 @@
 * under the License.
 */
 
-import {each, map} from 'zrender/src/core/util';
+import {each, isArray, map} from 'zrender/src/core/util';
 import {linearMap, getPixelPrecision, round} from '../util/number';
 import {
     createAxisTicks,
@@ -126,7 +126,7 @@ class Axis {
 
         if (this.onBand && scale.type === 'ordinal') {
             extent = extent.slice() as [number, number];
-            fixExtentWithBands(extent, (scale as OrdinalScale).count());
+            fixExtentWithBands(extent, (scale as OrdinalScale).count(), isArray(this.onBand) ? this.onBand : []);
         }
 
         return linearMap(data, NORMALIZED_EXTENT, extent, clamp);
@@ -271,12 +271,12 @@ class Axis {
 
 }
 
-function fixExtentWithBands(extent: [number, number], nTick: number): void {
+function fixExtentWithBands(extent: [number, number], nTick: number, onBand: number[] = []): void {
     const size = extent[1] - extent[0];
     const len = nTick;
     const margin = size / len / 2;
-    extent[0] += margin;
-    extent[1] -= margin;
+    extent[0] += onBand[0] || margin;
+    extent[1] -= onBand[1] || margin;
 }
 
 // If axis has labels [1, 2, 3, 4]. Bands on the axis are
diff --git a/test/line-space-between.html b/test/line-space-between.html
new file mode 100644
index 0000000000..ac7a05131b
--- /dev/null
+++ b/test/line-space-between.html
@@ -0,0 +1,93 @@
+<!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/facePrint.js"></script>
+    <script src="lib/testHelper.js"></script>
+    <link rel="stylesheet" href="lib/reset.css" />
+</head>
+
+<body>
+    <div id="main0"></div>
+    <div></div>
+    <script>
+        var chart;
+        var myChart;
+
+        require([
+            'echarts'
+        ], function (echarts) {
+            var option = {
+                legend: {
+                    left: 'center',
+                    bottom: 'bottom'
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: [32, 32],
+                    data: ['2022-07-11', '2022-07-11', '2022-07-11', '2022-07-11', '2022-07-11', '2022-07-11', '2022-07-11']
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                series: [
+                    {
+                        name: 'line series 1',
+                        type: 'line',
+                        data: [28.5, 70.5, 108.4, 129.2, 144.0, 176.0, 135.6],
+                        symbolSize: 10,
+                        symbol: 'square',
+                        emphasis: {
+                            focus: 'series',
+                            lineStyle: {
+                                width: 5
+                            }
+                        }
+                    },
+                    {
+                        name: 'line series 2',
+                        type: 'line',
+                        data: [226.9, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4],
+                        symbolSize: 10,
+                        symbol: 'circle',
+                        emphasis: {
+                            focus: 'series'
+                        }
+                    }
+                ]
+            };
+
+            chart = myChart = testHelper.create(echarts, 'main0', {
+                title: [
+                    'The line should be bolder when hovering on it'
+                ],
+                option: option
+            });
+        });
+
+    </script>
+</body>
+
+</html>
