fix(2365): 修复极坐标系圆弧坐标轴文本不响应坐标系 rotate 的问题 (#2424)

src/util/axis.ts

@@ -3,6 +3,7 @@ import { DIRECTION } from '../constant';
 import { Coordinate, Scale } from '../dependents';
 import { AxisCfg, AxisOption, Point, Region } from '../interface';
 import { getName } from './scale';
+import { vec2 } from '@antv/matrix-util';
 
 /**
  * @ignore
@@ -180,7 +181,24 @@ export function getAxisThemeCfg(theme: object, direction: string): object {
  */
 export function getCircleAxisCenterRadius(coordinate: Coordinate) {
   // @ts-ignore
-  const { startAngle, endAngle, circleCenter: center, polarRadius: radius } = coordinate;
+  const { x, y, circleCenter: center } = coordinate;
+  const isReflectY = y.start > y.end;
+  const start = coordinate.isTransposed ?
+    coordinate.convert({
+      x: isReflectY ? 0 : 1,
+      y: 0,
+    }) :
+    coordinate.convert({
+      x: 0,
+      y: isReflectY ? 0 : 1,
+    });
+
+  const startVector = [start.x - center.x, start.y - center.y];
+  const normalVector = [1, 0];
+  const startAngle = (start.y > center.y) ? vec2.angle(startVector, normalVector) : vec2.angle(startVector, normalVector) * -1;
+  const endAngle = startAngle + (x.end - x.start);
+  const radius = Math.sqrt((start.x - center.x) ** 2 + (start.y - center.y) ** 2);
+
   return {
     center,
     radius,

tests/bugs/2365-spec.ts

@@ -0,0 +1,80 @@
+import { Chart } from '../../src';
+import { createDiv } from '../util/dom';
+
+describe('2365', () => {
+  it('2365', () => {
+    const data = [
+      { item: 'Design', user: 'a', score: 70 },
+      { item: 'Design', user: 'b', score: 30 },
+      { item: 'Development', user: 'a', score: 60 },
+      { item: 'Development', user: 'b', score: 70 },
+      { item: 'Marketing', user: 'a', score: 50 },
+      { item: 'Marketing', user: 'b', score: 60 },
+      { item: 'Users', user: 'a', score: 40 },
+      { item: 'Users', user: 'b', score: 50 },
+      { item: 'Test', user: 'a', score: 60 },
+      { item: 'Test', user: 'b', score: 70 },
+      { item: 'Language', user: 'a', score: 70 },
+      { item: 'Language', user: 'b', score: 50 },
+      { item: 'Technology', user: 'a', score: 50 },
+      { item: 'Technology', user: 'b', score: 40 },
+      { item: 'Support', user: 'a', score: 30 },
+      { item: 'Support', user: 'b', score: 40 },
+      { item: 'Sales', user: 'a', score: 60 },
+      { item: 'Sales', user: 'b', score: 40 },
+      { item: 'UX', user: 'a', score: 50 },
+      { item: 'UX', user: 'b', score: 60 },
+    ];
+    const chart = new Chart({
+      container: createDiv(),
+      width: 400,
+      height: 300,
+    });
+    chart.data(data);
+    chart.scale('score', {
+      min: 0,
+      max: 80,
+    });
+    chart.coordinate('polar', {
+      radius: 0.8,
+    }).rotate(Math.PI / 3);
+    chart.tooltip(false);
+    chart.axis('item', {
+      line: null,
+      tickLine: null,
+      grid: {
+        line: {
+          style: {
+            lineDash: null,
+          },
+        },
+      },
+    });
+    chart.axis('score', {
+      line: null,
+      tickLine: null,
+      grid: {
+        line: {
+          type: 'line',
+          style: {
+            lineDash: null,
+          },
+        },
+      },
+    });
+
+    chart
+      .line()
+      .position('item*score')
+      .color('user')
+      .size(2);
+
+    chart.render();
+
+    const axisComponents = chart.getComponents().filter(item => item.type === 'axis');
+    const circleAxis = axisComponents[0].component;
+
+    expect(circleAxis.get('startAngle')).toBeCloseTo(-0.5235987755982991);
+    expect(circleAxis.get('endAngle')).toBeCloseTo(5.759586531581287);
+  });
+});