Merge pull request #19099 from yassilah/feat-polar-endAngle

feat(polar): allow setting `angleAxis.endAngle`
apache · Sep 27, 2023 · d08664f · d08664f
2 parents 80b251f + 691d9ee
commit d08664f
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 6 deletions.
diff --git a/src/component/axis/AngleAxisView.ts b/src/component/axis/AngleAxisView.ts
@@ -138,18 +138,25 @@ const angelAxisElementsBuilders: Record<typeof elementList[number], AngleAxisEle
 
     axisLine(group, angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
         const lineStyleModel = angleAxisModel.getModel(['axisLine', 'lineStyle']);
+        const angleAxis = polar.getAngleAxis();
+        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 shapeType = Math.abs(angleExtent[1] - angleExtent[0]) === 360 ? 'Circle' : 'Arc';
+
         if (radiusExtent[r0Id] === 0) {
-            shape = new graphic.Circle({
+            shape = new graphic[shapeType]({
                 shape: {
                     cx: polar.cx,
                     cy: polar.cy,
-                    r: radiusExtent[rId]
+                    r: radiusExtent[rId],
+                    startAngle: -angleExtent[0] * RADIAN,
+                    endAngle: -angleExtent[1] * RADIAN,
+                    clockwise: angleAxis.inverse
                 },
                 style: lineStyleModel.getLineStyle(),
                 z2: 1,

diff --git a/src/component/axis/RadiusAxisView.ts b/src/component/axis/RadiusAxisView.ts
@@ -105,19 +105,27 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
         let lineColors = lineStyleModel.get('color');
         let lineCount = 0;
 
+        const angleAxis = polar.getAngleAxis();
+        const RADIAN = Math.PI / 180;
+        const angleExtent = angleAxis.getExtent();
+        const shapeType = Math.abs(angleExtent[1] - angleExtent[0]) === 360 ? 'Circle' : 'Arc';
+
         lineColors = lineColors instanceof Array ? lineColors : [lineColors];
 
         const splitLines: graphic.Circle[][] = [];
 
         for (let i = 0; i < ticksCoords.length; i++) {
             const colorIndex = (lineCount++) % lineColors.length;
             splitLines[colorIndex] = splitLines[colorIndex] || [];
-            splitLines[colorIndex].push(new graphic.Circle({
+            splitLines[colorIndex].push(new graphic[shapeType]({
                 shape: {
                     cx: polar.cx,
                     cy: polar.cy,
                     // ensure circle radius >= 0
-                    r: Math.max(ticksCoords[i].coord, 0)
+                    r: Math.max(ticksCoords[i].coord, 0),
+                    startAngle: -angleExtent[0] * RADIAN,
+                    endAngle: -angleExtent[1] * RADIAN,
+                    clockwise: angleAxis.inverse
                 }
             }));
         }

diff --git a/src/coord/polar/AxisModel.ts b/src/coord/polar/AxisModel.ts
@@ -39,6 +39,7 @@ export type AngleAxisOption = AxisBaseOption & {
     polarId?: string;
 
     startAngle?: number;
+    endAngle?: number;
     clockwise?: boolean;
 
     axisLabel?: AxisBaseOption['axisLabel']

diff --git a/src/coord/polar/polarCreator.ts b/src/coord/polar/polarCreator.ts
@@ -124,7 +124,8 @@ function setAxis(axis: RadiusAxis | AngleAxis, axisModel: PolarAxisModel) {
     if (isAngleAxisModel(axisModel)) {
         axis.inverse = axis.inverse !== axisModel.get('clockwise');
         const startAngle = axisModel.get('startAngle');
-        axis.setExtent(startAngle, startAngle + (axis.inverse ? -360 : 360));
+        const endAngle = axisModel.get('endAngle') ?? (startAngle + (axis.inverse ? -360 : 360));
+        axis.setExtent(startAngle, endAngle);
     }
 
     // Inject axis instance

diff --git a/test/polar-end-angle.html b/test/polar-end-angle.html