add design priciple

examples/area/basic/design.zh.md

@@ -18,11 +18,11 @@ title: 设计规范
 
 ## 用法建议
 
-<img src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*apZASYZEX68AAAAAAAAAAABkARQnAQ" width="600">
+<img src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*apZASYZEX68AAAAAAAAAAABkARQnAQ" width="1000">
 
 ## 元素
 
-<img src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*ENU-Q78K3w8AAAAAAAAAAABkARQnAQ" width="600">
+<img src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*ENU-Q78K3w8AAAAAAAAAAABkARQnAQ" width="800">
 
 - X 轴：通常对应连续数据，值为时间，调用连续数据 X 轴。
 - Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。

examples/area/percentageArea/design.zh.md

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

examples/area/stack/design.zh.md

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

examples/bar/basic/design.zh.md

@@ -2,4 +2,29 @@
 title: 设计规范
 ---
 
-设计规范
+## 何时使用
+
+条形图通过水平柱子长短对比数值大小，它与柱状图类似，只是交换了 X 轴与 Y 轴位置。均适用于对比一组或者多组分类数据。
+
+## 数据类型
+
+| 适合的数据 | 「一组或多组分类数据」+「一组或者多组对应的数值」 |
+| --- | --- |
+| 功能 | 对比分类数据的数值大小 |
+| 数据与图形的映射 | 分类数据字段映射到纵轴的位置，连续数据字段映射到矩形的宽度，分类数据也可以设置颜色增强分类的区分度 |
+| 适合的数据条数 | 数据量不作限制。条形图适合纵向滑动，在移动端显示有天然优势 |
+
+
+## 用法建议
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*0ijxQ78m7M0AAAAAAAAAAABkARQnAQ' width='1000'>
+
+## 元素
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*hPSDQ5O0A9gAAAAAAAAAAABkARQnAQ' width='800'>
+
+* X 轴：通常对应连续数据，值为数字，调用连续数据 X 轴。
+* Y 轴：通常对应分类数据，值为文本，调用连续数据 Y 轴。
+* 图例：通常出现在分组柱关图、分组条形图中，用来区分不同柱子代表的数据含义。
+* 标签：用来解释数据点的值。
+* 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。

examples/bar/group/design.zh.md

@@ -2,4 +2,29 @@
 title: 设计规范
 ---
 
-设计规范
+## 何时使用
+
+条形图通过水平柱子长短对比数值大小，它与柱状图类似，只是交换了 X 轴与 Y 轴位置。均适用于对比一组或者多组分类数据。
+
+## 数据类型
+
+| 适合的数据 | 「一组或多组分类数据」+「一组或者多组对应的数值」 |
+| --- | --- |
+| 功能 | 对比分类数据的数值大小 |
+| 数据与图形的映射 | 分类数据字段映射到纵轴的位置，连续数据字段映射到矩形的宽度，分类数据也可以设置颜色增强分类的区分度 |
+| 适合的数据条数 | 数据量不作限制。条形图适合纵向滑动，在移动端显示有天然优势 |
+
+
+## 用法建议
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*AQz8SIbK9UgAAAAAAAAAAABkARQnAQ' width='1000'>
+
+## 元素
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*hPSDQ5O0A9gAAAAAAAAAAABkARQnAQ' width='800'>
+
+* X 轴：通常对应连续数据，值为数字，调用连续数据 X 轴。
+* Y 轴：通常对应分类数据，值为文本，调用连续数据 Y 轴。
+* 图例：通常出现在分组柱关图、分组条形图中，用来区分不同柱子代表的数据含义。
+* 标签：用来解释数据点的值。
+* 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。

examples/bar/percentageStack/design.zh.md

@@ -2,4 +2,29 @@
 title: 设计规范
 ---
 
-设计规范
+## 何时使用
+
+条形图通过水平柱子长短对比数值大小，它与柱状图类似，只是交换了 X 轴与 Y 轴位置。均适用于对比一组或者多组分类数据。
+
+## 数据类型
+
+| 适合的数据 | 「一组或多组分类数据」+「一组或者多组对应的数值」 |
+| --- | --- |
+| 功能 | 对比分类数据的数值大小 |
+| 数据与图形的映射 | 分类数据字段映射到纵轴的位置，连续数据字段映射到矩形的宽度，分类数据也可以设置颜色增强分类的区分度 |
+| 适合的数据条数 | 数据量不作限制。条形图适合纵向滑动，在移动端显示有天然优势 |
+
+
+## 用法建议
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*0PKjQreDDF8AAAAAAAAAAABkARQnAQ' width='1000'>
+
+## 元素
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*hPSDQ5O0A9gAAAAAAAAAAABkARQnAQ' width='800'>
+
+* X 轴：通常对应连续数据，值为数字，调用连续数据 X 轴。
+* Y 轴：通常对应分类数据，值为文本，调用连续数据 Y 轴。
+* 图例：通常出现在分组柱关图、分组条形图中，用来区分不同柱子代表的数据含义。
+* 标签：用来解释数据点的值。
+* 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。

examples/bar/stack/design.zh.md

@@ -2,4 +2,29 @@
 title: 设计规范
 ---
 
-设计规范
+## 何时使用
+
+条形图通过水平柱子长短对比数值大小，它与柱状图类似，只是交换了 X 轴与 Y 轴位置。均适用于对比一组或者多组分类数据。
+
+## 数据类型
+
+| 适合的数据 | 「一组或多组分类数据」+「一组或者多组对应的数值」 |
+| --- | --- |
+| 功能 | 对比分类数据的数值大小 |
+| 数据与图形的映射 | 分类数据字段映射到纵轴的位置，连续数据字段映射到矩形的宽度，分类数据也可以设置颜色增强分类的区分度 |
+| 适合的数据条数 | 数据量不作限制。条形图适合纵向滑动，在移动端显示有天然优势 |
+
+
+## 用法建议
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*0PKjQreDDF8AAAAAAAAAAABkARQnAQ' width='1000'>
+
+## 元素
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*hPSDQ5O0A9gAAAAAAAAAAABkARQnAQ' width='800'>
+
+* X 轴：通常对应连续数据，值为数字，调用连续数据 X 轴。
+* Y 轴：通常对应分类数据，值为文本，调用连续数据 Y 轴。
+* 图例：通常出现在分组柱关图、分组条形图中，用来区分不同柱子代表的数据含义。
+* 标签：用来解释数据点的值。
+* 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。

examples/column/basic/design.zh.md

@@ -2,4 +2,28 @@
 title: 设计规范
 ---
 
-设计规范
+## 何时使用
+
+柱状图通过垂直柱子长短对比数值大小，适用于对比一组或者多组分类数据。
+
+## 数据类型
+
+| 适合的数据 | 「一组或多组分类数据」+「一组或者多组对应的数值」 |
+| --- | --- |
+| 功能 | 对比分类数据的数值大小 |
+| 数据与图形的映射 | 分类数据字段映射到横轴的位置，连续数据字段映射到矩形的高度，分类数据也可以设置颜色增强分类的区分度 |
+| 适合的数据条数 | 分类数据不宜过多，不建议超过 20 条，如有多组分类数据，不建议超过 10 组 |
+
+## 用法建议
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*ay53Q59BfbkAAAAAAAAAAABkARQnAQ' width='1000'>
+
+## 元素
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*O4GCSZuzPJ0AAAAAAAAAAABkARQnAQ' width='800'>
+
+* X 轴：通常对应分类数据，值为文本，调用连续数据 X 轴。
+* Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。
+* 图例：通常出现在分组柱关图、分组条形图中，用来区分不同柱子代表的数据含义。
+* 标签：用来解释数据点的值。
+* 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。

examples/column/group/design.zh.md

@@ -2,4 +2,28 @@
 title: 设计规范
 ---
 
-设计规范
+## 何时使用
+
+柱状图通过垂直柱子长短对比数值大小，适用于对比一组或者多组分类数据。
+
+## 数据类型
+
+| 适合的数据 | 「一组或多组分类数据」+「一组或者多组对应的数值」 |
+| --- | --- |
+| 功能 | 对比分类数据的数值大小 |
+| 数据与图形的映射 | 分类数据字段映射到横轴的位置，连续数据字段映射到矩形的高度，分类数据也可以设置颜色增强分类的区分度 |
+| 适合的数据条数 | 分类数据不宜过多，不建议超过 20 条，如有多组分类数据，不建议超过 10 组 |
+
+## 用法建议
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*JCfkRoWdXGoAAAAAAAAAAABkARQnAQ' width='1000'>
+
+## 元素
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*O4GCSZuzPJ0AAAAAAAAAAABkARQnAQ' width='800'>
+
+* X 轴：通常对应分类数据，值为文本，调用连续数据 X 轴。
+* Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。
+* 图例：通常出现在分组柱关图、分组条形图中，用来区分不同柱子代表的数据含义。
+* 标签：用来解释数据点的值。
+* 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。

examples/column/percentageStack/design.zh.md

@@ -2,4 +2,28 @@
 title: 设计规范
 ---
 
-设计规范
+## 何时使用
+
+柱状图通过垂直柱子长短对比数值大小，适用于对比一组或者多组分类数据。
+
+## 数据类型
+
+| 适合的数据 | 「一组或多组分类数据」+「一组或者多组对应的数值」 |
+| --- | --- |
+| 功能 | 对比分类数据的数值大小 |
+| 数据与图形的映射 | 分类数据字段映射到横轴的位置，连续数据字段映射到矩形的高度，分类数据也可以设置颜色增强分类的区分度 |
+| 适合的数据条数 | 分类数据不宜过多，不建议超过 20 条，如有多组分类数据，不建议超过 10 组 |
+
+## 用法建议
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*juZwR4sVo-kAAAAAAAAAAABkARQnAQ' width='1000'>
+
+## 元素
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*O4GCSZuzPJ0AAAAAAAAAAABkARQnAQ' width='800'>
+
+* X 轴：通常对应分类数据，值为文本，调用连续数据 X 轴。
+* Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。
+* 图例：通常出现在分组柱关图、分组条形图中，用来区分不同柱子代表的数据含义。
+* 标签：用来解释数据点的值。
+* 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。

examples/column/stack/design.zh.md

@@ -2,4 +2,28 @@
 title: 设计规范
 ---
 
-设计规范
+## 何时使用
+
+柱状图通过垂直柱子长短对比数值大小，适用于对比一组或者多组分类数据。
+
+## 数据类型
+
+| 适合的数据 | 「一组或多组分类数据」+「一组或者多组对应的数值」 |
+| --- | --- |
+| 功能 | 对比分类数据的数值大小 |
+| 数据与图形的映射 | 分类数据字段映射到横轴的位置，连续数据字段映射到矩形的高度，分类数据也可以设置颜色增强分类的区分度 |
+| 适合的数据条数 | 分类数据不宜过多，不建议超过 20 条，如有多组分类数据，不建议超过 10 组 |
+
+## 用法建议
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*juZwR4sVo-kAAAAAAAAAAABkARQnAQ' width='1000'>
+
+## 元素
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*O4GCSZuzPJ0AAAAAAAAAAABkARQnAQ' width='800'>
+
+* X 轴：通常对应分类数据，值为文本，调用连续数据 X 轴。
+* Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。
+* 图例：通常出现在分组柱关图、分组条形图中，用来区分不同柱子代表的数据含义。
+* 标签：用来解释数据点的值。
+* 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。

examples/general/axis/design.zh.md

@@ -2,4 +2,69 @@
 title: 设计规范
 ---
 
-设计规范
+## 定义
+
+轴是用来定义一个坐标系的一组直线或一组曲线。
+
+## 何时使用
+
+目的是显示数据中的尺寸。常在：折线图、面积图，条形图、柱形图、散点图等图表中使用
+
+## 元素
+
+轴的常见元素包括：轴线、刻度线、轴上的网格线、文字标签和文字标题
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*Dbb_TqO0WdwAAAAAAAAAAABkARQnAQ' width='800>
+
+## 轴类型
+
+轴通常分为：连续轴、时间轴、分类轴；他们同时存在于直角坐标系(如折线图、柱状图)和极坐标系(如饼图、环图、雷达图)中。
+
+常见轴如下图所示：
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*PYVFSphMgecAAAAAAAAAAABkARQnAQ' width='800'>
+
+## 轴标题
+
+**何时使用**：通常用来描述当前轴的主题
+**设计建议**：在图表内容无法对当前轴的主题和单位进行准确描述时，建议加上轴标题，且后跟数据单位。
+
+**例**：生产总值（亿元）
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*-SqxRqB4EvMAAAAAAAAAAABkARQnAQ' width='800'>
+
+## 轴标签
+
+**设计建议**：
+可根据图表类型设置轴标签是否显示、旋转角度以及显示间隔。
+
+**默认方案**：
+连续轴、时间轴默认自动抽样 + 不旋转；分类轴默认自动旋转 + 自动省略。
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*fOPmSY9QSJwAAAAAAAAAAABkARQnAQ' width='800'>
+
+## 轴元素的显示策略
+
+**设计建议**：
+轴上所有的元素可根据图表类型设置不同的显示策略。
+
+**1、折线、面积图为例**
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*whg2SLJc-Z4AAAAAAAAAAABkARQnAQ' width='800'>
+
+**2、柱状图为例**
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*2VtiT5FechAAAAAAAAAAAABkARQnAQ' width='800'>
+
+**3、条形图为例**
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*5UXYT5M4hA4AAAAAAAAAAABkARQnAQ' width='800'>
+
+**4、散点图为例**
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*opqcQZ3M9ocAAAAAAAAAAABkARQnAQ' width='800'>
+
+**另外：**
+上面 4 个设计建议中提到的，轴标签「若图形区域内有数据标签」，则轴标签可以考虑隐藏，如下图：
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*WA83TZR9KUAAAAAAAAAAAABkARQnAQ' width='800'>