docs: 统一补充通用 API 和设计规范

__tests__/unit/plots/liquid/liquid-style-spec.ts

@@ -34,6 +34,6 @@ describe('liquid', () => {
 
     // G2 chart.clear 的时候，geometry 销毁了，但是 container 还保留的，内存泄露。
     // @ts-ignore
-    expect(liquid.chart.middleGroup.getChildren()[1].getChildren()[0].getChildren()[0].attr('fill')).toBe('red'); // wave path
+    expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[0].getChildren()[0].attr('fill')).toBe('red'); // wave path
   });
 });

examples/area/basic/API.en.md

@@ -0,0 +1,55 @@
+---
+title: API
+---
+
+## 配置属性
+
+### 图表容器
+
+`markdown:common/chart-options.en.md`
+
+### 数据映射
+
+#### data 📌
+
+**必选**, _array object_
+
+功能描述： 设置图表数据源
+
+默认配置： 无
+
+数据源为对象集合，例如：`[{ time: '1991'，value: 20 }, { time: '1992'，value: 20 }]`。
+
+`markdown:common/xy-field.en.md`
+
+`markdown:common/meta.en.md`
+
+### 图形样式
+
+`markdown:common/color.en.md`
+
+### tooltip
+
+`markdown:common/tooltip.en.md`
+
+### axis
+
+xAxis、yAxis 配置相同。
+
+`markdown:common/axis.en.md`
+
+### legend
+
+`markdown:common/legend.en.md`
+
+### theme
+
+`markdown:common/theme.en.md`
+
+### 事件
+
+`markdown:common/events.en.md`
+
+#### 图表方法
+
+`markdown:common/chart-methods.en.md`

examples/area/basic/API.zh.md

@@ -0,0 +1,55 @@
+---
+title: API
+---
+
+## 配置属性
+
+### 图表容器
+
+`markdown:common/chart-options.zh.md`
+
+### 数据映射
+
+#### data 📌
+
+**必选**, _array object_
+
+功能描述： 设置图表数据源
+
+默认配置： 无
+
+数据源为对象集合，例如：`[{ time: '1991'，value: 20 }, { time: '1992'，value: 20 }]`。
+
+`markdown:common/xy-field.zh.md`
+
+`markdown:common/meta.zh.md`
+
+### 图形样式
+
+`markdown:common/color.zh.md`
+
+### tooltip
+
+`markdown:common/tooltip.zh.md`
+
+### axis
+
+xAxis、yAxis 配置相同。
+
+`markdown:common/axis.zh.md`
+
+### legend
+
+`markdown:common/legend.zh.md`
+
+### theme
+
+`markdown:common/theme.zh.md`
+
+### 事件
+
+`markdown:common/events.zh.md`
+
+#### 图表方法
+
+`markdown:common/chart-methods.zh.md`

examples/area/basic/design.en.md

@@ -2,4 +2,30 @@
 title: 设计规范
 ---
 
-设计规范
+## 何时使用
+
+面积图可用来展示连续性数据，可很好地表示趋势、累积、减少以及变化。
+堆叠面积图更擅于展示部分和整体之间的关系或趋势，而不是传达特定的值。
+
+## 数据类型
+
+| 图表类型         | 面积图                           |
+| ---------------- | -------------------------------- |
+| 适合的数据       | 两个连续字段数据                 |
+| 功能             | 观察数据变化`趋势`               |
+| 数据与图形的映射 | 两个连续字段分别映射到横轴和纵轴 |
+| 适合的数据条数   | 大于两条                         |
+
+## 用法建议
+
+<img alt="design" src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*apZASYZEX68AAAAAAAAAAABkARQnAQ" width="1000">
+
+## 元素
+
+<img alt="design" src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*ENU-Q78K3w8AAAAAAAAAAABkARQnAQ" width="800">
+
+- X 轴：通常对应连续数据，值为时间，调用连续数据 X 轴。
+- Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。
+- 图例：通常出现在多条折线图中，用来区分不同折线代表的数据含义。
+- 标签：用来解释数据点的值。
+- 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。

examples/area/basic/design.zh.md

@@ -2,4 +2,30 @@
 title: 设计规范
 ---
 
-设计规范
+## 何时使用
+
+面积图可用来展示连续性数据，可很好地表示趋势、累积、减少以及变化。
+堆叠面积图更擅于展示部分和整体之间的关系或趋势，而不是传达特定的值。
+
+## 数据类型
+
+| 图表类型         | 面积图                           |
+| ---------------- | -------------------------------- |
+| 适合的数据       | 两个连续字段数据                 |
+| 功能             | 观察数据变化`趋势`               |
+| 数据与图形的映射 | 两个连续字段分别映射到横轴和纵轴 |
+| 适合的数据条数   | 大于两条                         |
+
+## 用法建议
+
+<img alt="design" src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*apZASYZEX68AAAAAAAAAAABkARQnAQ" width="1000">
+
+## 元素
+
+<img alt="design" src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*ENU-Q78K3w8AAAAAAAAAAABkARQnAQ" width="800">
+
+- X 轴：通常对应连续数据，值为时间，调用连续数据 X 轴。
+- Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。
+- 图例：通常出现在多条折线图中，用来区分不同折线代表的数据含义。
+- 标签：用来解释数据点的值。
+- 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。

examples/area/stacked/API.en.md

@@ -0,0 +1,55 @@
+---
+title: API
+---
+
+## 配置属性
+
+### 图表容器
+
+`markdown:common/chart-options.en.md`
+
+### 数据映射
+
+#### data 📌
+
+**必选**, _array object_
+
+功能描述： 设置图表数据源
+
+默认配置： 无
+
+数据源为对象集合，例如：`[{ time: '1991'，value: 20 }, { time: '1992'，value: 20 }]`。
+
+`markdown:common/xy-field.en.md`
+
+`markdown:common/meta.en.md`
+
+### 图形样式
+
+`markdown:common/color.en.md`
+
+### tooltip
+
+`markdown:common/tooltip.en.md`
+
+### axis
+
+xAxis、yAxis 配置相同。
+
+`markdown:common/axis.en.md`
+
+### legend
+
+`markdown:common/legend.en.md`
+
+### theme
+
+`markdown:common/theme.en.md`
+
+### 事件
+
+`markdown:common/events.en.md`
+
+#### 图表方法
+
+`markdown:common/chart-methods.en.md`

examples/area/stacked/API.zh.md

@@ -0,0 +1,55 @@
+---
+title: API
+---
+
+## 配置属性
+
+### 图表容器
+
+`markdown:common/chart-options.zh.md`
+
+### 数据映射
+
+#### data 📌
+
+**必选**, _array object_
+
+功能描述： 设置图表数据源
+
+默认配置： 无
+
+数据源为对象集合，例如：`[{ time: '1991'，value: 20 }, { time: '1992'，value: 20 }]`。
+
+`markdown:common/xy-field.zh.md`
+
+`markdown:common/meta.zh.md`
+
+### 图形样式
+
+`markdown:common/color.zh.md`
+
+### tooltip
+
+`markdown:common/tooltip.zh.md`
+
+### axis
+
+xAxis、yAxis 配置相同。
+
+`markdown:common/axis.zh.md`
+
+### legend
+
+`markdown:common/legend.zh.md`
+
+### theme
+
+`markdown:common/theme.zh.md`
+
+### 事件
+
+`markdown:common/events.zh.md`
+
+#### 图表方法
+
+`markdown:common/chart-methods.zh.md`

examples/area/stacked/design.en.md

@@ -2,4 +2,30 @@
 title: 设计规范
 ---
 
-设计规范
+## 何时使用
+
+面积图可用来展示连续性数据，可很好地表示趋势、累积、减少以及变化。
+堆叠面积图更擅于展示部分和整体之间的关系或趋势，而不是传达特定的值。
+
+## 数据类型
+
+| 图表类型         | 面积图                           |
+| ---------------- | -------------------------------- |
+| 适合的数据       | 两个连续字段数据                 |
+| 功能             | 观察数据变化`趋势`               |
+| 数据与图形的映射 | 两个连续字段分别映射到横轴和纵轴 |
+| 适合的数据条数   | 大于两条                         |
+
+## 用法建议
+
+<img alt="design" src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*tm_ySaDelZIAAAAAAAAAAABkARQnAQ" width="1000">
+
+## 元素
+
+<img alt="design" src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*ENU-Q78K3w8AAAAAAAAAAABkARQnAQ" width="800">
+
+- X 轴：通常对应连续数据，值为时间，调用连续数据 X 轴。
+- Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。
+- 图例：通常出现在多条折线图中，用来区分不同折线代表的数据含义。
+- 标签：用来解释数据点的值。
+- 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。

examples/area/stacked/design.zh.md

@@ -2,4 +2,30 @@
 title: 设计规范
 ---
 
-设计规范
+## 何时使用
+
+面积图可用来展示连续性数据，可很好地表示趋势、累积、减少以及变化。
+堆叠面积图更擅于展示部分和整体之间的关系或趋势，而不是传达特定的值。
+
+## 数据类型
+
+| 图表类型         | 面积图                           |
+| ---------------- | -------------------------------- |
+| 适合的数据       | 两个连续字段数据                 |
+| 功能             | 观察数据变化`趋势`               |
+| 数据与图形的映射 | 两个连续字段分别映射到横轴和纵轴 |
+| 适合的数据条数   | 大于两条                         |
+
+## 用法建议
+
+<img alt="design" src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*tm_ySaDelZIAAAAAAAAAAABkARQnAQ" width="1000">
+
+## 元素
+
+<img alt="design" src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*ENU-Q78K3w8AAAAAAAAAAABkARQnAQ" width="800">
+
+- X 轴：通常对应连续数据，值为时间，调用连续数据 X 轴。
+- Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。
+- 图例：通常出现在多条折线图中，用来区分不同折线代表的数据含义。
+- 标签：用来解释数据点的值。
+- 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。