From 596c724595564f1e331ba337da6bc0296313c37c Mon Sep 17 00:00:00 2001
From: tangying1027 <370064808@qq.com>
Date: Fri, 17 Oct 2025 15:24:35 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E9=A5=BC=E5=9B=BE&?=
 =?UTF-8?q?=E5=9B=BE=E4=BE=8B=E5=AE=98=E7=BD=91=E4=BE=8B=E5=AD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/legend/demo/layoutMode.jsx      | 26 +++++++++++++++++++
 site/examples/component/legend/demo/meta.json |  5 ++++
 site/examples/component/legend/index.zh.md    | 20 ++++++++++++--
 site/examples/component/shape/index.zh.md     |  2 +-
 site/examples/pie/pie/demo/labelline-pie.jsx  |  7 ++---
 site/examples/pie/pie/demo/pie-with-label.jsx |  3 ++-
 site/examples/pie/pie/demo/selection.jsx      | 25 +++++++++---------
 7 files changed, 69 insertions(+), 19 deletions(-)
 create mode 100644 site/examples/component/legend/demo/layoutMode.jsx

diff --git a/site/examples/component/legend/demo/layoutMode.jsx b/site/examples/component/legend/demo/layoutMode.jsx
new file mode 100644
index 000000000..bb4f2cf7a
--- /dev/null
+++ b/site/examples/component/legend/demo/layoutMode.jsx
@@ -0,0 +1,26 @@
+/** @jsx jsx */
+import { Canvas, Chart, Interval, jsx, Legend } from '@antv/f2';
+
+const context = document.getElementById('container').getContext('2d');
+
+const multiLineData = [
+  { genre: '债券基金', sold: 275, a: '1' },
+  { genre: '申万宏源固守+基金指数', sold: 115, a: '1' },
+  { genre: '基金指数', sold: 120, a: '1' },
+  { genre: '股票基金', sold: 300, a: '1' },
+  { genre: '混合基金', sold: 180, a: '1' },
+  { genre: '货币基金', sold: 90, a: '1' },
+  { genre: 'QDII基金', sold: 60, a: '1' },
+];
+
+const { props } = (
+  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
+    <Chart data={multiLineData}>
+      <Legend layoutMode="adaptive" />
+      <Interval x="genre" y="sold" color="genre" />
+    </Chart>
+  </Canvas>
+);
+
+const canvas = new Canvas(props);
+canvas.render();
diff --git a/site/examples/component/legend/demo/meta.json b/site/examples/component/legend/demo/meta.json
index c202601e5..2e60900ed 100644
--- a/site/examples/component/legend/demo/meta.json
+++ b/site/examples/component/legend/demo/meta.json
@@ -4,6 +4,11 @@
     "en": "Category"
   },
   "demos": [
+    {
+      "filename": "layoutMode.jsx",
+      "title": "图例布局",
+      "screenshot": "https://gw.alipayobjects.com/zos/finxbff/compress-tinypng/f2904dad-1828-45a9-aacd-d1a3f623cddd.png"
+    },
     {
       "filename": "custom.jsx",
       "title": "自定义图例",
diff --git a/site/examples/component/legend/index.zh.md b/site/examples/component/legend/index.zh.md
index 1c5b21fa5..54e0c5e76 100644
--- a/site/examples/component/legend/index.zh.md
+++ b/site/examples/component/legend/index.zh.md
@@ -9,7 +9,7 @@ order: 1
 
 ### 基础示例
 
-- [基础图例](./demo/legend.jsx)：展示基本的图例组件。
+- 基础图例：展示基本的图例组件。
 
 ```jsx
 import { jsx, Canvas, Chart, Legend } from '@antv/f2';
@@ -29,10 +29,26 @@ const { props } = (
 );
 ```
 
+### 布局方式
+
+- [基础图例](./demo/legend.jsx)：展示基本的图例组件。
+
+```jsx
+import { jsx, Canvas, Chart, Legend } from '@antv/f2';
+
+const { props } = (
+  <Canvas context={context}>
+    <Chart data={data}>
+      <Legend position="bottom" layoutMode="adaptive" />
+    </Chart>
+  </Canvas>
+);
+```
+
 ### 进阶用法
 
 - [自定义图例](./demo/custom.jsx)：自定义样式和布局的图例。
-- [可交互图例](./demo/interactive.jsx)：支持点击交互的图例组件。
+- [可交互图例](./demo/layoutMode.jsx)：两种布局方式。
 
 ## 使用场景
 
diff --git a/site/examples/component/shape/index.zh.md b/site/examples/component/shape/index.zh.md
index 05da6df76..6e8e7ad54 100644
--- a/site/examples/component/shape/index.zh.md
+++ b/site/examples/component/shape/index.zh.md
@@ -1,5 +1,5 @@
 ---
-title: Shape 组件与图形标签
+title: 图形标签
 order: 2
 ---
 
diff --git a/site/examples/pie/pie/demo/labelline-pie.jsx b/site/examples/pie/pie/demo/labelline-pie.jsx
index aa23f8b13..394ffeae2 100644
--- a/site/examples/pie/pie/demo/labelline-pie.jsx
+++ b/site/examples/pie/pie/demo/labelline-pie.jsx
@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx, Canvas, Chart, Interval, PieLabel } from '@antv/f2';
+import { Canvas, Chart, Interval, jsx, PieLabel } from '@antv/f2';
 
 const data = [
   {
@@ -37,7 +37,7 @@ const { props } = (
       coord={{
         transposed: true,
         type: 'polar',
-        radius: 0.75,
+        radius: 0.7,
       }}
     >
       <Interval
@@ -50,7 +50,8 @@ const { props } = (
         }}
       />
       <PieLabel
-        sidePadding={40}
+        type="spider"
+        sidePadding={10}
         label1={(data, record) => {
           return {
             text: data.name,
diff --git a/site/examples/pie/pie/demo/pie-with-label.jsx b/site/examples/pie/pie/demo/pie-with-label.jsx
index e883f858e..7687afcff 100644
--- a/site/examples/pie/pie/demo/pie-with-label.jsx
+++ b/site/examples/pie/pie/demo/pie-with-label.jsx
@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx, Canvas, Chart, Interval, PieLabel, Legend } from '@antv/f2';
+import { Canvas, Chart, Interval, jsx, Legend, PieLabel } from '@antv/f2';
 
 const data = [
   {
@@ -78,6 +78,7 @@ const { props } = (
       />
       <Legend position="top" />
       <PieLabel
+        type="spider"
         label1={(data) => {
           return {
             text: data.memo,
diff --git a/site/examples/pie/pie/demo/selection.jsx b/site/examples/pie/pie/demo/selection.jsx
index f994b7a87..c139aef3c 100644
--- a/site/examples/pie/pie/demo/selection.jsx
+++ b/site/examples/pie/pie/demo/selection.jsx
@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx, Canvas, Chart, Interval, Legend } from '@antv/f2';
+import { Canvas, Chart, Interval, jsx, Legend, PieLabel } from '@antv/f2';
 
 const data = [
   {
@@ -22,16 +22,6 @@ const data = [
     percent: 0.15,
     a: '1',
   },
-  {
-    name: '峰爆',
-    percent: 0.05,
-    a: '1',
-  },
-  {
-    name: '其他',
-    percent: 0.02,
-    a: '1',
-  },
 ];
 
 const context = document.getElementById('container').getContext('2d');
@@ -40,7 +30,7 @@ const { props } = (
     <Chart
       data={data}
       coord={{
-        radius: 0.8,
+        radius: 0.6,
         transposed: true,
         type: 'polar',
       }}
@@ -60,6 +50,17 @@ const { props } = (
           },
         }}
       />
+      <PieLabel
+        type="spider"
+        label1={(data, record) => {
+          return {
+            text: data.name,
+            fill: record.color,
+          };
+        }}
+        label2=""
+      />
+      <Legend position="top" />
     </Chart>
   </Canvas>
 );