fix: auto-rotate当label为function失效 (#2099)

Author: tangying1027

packages/f2/src/components/axis/withAxis.tsx

@@ -241,7 +241,7 @@ export default (View) => {
       });
 
       let labelRightEdge = lastTickPoint.x;
-      const align = label.align || 'center';
+      const { align = 'center' } = { ...label, ...labelStyle };
 
       if (align === 'center') {
         labelRightEdge += tickBBox.width / 2;
@@ -355,9 +355,12 @@ export default (View) => {
       const ceiledAngle = Math.ceil(theoreticalAngle);
 
       if (ceiledAngle > 0 && ceiledAngle <= 90) {
-        this.axisStyle.label.align = 'start';
-        this.axisStyle.label.transform = `rotate(${ceiledAngle}deg)`;
-        this.axisStyle.label.transformOrigin = `0 50%`;
+        ticks.forEach((tick) => {
+          tick.labelStyle = tick.labelStyle || {};
+          tick.labelStyle.align = 'start';
+          tick.labelStyle.transform = `rotate(${ceiledAngle}deg)`;
+          tick.labelStyle.transformOrigin = '0 50%';
+        });
       }
     }
 

packages/f2/test/components/axis/__image_snapshots__/label-auto-test-tsx-axis-label-auto-rotate-启用标签自动旋转（label-auto-rotate-true）但label为函数-1-snap.png

@@ -172,4 +172,41 @@ describe('Axis labelAutoRotate', () => {
     await delay(1000);
     expect(context).toMatchImageSnapshot();
   });
+
+  it('启用标签自动旋转（labelAutoRotate=true）但label为函数', async () => {
+    const context = createContext('启用标签自动旋转但label为函数');
+
+    const { props } = (
+      <Canvas context={context} pixelRatio={1} width={350} height={250}>
+        <Chart
+          data={overlappingData}
+          style={{
+            padding: [0, 0, 0, 0],
+          }}
+        >
+          <Axis
+            field="category"
+            labelAutoRotate={true}
+            style={{
+              label: (text, index, ticks) => {
+                return {
+                  textAlign: 'center',
+                  fill: index % 2 === 0 ? '#1890FF' : '#333333',
+                  fontWeight: 'bold',
+                };
+              },
+            }}
+          />
+          <Axis field="value" />
+          <Interval x="category" y="value" color="#2FC25B" />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
+  });
 });