fix: 增加初次检测是否重叠 (#2103)

Author: tangying1027

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

@@ -27,6 +27,7 @@ export default (View) => {
     IProps extends AxisProps<TRecord> = AxisProps<TRecord>
   > extends Component<IProps & ChartChildProps, {}> {
     axisStyle: Style = {};
+    maxLabelWidth: number = 0;
     ticks: Tick[];
 
     constructor(props: IProps & ChartChildProps) {
@@ -383,25 +384,31 @@ export default (View) => {
       return false;
     }
 
-    findLabelsToHide(ticks) {
-      const { props, context } = this;
-      const { coord } = props;
+    hasOverlap(ticks) {
+      const { context } = this;
       const { measureText } = context;
 
       const tickCount = ticks.length;
 
       const { label } = this.axisStyle;
 
-      let maxLabelWidth = 0;
       for (let i = 0; i < tickCount; i++) {
         const tick = ticks[i];
         const { labelStyle = {}, text } = tick;
         const bbox = measureText(labelStyle.text || text, { ...label, ...labelStyle });
         tick.labelWidth = bbox.width;
-        maxLabelWidth = Math.max(maxLabelWidth, bbox.width);
+        this.maxLabelWidth = Math.max(this.maxLabelWidth, bbox.width);
       }
+      return this.hasOverlapAtSeq(ticks, 1);
+    }
 
-      const initialSeq = Math.floor(maxLabelWidth / (coord.width / (tickCount - 1)));
+    findLabelsToHide(ticks) {
+      const { props } = this;
+      const { coord } = props;
+
+      const tickCount = ticks.length;
+
+      const initialSeq = Math.floor(this.maxLabelWidth / (coord.width / (tickCount - 1)));
 
       const range = tickCount - 1;
       const maxSeq = Math.floor(range / 2);
@@ -432,24 +439,29 @@ export default (View) => {
       }
     }
 
-    // 主要是计算coord的布局
+    // 计算坐标轴布局并更新坐标系
     updateCoord() {
       const { props } = this;
       const { chart, labelAutoRotate = false, labelAutoHide = false } = props;
       const dimType = this._getDimType();
       const ticks = this.getTicks();
 
-      if (labelAutoRotate && dimType === 'x') {
-        this.findSuitableRotation(ticks);
-        this.ticks = ticks;
-      }
-      if (labelAutoHide && dimType === 'x') {
-        this.findLabelsToHide(ticks);
+      if ((labelAutoRotate || labelAutoHide) && dimType === 'x' && this.hasOverlap(ticks)) {
+        if (labelAutoRotate) {
+          this.findSuitableRotation(ticks);
+        }
+
+        if (labelAutoHide) {
+          this.findLabelsToHide(ticks);
+        }
+
         this.ticks = ticks;
       }
 
+      // 测量并获取布局信息
       const layout = this.measureLayout(ticks);
 
+      // 更新图表的坐标系
       chart.updateCoordFor(this, layout);
     }
 

packages/f2/test/components/axis/__image_snapshots__/__diff_output__/label-auto-test-tsx-axis-label-auto-rotate-启用标签自动旋转角度小-1-snap-diff.png

@@ -50,6 +50,39 @@ describe('Axis labelAutoRotate', () => {
     expect(context).toMatchImageSnapshot();
   });
 
+  it('启用标签自动旋转不用旋转', async () => {
+    const context = createContext('启用标签自动旋转不用旋转');
+
+    const { props } = (
+      <Canvas context={context} pixelRatio={1} width={350} height={250}>
+        <Chart
+          data={[
+            { category: '科创AI指数', value: 10 },
+            { category: '科创50指数', value: 15 },
+            { category: '沪深300指数', value: 20 },
+            { category: '芯片指数', value: 25 },
+          ]}
+          style={{
+            padding: [0, 0, 0, 0],
+          }}
+        >
+          <Axis
+            field="category"
+            labelAutoRotate={true} // 启用标签自动旋转
+          />
+          <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();
+  });
+
   it('启用标签自动旋转角度小', async () => {
     const context = createContext('启用标签自动旋转角度小');
 
@@ -60,7 +93,7 @@ describe('Axis labelAutoRotate', () => {
             { category: '科创AI指数', value: 10 },
             { category: '科创50指数', value: 15 },
             { category: '沪深300指数', value: 20 },
-            { category: '中华半导体芯片指数', value: 25 },
+            { category: '测中华半导体芯片指数', value: 25 },
           ]}
         >
           <Axis field="category" labelAutoRotate={true} />