feat: 增加检测是否重叠安全距离属性 (#2106)

* feat: 增加检测是否重叠安全距离属性

* chore: 修复ci

Author: tangying1027

.github/workflows/mirror.yml

@@ -142,4 +142,9 @@ export interface AxisProps<
    * @default false
    */
   labelAutoHide?: boolean;
+  /**
+   * 检测是否重叠安全边距
+   * @default 2
+   */
+  safetyDistance?: number | string;
 }

packages/f2/src/components/axis/types.d.ts

@@ -366,7 +366,8 @@ export default (View) => {
     }
 
     hasOverlapAtSeq(ticks, step) {
-      const safetyMargin = 2;
+      const { px2hd } = this.context;
+      const { safetyDistance = 2 } = this.props;
       const XDistance = this._getXTicksDistance([ticks[0], ticks[step]]);
 
       let prevIdx = 0;
@@ -376,7 +377,7 @@ export default (View) => {
         const { align = 'center' } = { ...label, ...labelStyle };
 
         let minDistance =
-          (ticks[prevIdx].labelWidth + ticks[currIdx].labelWidth) / 2 + safetyMargin;
+          (ticks[prevIdx].labelWidth + ticks[currIdx].labelWidth) / 2 + px2hd(safetyDistance);
         if (prevIdx === 0 && align === 'between') {
           minDistance += ticks[prevIdx].labelWidth / 2;
         }

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

@@ -336,4 +336,63 @@ describe('Axis labelAutoRotate', () => {
     await delay(1000);
     expect(context).toMatchImageSnapshot();
   });
+
+  it('safetyDistance属性', async () => {
+    const data = [
+      { category: '2025-01-04', value: 10 },
+      { category: '2025-02-04', value: 15 },
+      { category: '2025-03-04', value: 20 },
+      { category: '2025-04-04', value: 25 },
+      { category: '2025-05-04', value: 25 },
+      { category: '2025-06-04', value: 25 },
+    ];
+    const context = createContext('safetyDistance属性');
+
+    const { props } = (
+      <Canvas context={context} pixelRatio={1} width={350} height={250}>
+        <Chart data={data}>
+          <Axis
+            field="category"
+            style={{
+              label: {
+                fontSize: '19px',
+              },
+            }}
+            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();
+
+    const { props: nextProps } = (
+      <Canvas context={context} pixelRatio={1} width={350} height={250}>
+        <Chart data={data}>
+          <Axis
+            field="category"
+            style={{
+              label: {
+                fontSize: '19px',
+              },
+            }}
+            labelAutoRotate={true}
+            safetyDistance={3}
+          />
+          <Axis field="value" />
+          <Interval x="category" y="value" color="#2FC25B" />
+        </Chart>
+      </Canvas>
+    );
+
+    await canvas.update(nextProps);
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
+  });
 });

packages/f2/test/components/axis/__image_snapshots__/label-auto-test-tsx-axis-label-auto-rotate-safety-distance属性-1-snap.png

@@ -268,7 +268,7 @@ describe('Magnifier', () => {
     const canvas = new Canvas(props);
     await canvas.render();
 
-    await delay(500);
+    await delay(1000);
     expect(context).toMatchImageSnapshot();
   });
 
@@ -302,7 +302,7 @@ describe('Magnifier', () => {
     const canvas = new Canvas(props);
     await canvas.render();
 
-    await delay(500);
+    await delay(1000);
     expect(context).toMatchImageSnapshot();
   });
   it('动态折线图', async () => {
@@ -508,7 +508,7 @@ describe('Magnifier', () => {
     );
     const canvas = new Canvas(props);
     await canvas.render();
-    await delay(500);
+    await delay(800);
     expect(context).toMatchImageSnapshot();
   });
 });