chore: 调整example内容至md文档 (#2069)

Co-authored-by: xuying.xu <xuying.xu@alibaba-inc.com>

Author: tangying1027

site/examples/area/area/index.zh.md

@@ -3,7 +3,52 @@ title: 基础面积图
 order: 0
 ---
 
-- [基础面积图](./demo/area.jsx)
-- [带负值面积图](./demo/with-negative.jsx)
-- [带负值面积图（x 基线不为 0）](./demo/with-negative-not-start-on-zero.jsx)
-- [渐变填充面积图](./demo/gradient.jsx)
+面积图是一种统计图表，通过填充线条与坐标轴之间的区域来表示数据的数量。它结合了折线图和柱状图的特点，既能展示数据的变化趋势，又能强调数据的累积量和总体规模。
+
+## 代码演示
+
+### 基础示例
+
+- [基础面积图](./demo/area.jsx)：展示简单的面积图，通过填充区域表示数据量。
+
+```jsx
+import { jsx, Canvas, Chart, Area, Line, Axis, Tooltip } from '@antv/f2';
+
+const { props } = (
+  <Canvas context={context}>
+    <Chart
+      data={data}
+      scale={{
+        tem: {
+          min: 0,
+          tickCount: 5,
+        },
+        time: {
+          range: [0, 1],
+        },
+      }}
+    >
+      <Axis field="time" />
+      <Axis field="tem" />
+      <Area x="time" y="tem" />
+      <Line x="time" y="tem" />
+      <Tooltip />
+    </Chart>
+  </Canvas>
+);
+```
+
+### 进阶用法
+
+- [带负值面积图](./demo/with-negative.jsx)：处理包含负值数据的面积图。
+- [带负值面积图（x 基线不为 0）](./demo/with-negative-not-start-on-zero.jsx)：自定义基线位置的负值面积图。
+- [渐变填充面积图](./demo/gradient.jsx)：使用渐变色填充的面积图效果。
+
+## 使用场景
+
+面积图适用于以下场景：
+
+1. 展示数据随时间的变化趋势和累积量
+2. 强调数据的总体规模和量级
+3. 对比不同时期的数据差异
+4. 展示连续数据的分布情况

site/examples/area/stacked/index.zh.md

@@ -3,6 +3,83 @@ title: 层叠面积图
 order: 1
 ---
 
-- [百分比分组柱图](./demo/percent.jsx)
-- [区域图（存在空值）](./demo/area-none.jsx)
-- [层叠面积图](./demo/stacked.jsx)
+层叠面积图是一种特殊的面积图，它可以展示多个数据系列随时间或其他连续变量变化的累积效果。通过堆叠的方式，可以直观地表现出各个类别的数据在整体中的占比及其变化趋势。
+
+## 代码演示
+
+### 基础示例
+
+- [层叠面积图](./demo/stacked.jsx)：展示多个数据系列的累积变化趋势。
+
+```jsx
+import { jsx, Canvas, Chart, Area, Line, Axis, Legend } from '@antv/f2';
+
+const { props } = (
+  <Canvas context={context}>
+    <Chart
+      data={data}
+      scale={{
+        date: {
+          range: [0, 1],
+        },
+        value: {
+          min: 0,
+          nice: true,
+        },
+      }}
+    >
+      <Axis field="date" />
+      <Axis field="value" />
+      <Area x="date" y="value" color="city" adjust="stack" />
+      <Line x="date" y="value" color="city" adjust="stack" />
+      <Legend style={{ justifyContent: 'space-around' }} />
+    </Chart>
+  </Canvas>
+);
+```
+
+### 进阶用法
+
+- [百分比层叠面积图](./demo/percent.jsx)：以百分比的形式展示各个类别在总体中的占比变化。
+
+```jsx
+import { jsx, Canvas, Chart, Area, Line, Axis, Legend } from '@antv/f2';
+
+function formatterPercent(value) {
+  value = value || 0;
+  return parseInt(value * 100) + '%';
+}
+
+const { props } = (
+  <Canvas context={context}>
+    <Chart
+      data={data}
+      scale={{
+        year: {
+          range: [0, 1],
+        },
+        percent: {
+          formatter: formatterPercent,
+          alias: 'percent(%)',
+        },
+      }}
+    >
+      <Axis field="percent" />
+      <Axis field="year" />
+      <Area x="year" y="percent" color="country" adjust="stack" />
+      <Line x="year" y="percent" color="country" adjust="stack" />
+      <Legend style={{ justifyContent: 'space-around' }} />
+    </Chart>
+  </Canvas>
+);
+```
+
+- [区域图（存在空值）](./demo/area-none.jsx)：演示如何处理数据中存在空值的情况。
+
+## 使用场景
+
+层叠面积图适用于以下场景：
+
+1. 展示多个相关数据系列随时间的变化趋势
+2. 分析各个类别对总体的贡献度
+3. 比较不同类别数据的占比变化

site/examples/bar/bar/index.zh.md

@@ -1,7 +1,49 @@
 ---
-title: 基础条状图
+title: 基础柱状图
 order: 0
 ---
 
-- [基础条状图](./demo/bar.jsx)
-- [区间条状图](./demo/range.jsx)
+柱状图是一种常用的统计图表，通过水平或垂直的柱子长度来表示数据的大小。它可以直观地展示分类数据之间的比较关系，适合展示不同类别之间的数值比较。
+
+## 代码演示
+
+### 基础示例
+
+- [基础柱状图](./demo/bar.jsx)：展示简单的柱状图，通过垂直柱子展示数据大小。
+
+```jsx
+import { jsx, Canvas, Chart, Interval, Axis } from '@antv/f2';
+
+const { props } = (
+  <Canvas context={context}>
+    <Chart
+      data={data}
+      coord={{
+        transposed: true,
+      }}
+      scale={{
+        sales: {
+          tickCount: 5,
+        },
+      }}
+    >
+      <Axis field="year" />
+      <Axis field="sales" />
+      <Interval x="year" y="sales" />
+    </Chart>
+  </Canvas>
+);
+```
+
+### 进阶用法
+
+- [区间柱状图](./demo/range.jsx)：展示具有上下区间范围的数据。
+
+## 使用场景
+
+柱状图适用于以下场景：
+
+1. 展示分类数据之间的数值比较
+2. 显示时间序列数据的变化趋势
+3. 对比不同类别的数据大小
+4. 展示数据的排名和分布

site/examples/bar/dodge/index.zh.md

@@ -1,7 +1,52 @@
 ---
-title: 分组条状图
+title: 分组柱状图
 order: 1
 ---
 
-- [分组柱状图](./demo/dodge.jsx)
-- [带负值](./demo/negetive.jsx)
+分组柱状图是柱状图的一种变形，用于展示多个数据系列在不同类别下的对比关系。通过将相关的柱子分组排列，可以直观地比较同一类别下不同数据系列的数值差异。
+
+## 代码演示
+
+### 基础示例
+
+- [分组柱状图](./demo/dodge.jsx)：展示多个数据系列的分组对比。
+
+```jsx
+import { jsx, Canvas, Chart, Interval, Axis } from '@antv/f2';
+
+const { props } = (
+  <Canvas context={context}>
+    <Chart
+      data={data}
+      coord={{
+        transposed: true,
+      }}
+    >
+      <Axis field="月份" />
+      <Axis field="月均降雨量" />
+      <Interval
+        x="月份"
+        y="月均降雨量"
+        color="name"
+        adjust={{
+          type: 'dodge',
+          marginRatio: 0.05,
+        }}
+      />
+    </Chart>
+  </Canvas>
+);
+```
+
+### 进阶用法
+
+- [带负值分组柱状图](./demo/negetive.jsx)：处理包含负值数据的分组柱状图。
+
+## 使用场景
+
+分组柱状图适用于以下场景：
+
+1. 对比多个数据系列在不同类别下的表现
+2. 展示同一维度下不同组别的数据差异
+3. 分析多个变量之间的关系
+4. 时间序列数据的多维度对比

site/examples/bar/stack/index.zh.md

@@ -1,7 +1,39 @@
 ---
-title: 层叠柱状图
+title: 堆叠柱状图
 order: 2
 ---
 
-- [层叠条状图](./demo/stack.jsx)
-- [百分比层叠柱状图](./demo/percent.jsx)
+堆叠柱状图是柱状图的一种变形，通过将多个数据系列堆叠在一起形成单个柱子，可以展示各个部分对整体的贡献以及整体的总量。这种图表特别适合展示构成关系和累积效果。
+
+## 代码演示
+
+### 基础示例
+
+- [堆叠柱状图](./demo/stack.jsx)：展示多个数据系列的堆叠累积效果。
+
+```jsx
+import { jsx, Canvas, Chart, Interval, Axis } from '@antv/f2';
+
+const { props } = (
+  <Canvas context={context}>
+    <Chart data={data}>
+      <Axis field="State" />
+      <Axis field="人口数量" />
+      <Interval x="State" y="人口数量" color="年龄段" adjust="stack" />
+    </Chart>
+  </Canvas>
+);
+```
+
+### 进阶用法
+
+- [百分比堆叠柱状图](./demo/percent.jsx)：以百分比形式展示各部分在整体中的占比。
+
+## 使用场景
+
+堆叠柱状图适用于以下场景：
+
+1. 展示各个部分对整体的贡献度
+2. 分析数据的构成关系
+3. 比较不同类别的总量和构成
+4. 展示累积效果和变化趋势

site/examples/basic/index.zh.md

@@ -5,3 +5,33 @@ icon: column
 redirect_from:
   - /zh/examples
 ---
+
+基础演示展示了如何使用 F2 创建一个简单的图表。通过这个示例，您可以了解 F2 的基本用法和组件结构。
+
+## 代码演示
+
+### 基础示例
+
+- [基础演示](./demo/base.jsx)：展示如何创建一个基本的图表。
+
+```jsx
+import { jsx, Canvas, Chart, Interval, Axis } from '@antv/f2';
+
+const { props } = (
+  <Canvas context={context}>
+    <Chart data={data}>
+      <Axis field="genre" />
+      <Axis field="sold" />
+      <Interval x="genre" y="sold" />
+    </Chart>
+  </Canvas>
+);
+```
+
+## 使用场景
+
+基础演示适用于以下场景：
+
+1. 快速上手 F2 图表库
+2. 了解 F2 的基本组件和配置
+3. 作为开发更复杂图表的起点

site/examples/candlestick/candlestick/index.zh.md

@@ -1,5 +1,36 @@
 ---
-title: K 线图
+title: 蜡烛图
 order: 0
-icon: candlestick
 ---
+
+蜡烛图（K 线图）是一种专门用于展示金融数据的图表类型，通过蜡烛形状的图形来同时显示开盘价、收盘价、最高价和最低价四个关键数据。它广泛应用于股票、期货等金融数据的技术分析。
+
+## 代码演示
+
+### 基础示例
+
+- [基础蜡烛图](./demo/base.jsx)：展示标准的蜡烛图，包含开盘、收盘、最高、最低价格信息。
+
+```jsx
+import { jsx, Axis, Candlestick, Canvas, Chart, Tooltip } from '@antv/f2';
+
+const { props } = (
+  <Canvas context={context}>
+    <Chart data={data}>
+      <Axis field="time" type="timeCat" />
+      <Axis field="value" formatter={(v) => Number(v).toFixed(0)} />
+      <Candlestick x="time" y="value" />
+      <Tooltip showCrosshairs={true} yPositionType="coord" crosshairsType="xy" showXTip showYTip />
+    </Chart>
+  </Canvas>
+);
+```
+
+## 使用场景
+
+蜡烛图适用于以下场景：
+
+1. 股票价格走势分析
+2. 期货和外汇市场数据展示
+3. 金融技术分析和趋势预测
+4. 任何需要同时展示四个相关数值的场景