fix(axis): Show min/max split line for all axis types

src/component/axis/AngleAxisView.ts

@@ -138,23 +138,32 @@ interface AngleAxisElementBuilder {
 const angelAxisElementsBuilders: Record<typeof elementList[number], AngleAxisElementBuilder> = {
 
     axisLine(group, angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
+        const axisLineModel = angleAxisModel.getModel('axisLine');
         const lineStyleModel = angleAxisModel.getModel(['axisLine', 'lineStyle']);
         const angleAxis = polar.getAngleAxis();
+        const radiusAxis = polar.getRadiusAxis();
         const RADIAN = Math.PI / 180;
         const angleExtent = angleAxis.getExtent();
-
-        // extent id of the axis radius (r0 and r)
-        const rId = getRadiusIdx(polar);
-        const r0Id = rId ? 0 : 1;
-        let shape;
+        const showMinLine = axisLineModel.get('showMinLine') !== false;
+        const showMaxLine = axisLineModel.get('showMaxLine') !== false;
         const shapeType = Math.abs(angleExtent[1] - angleExtent[0]) === 360 ? 'Circle' : 'Arc';
+        const radiusDataExtent = radiusAxis.scale.getExtent();
+        const minRadius = radiusAxis.dataToCoord(radiusDataExtent[0]);
+        const maxRadius = radiusAxis.dataToCoord(radiusDataExtent[1]);
 
-        if (radiusExtent[r0Id] === 0) {
-            shape = new graphic[shapeType]({
+        if (!showMinLine && !showMaxLine) {
+            return;
+        }
+
+        const addBoundaryLine = (radius: number) => {
+            if (!isFinite(radius)) {
+                return;
+            }
+            const shape = new graphic[shapeType]({
                 shape: {
                     cx: polar.cx,
                     cy: polar.cy,
-                    r: radiusExtent[rId],
+                    r: Math.max(radius, 0),
                     startAngle: -angleExtent[0] * RADIAN,
                     endAngle: -angleExtent[1] * RADIAN,
                     clockwise: angleAxis.inverse
@@ -163,22 +172,21 @@ const angelAxisElementsBuilders: Record<typeof elementList[number], AngleAxisEle
                 z2: 1,
                 silent: true
             });
+            shape.style.fill = null;
+            group.add(shape);
+        };
+
+        if (Math.abs(minRadius - maxRadius) < 1e-4) {
+            addBoundaryLine(minRadius);
+            return;
         }
-        else {
-            shape = new graphic.Ring({
-                shape: {
-                    cx: polar.cx,
-                    cy: polar.cy,
-                    r: radiusExtent[rId],
-                    r0: radiusExtent[r0Id]
-                },
-                style: lineStyleModel.getLineStyle(),
-                z2: 1,
-                silent: true
-            });
+
+        if (showMinLine) {
+            addBoundaryLine(minRadius);
+        }
+        if (showMaxLine) {
+            addBoundaryLine(maxRadius);
         }
-        shape.style.fill = null;
-        group.add(shape);
     },
 
     axisTick(group, angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
@@ -311,13 +319,18 @@ const angelAxisElementsBuilders: Record<typeof elementList[number], AngleAxisEle
         const splitLineModel = angleAxisModel.getModel('splitLine');
         const lineStyleModel = splitLineModel.getModel('lineStyle');
         let lineColors = lineStyleModel.get('color');
+        const showMinLine = splitLineModel.get('showMinLine') !== false;
+        const showMaxLine = splitLineModel.get('showMaxLine') !== false;
         let lineCount = 0;
 
         lineColors = lineColors instanceof Array ? lineColors : [lineColors];
 
         const splitLines: graphic.Line[][] = [];
 
         for (let i = 0; i < ticksAngles.length; i++) {
+            if ((i === 0 && !showMinLine) || (i === ticksAngles.length - 1 && !showMaxLine)) {
+                continue;
+            }
             const colorIndex = (lineCount++) % lineColors.length;
             splitLines[colorIndex] = splitLines[colorIndex] || [];
             splitLines[colorIndex].push(new graphic.Line({

src/component/axis/RadiusAxisView.ts

@@ -101,6 +101,8 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
         const splitLineModel = radiusAxisModel.getModel('splitLine');
         const lineStyleModel = splitLineModel.getModel('lineStyle');
         let lineColors = lineStyleModel.get('color');
+        const showMinLine = splitLineModel.get('showMinLine') !== false;
+        const showMaxLine = splitLineModel.get('showMaxLine') !== false;
         let lineCount = 0;
 
         const angleAxis = polar.getAngleAxis();
@@ -113,6 +115,9 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
         const splitLines: graphic.Circle[][] = [];
 
         for (let i = 0; i < ticksCoords.length; i++) {
+            if ((i === 0 && !showMinLine) || (i === ticksCoords.length - 1 && !showMaxLine)) {
+                continue;
+            }
             const colorIndex = (lineCount++) % lineColors.length;
             splitLines[colorIndex] = splitLines[colorIndex] || [];
             splitLines[colorIndex].push(new graphic[shapeType]({

src/component/axis/SingleAxisView.ts

@@ -96,6 +96,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 = lineColors instanceof Array ? lineColors : [lineColors];
         const lineWidth = lineStyleModel.get('width');
 
@@ -115,6 +117,9 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
         const p2 = [];
 
         for (let i = 0; i < ticksCoords.length; ++i) {
+            if ((i === 0 && !showMinLine) || (i === ticksCoords.length - 1 && !showMaxLine)) {
+                continue;
+            }
             const tickCoord = axis.toGlobalCoord(ticksCoords[i].coord);
             if (isHorizontal) {
                 p1[0] = tickCoord;

src/component/polar/install.ts

@@ -44,6 +44,11 @@ const angleAxisExtraOption: AngleAxisOption = {
 
     splitNumber: 12,
 
+    axisLine: {
+        showMinLine: true,
+        showMaxLine: true
+    },
+
     axisLabel: {
         rotate: 0
     }
@@ -77,4 +82,4 @@ export function install(registers: EChartsExtensionInstallRegisters) {
     registers.registerComponentView(RadiusAxisView);
 
     registers.registerLayout(curry(barLayoutPolar, 'bar'));
-}
+}

src/coord/polar/AxisModel.ts

@@ -42,7 +42,11 @@ export type AngleAxisOption = AxisBaseOption & {
     endAngle?: number;
     clockwise?: boolean;
 
-    axisLabel?: AxisBaseOption['axisLabel']
+    axisLabel?: AxisBaseOption['axisLabel'];
+    axisLine?: NonNullable<AxisBaseOption['axisLine']> & {
+        showMinLine?: boolean;
+        showMaxLine?: boolean;
+    }
 };
 
 export type RadiusAxisOption = AxisBaseOption & {
@@ -86,4 +90,4 @@ export class RadiusAxisModel extends PolarAxisModel<RadiusAxisOption> {
     static type = 'radiusAxis';
     type = RadiusAxisModel.type;
     axis: RadiusAxis;
-}
+}