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>