Merge pull request #20114 from adaelixir/feature-#20110

feature(axis): add showMin/MaxLine to splitline in coordinate axis
apache · Jul 18, 2024 · 8e968f4 · 8e968f4
2 parents 65f6255 + a4d803f
commit 8e968f4
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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