docs: 更新饼图&图例官网例子 (#2134)

Author: tangying1027

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();

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": "自定义图例",

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)：两种布局方式。
 
 ## 使用场景
 

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

@@ -1,5 +1,5 @@
 ---
-title: Shape 组件与图形标签
+title: 图形标签
 order: 2
 ---
 

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,

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,

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>
 );