docs: 补充自动旋转隐藏例子

site/docs/api/chart/axis.zh.md

@@ -60,6 +60,14 @@ const data = [
 
 输出数据的范围，数值类型的默认值为 [0, 1]，格式为 [min, max]，min 和 max 均为 0 至 1
 
+### labelAutoHide: boolean
+
+自动隐藏重叠的刻度值，保证均匀步长、且保留第一个和最后一个 tick 的前提下，若遮挡则进行隐藏，兜底展示不均匀步长。默认为 `false`
+
+### labelAutoRotate: boolean
+
+自动旋转刻度值，若坐标轴文本遮挡则进行最小角度旋转。默认为 `false`
+
 ### formatter: Function
 
 回调函数，用于格式化坐标轴刻度点的文本显示，会影响数据在坐标轴 axis、图例 legend、提示信息 tooltip 上的显示。

site/examples/component/axis/demo/labelAutoHide.jsx

@@ -0,0 +1,22 @@
+/** @jsx jsx */
+import { Axis, Canvas, Chart, Interval, jsx } from '@antv/f2';
+
+const context = document.getElementById('container').getContext('2d');
+
+const data = Array.from({ length: 100 }, (_, i) => ({
+  category: `Cat${i + 1}`,
+  value: ((i % 10) + 1) * 10,
+}));
+
+const { props } = (
+  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
+    <Chart data={data}>
+      <Axis field="category" labelAutoHide={true} />
+      <Axis field="value" />
+      <Interval x="category" y="value" color="#722ED1" />
+    </Chart>
+  </Canvas>
+);
+
+const canvas = new Canvas(props);
+canvas.render();

site/examples/component/axis/demo/labelAutoRotate.jsx

@@ -0,0 +1,35 @@
+/** @jsx jsx */
+import { Axis, Canvas, Chart, Interval, jsx } from '@antv/f2';
+
+const context = document.getElementById('container').getContext('2d');
+
+const data = [
+  { category: 'Category1', value: 10 },
+  { category: 'Category2', value: 15 },
+  { category: 'Category3', value: 20 },
+  { category: 'Category4', value: 25 },
+  { category: 'Category5', value: 30 },
+  { category: 'Category6', value: 35 },
+  { category: 'Category7', value: 40 },
+  { category: 'Category8', value: 45 },
+  { category: 'Category9', value: 50 },
+  { category: 'Category10', value: 55 },
+  { category: 'Category11', value: 60 },
+  { category: 'Category12', value: 65 },
+  { category: 'Category13', value: 70 },
+  { category: 'Category14', value: 75 },
+  { category: 'Category15', value: 80 },
+];
+
+const { props } = (
+  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
+    <Chart data={data}>
+      <Axis field="category" labelAutoRotate={true} />
+      <Axis field="value" />
+      <Interval x="category" y="value" color="#2FC25B" />
+    </Chart>
+  </Canvas>
+);
+
+const canvas = new Canvas(props);
+canvas.render();

site/examples/component/axis/demo/meta.json

@@ -0,0 +1,18 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "labelAutoHide.jsx",
+      "title": "文本标注",
+      "screenshot": "https://gw.alipayobjects.com/zos/finxbff/compress-tinypng/c95b75fc-d81e-4ae2-8cbf-29f4ba7bf706.png"
+    },
+    {
+      "filename": "labelAutoRotate.jsx",
+      "title": "点标注",
+      "screenshot": "https://gw.alipayobjects.com/zos/finxbff/compress-tinypng/eecfc128-cb32-4797-b41c-697823ff2336.png"
+    }
+  ]
+}

site/examples/component/axis/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Axis
+order: 3
+---

site/examples/component/axis/index.zh.md

@@ -0,0 +1,77 @@
+---
+title: 坐标轴 Axis
+order: 3
+---
+
+坐标轴（Axis）是图表中用于展示数据范围和刻度的组件，帮助用户理解数据的分布和趋势。F2 提供了灵活的坐标轴配置，支持自动旋转、自动隐藏、自定义样式等功能。
+
+## 代码演示
+
+### 自动旋转标签
+
+当坐标轴标签过长或数量过多时，可以启用自动旋转功能，避免标签重叠。
+
+```jsx
+import { jsx, Canvas, Chart, Interval, Axis } from '@antv/f2';
+
+const data = [
+  { category: 'Category1', value: 10 },
+  { category: 'Category2', value: 15 },
+  { category: 'Category3', value: 20 },
+  { category: 'Category4', value: 25 },
+  { category: 'Category5', value: 30 },
+  { category: 'Category6', value: 35 },
+  { category: 'Category7', value: 40 },
+  { category: 'Category8', value: 45 },
+  { category: 'Category9', value: 50 },
+  { category: 'Category10', value: 55 },
+  { category: 'Category11', value: 60 },
+  { category: 'Category12', value: 65 },
+  { category: 'Category13', value: 70 },
+  { category: 'Category14', value: 75 },
+  { category: 'Category15', value: 80 },
+];
+
+const { props } = (
+  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
+    <Chart data={data}>
+      <Axis field="category" labelAutoRotate={true} />
+      <Axis field="value" />
+      <Interval x="category" y="value" color="#2FC25B" />
+    </Chart>
+  </Canvas>
+);
+```
+
+### 自动隐藏标签
+
+当标签过多时，可以启用自动隐藏功能，自动隐藏部分标签以避免重叠。
+
+```jsx
+import { jsx, Canvas, Chart, Interval, Axis } from '@antv/f2';
+
+const data = Array.from({ length: 100 }, (_, i) => ({
+  category: `Cat${i + 1}`,
+  value: ((i % 10) + 1) * 10,
+}));
+
+const { props } = (
+  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
+    <Chart data={data}>
+      <Axis field="category" labelAutoHide={true} />
+      <Axis field="value" />
+      <Interval x="category" y="value" color="#722ED1" />
+    </Chart>
+  </Canvas>
+);
+```
+
+## API
+
+| 属性名          | 类型    | 默认值 | 说明                                 |
+| --------------- | ------- | ------ | ------------------------------------ |
+| field           | string  | -      | 绑定的数据字段名                     |
+| labelAutoRotate | boolean | false  | 是否启用标签自动旋转                 |
+| labelAutoHide   | boolean | false  | 是否启用标签自动隐藏                 |
+| safetyDistance  | number  | 0      | 标签之间的安全距离，用于自动旋转计算 |
+| style           | object  | -      | 自定义样式配置                       |