feat(axis): Add support for showMinLine/showMaxLine to polar angle axis

Author: sebastianludwig

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) {

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;
-}
+}