docs: 修改文档结构和内容

antvis · Nov 11, 2020 · 539575b · 539575b
1 parent 193691e
commit 539575b
Show file tree

Hide file tree

Showing 35 changed files with 380 additions and 1,297 deletions.
diff --git a/docs/api/canvas.en.md b/docs/api/canvas.en.md
@@ -28,9 +28,7 @@ order: 11
 为了方便用户使用，F2 中默认提供对线性渐变、放射状/环形渐变两种渐变色的支持，定义方式如下：
 
 - **线性渐变**
-
-- ![](https://gw.alipayobjects.com/zos/rmsportal/ElBYXdsTZKFflacOBNtp.png#width=600)
-
+![](https://gw.alipayobjects.com/zos/rmsportal/ElBYXdsTZKFflacOBNtp.png)
 
 > 说明：`l` 表示使用线性渐变，绿色的字体为可变量，由用户自己填写，由一个空格进行间隔。
 
@@ -43,7 +41,7 @@ stroke: 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff'
 
 - **放射状/环形渐变**
 
-- ![](https://gw.alipayobjects.com/zos/rmsportal/fBFocveoeRaeaCCPTaFo.png#width=600)
+![](https://gw.alipayobjects.com/zos/rmsportal/fBFocveoeRaeaCCPTaFo.png)
 
 
 > 说明：`r` 表示使用放射状渐变，绿色的字体为可变量，由用户自己填写，开始圆的 x y r 值均为相对值，0 至 1 范围，'r(x,y,r)' 内不可留有空格，颜色之间由一个空格进行间隔。

diff --git a/docs/api/canvas.zh.md b/docs/api/canvas.zh.md
@@ -27,10 +27,9 @@ order: 11
 
 为了方便用户使用，F2 中默认提供对线性渐变、放射状/环形渐变两种渐变色的支持，定义方式如下：
 
-- **线性渐变**
-
-- ![](https://gw.alipayobjects.com/zos/rmsportal/ElBYXdsTZKFflacOBNtp.png#width=600)
+### 线性渐变
 
+![](https://gw.alipayobjects.com/zos/rmsportal/ElBYXdsTZKFflacOBNtp.png)
 
 > 说明：`l` 表示使用线性渐变，绿色的字体为可变量，由用户自己填写，由一个空格进行间隔。
 
@@ -41,9 +40,9 @@ order: 11
 stroke: 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff'
 ```
 
-- **放射状/环形渐变**
+### 放射状/环形渐变
 
-- ![](https://gw.alipayobjects.com/zos/rmsportal/fBFocveoeRaeaCCPTaFo.png#width=600)
+![](https://gw.alipayobjects.com/zos/rmsportal/fBFocveoeRaeaCCPTaFo.png)
 
 
 > 说明：`r` 表示使用放射状渐变，绿色的字体为可变量，由用户自己填写，开始圆的 x y r 值均为相对值，0 至 1 范围，'r(x,y,r)' 内不可留有空格，颜色之间由一个空格进行间隔。

diff --git a/docs/tutorial/manual/attribute.en.md → docs/tutorial/attribute.en.md b/docs/tutorial/manual/attribute.en.md → docs/tutorial/attribute.en.md
@@ -1,6 +1,6 @@
 ---
 title: 图形属性
-order: 5
+order: 6
 ---
 
 图形属性对应视觉编码中的视觉通道，是图形语法元素中非常重要和灵活的一部分，每种几何标记都拥有自己的图形属性。F2 中支持的图形属性有下面几种：

diff --git a/docs/tutorial/manual/attribute.zh.md → docs/tutorial/attribute.zh.md b/docs/tutorial/manual/attribute.zh.md → docs/tutorial/attribute.zh.md
@@ -1,6 +1,6 @@
 ---
 title: 图形属性
-order: 5
+order: 6
 ---
 
 图形属性对应视觉编码中的视觉通道，是图形语法元素中非常重要和灵活的一部分，每种几何标记都拥有自己的图形属性。F2 中支持的图形属性有下面几种：

diff --git a/docs/tutorial/manual/coordinate.en.md → docs/tutorial/coordinate.en.md b/docs/tutorial/manual/coordinate.en.md → docs/tutorial/coordinate.en.md
@@ -1,6 +1,6 @@
 ---
 title: 坐标系
-order: 6
+order: 7
 ---
 
 坐标系是将两种位置标度结合在一起组成的 2 维定位系统，描述了数据是如何映射到图形所在的平面。

diff --git a/docs/tutorial/manual/coordinate.zh.md → docs/tutorial/coordinate.zh.md b/docs/tutorial/manual/coordinate.zh.md → docs/tutorial/coordinate.zh.md
@@ -1,6 +1,6 @@
 ---
 title: 坐标系
-order: 6
+order: 7
 ---
 
 坐标系是将两种位置标度结合在一起组成的 2 维定位系统，描述了数据是如何映射到图形所在的平面。
@@ -40,9 +40,7 @@ chart.coord('coordType', {
 | 柱状图 | ![](https://gw.alipayobjects.com/zos/skylark/e392736b-86a1-4452-9265-f7a5e8dc1805/2018/png/47caf538-6703-4db5-ae68-6605837f2803.png#width=) | ![](https://gw.alipayobjects.com/zos/skylark/383cdf9f-a631-4fc4-9f6a-593a22822242/2018/png/dd798932-1555-4988-bc68-353835d051b3.png#width=) | ![](https://gw.alipayobjects.com/zos/skylark/1a056c5c-13da-46d4-9315-2d589588d889/2018/png/4171f504-2f52-4ed6-ba8f-b7b286650692.png#width=) |
 
 
-### 坐标系配置
-
-#### 直角坐标系
+### 直角坐标系
 
 ```javascript
 // 声明直角坐标系
@@ -53,7 +51,7 @@ chart.coord('rect', {
 });
 ```
 
-#### 极坐标
+### 极坐标
 
 ```javascript
 // 声明极坐标

diff --git a/docs/tutorial/manual/data.en.md → docs/tutorial/data.en.md b/docs/tutorial/manual/data.en.md → docs/tutorial/data.en.md
@@ -1,6 +1,6 @@
 ---
 title: 数据
-order: 2
+order: 3
 ---
 
 数据是绘制一张图表最基本的部分。F2 支持的数据格式如下：

diff --git a/docs/tutorial/manual/data.zh.md → docs/tutorial/data.zh.md b/docs/tutorial/manual/data.zh.md → docs/tutorial/data.zh.md
@@ -1,6 +1,6 @@
 ---
 title: 数据
-order: 2
+order: 3
 ---
 
 数据是绘制一张图表最基本的部分。F2 支持的数据格式如下：

diff --git a/docs/tutorial/manual/geometry.en.md → docs/tutorial/geometry.en.md b/docs/tutorial/manual/geometry.en.md → docs/tutorial/geometry.en.md
@@ -1,6 +1,6 @@
 ---
 title: 几何标记
-order: 4
+order: 5
 ---
 
 几何标记即我们所说的点、线、面这些几何图形。F2 中并没有特定的图表类型（柱状图、散点图、折线图等）的概念，但是通过图形语法用户可以单独绘制某一种类型的图表，如饼图，也可以绘制混合图表，比如折线图和柱状图的组合。

diff --git a/docs/tutorial/manual/geometry.zh.md → docs/tutorial/geometry.zh.md b/docs/tutorial/manual/geometry.zh.md → docs/tutorial/geometry.zh.md
@@ -1,6 +1,6 @@
 ---
 title: 几何标记
-order: 4
+order: 5
 ---
 
 几何标记即我们所说的点、线、面这些几何图形。F2 中并没有特定的图表类型（柱状图、散点图、折线图等）的概念，但是通过图形语法用户可以单独绘制某一种类型的图表，如饼图，也可以绘制混合图表，比如折线图和柱状图的组合。

diff --git a/docs/tutorial/getting-started.en.md b/docs/tutorial/getting-started.en.md
@@ -14,10 +14,10 @@ order: 0
 npm install @antv/f2 --save
 ```
 
-成功安装完成之后，即可使用 `import` 或 `require` 进行引用。
+成功安装完成之后，即可使用 `import` 进行引用。
 
 ```javascript
-const F2 = require('@antv/f2');
+import F2 from '@antv/f2';
 ```
 
 ### 浏览器引入
@@ -43,17 +43,15 @@ const F2 = require('@antv/f2');
 
 下面是以一个基础的柱状图为例开始我们的第一个图表创建。
 
-### 浏览器引入方式
-
-#### 1. 创建canvas标签
+### 1. 创建canvas标签
 
 在页面上创建一个 `<canvas>` 并指定 `id`：
 
 ```html
 <canvas id="myChart" width="400" height="260"></canvas>
 ```
 
-#### 2. 编写图表绘制代码
+### 2. 编写代码
 
 创建 `<canvas>` 标签后，我们就可以进行简单的图表绘制:
 
@@ -115,27 +113,6 @@ chart.interval().position('genre*sold').color('genre');
 chart.render();
 ```
 
-### 更多示例
-
-更多的示例直接查看 [Demo](/en/examples/basic)。
-
-## 体验改进计划说明
-
-> **2018-12-27 更新：**
-
-> **目前我们的体验改进计划已经完成，所以从 3.3.4 版本（2018-12-27 发布）开始该方法将从 F2 中删除。我们改进计划期间为您造成的困扰感到万分抱歉！**
-
-
-~~为了更好服务用户，F2(3.1.12 版本开始) 会将 URL 和版本信息发送回 AntV 服务器（H5 环境下）：~~
-
-```html
-https://kcart.alipay.com/web/bi.do
-```
-
-~~除了 URL 与 F2 版本信息外，不会收集任何其他信息，一切为了能对 F2 的运行情况有更多了解，以更好服务于用户。如有担心，可以通过下面的代码关闭：~~
-
-```javascript
-// 关闭 F2 的体验改进计划打点请求
-F2.track(false)
-```
+## 更多示例
 
+更多的示例直接查看 [Demo](/zh/examples/basic)。
diff --git a/docs/tutorial/getting-started.zh.md b/docs/tutorial/getting-started.zh.md
@@ -14,10 +14,10 @@ order: 0
 npm install @antv/f2 --save
 ```
 
-成功安装完成之后，即可使用 `import` 或 `require` 进行引用。
+成功安装完成之后，即可使用 `import` 进行引用。
 
 ```javascript
-const F2 = require('@antv/f2');
+import F2 from '@antv/f2';
 ```
 
 ### 浏览器引入
@@ -43,17 +43,15 @@ const F2 = require('@antv/f2');
 
 下面是以一个基础的柱状图为例开始我们的第一个图表创建。
 
-### 浏览器引入方式
-
-#### 1. 创建canvas标签
+### 1. 创建canvas标签
 
 在页面上创建一个 `<canvas>` 并指定 `id`：
 
 ```html
 <canvas id="myChart" width="400" height="260"></canvas>
 ```
 
-#### 2. 编写图表绘制代码
+### 2. 编写代码
 
 创建 `<canvas>` 标签后，我们就可以进行简单的图表绘制:
 
@@ -115,27 +113,6 @@ chart.interval().position('genre*sold').color('genre');
 chart.render();
 ```
 
-### 更多示例
+## 更多示例
 
 更多的示例直接查看 [Demo](/zh/examples/basic)。
-
-## 体验改进计划说明
-
-> **2018-12-27 更新：**
-
-> **目前我们的体验改进计划已经完成，所以从 3.3.4 版本（2018-12-27 发布）开始该方法将从 F2 中删除。我们改进计划期间为您造成的困扰感到万分抱歉！**
-
-
-~~为了更好服务用户，F2(3.1.12 版本开始) 会将 URL 和版本信息发送回 AntV 服务器（H5 环境下）：~~
-
-```html
-https://kcart.alipay.com/web/bi.do
-```
-
-~~除了 URL 与 F2 版本信息外，不会收集任何其他信息，一切为了能对 F2 的运行情况有更多了解，以更好服务于用户。如有担心，可以通过下面的代码关闭：~~
-
-```javascript
-// 关闭 F2 的体验改进计划打点请求
-F2.track(false)
-```
-
diff --git a/docs/tutorial/manual/grammar.en.md → docs/tutorial/grammar.en.md b/docs/tutorial/manual/grammar.en.md → docs/tutorial/grammar.en.md
@@ -1,20 +1,27 @@
 ---
 title: 图形语法
-order: 0
+order: 2
 ---
 
+## 简介
 F2 同 G2 一样，基于《The Grammar of Graphics》(Leland Wilkinson 著)一书所提的图形理论。该理论是一套用来描述所有统计图形深层特性的语法规则，该语法回答了『什么是统计图形』这一问题，以自底向上的方式组织最基本的元素形成更高级的元素。
 
-所以对于 F2 来说，**没有具体的图表类型的概念，所有的图表都是通过组合不同的图形语法元素形成的**，这些图形语法元素包括：
 
+所以对于 F2 来说，**没有具体的图表类型的概念，所有的图表都是通过组合不同的图形语法元素形成的**
+
+## 数据
 - 最基础的部分是你想要可视化的[数据](https://www.yuque.com/antv/f2/data)以及一系列将数据中的变量对应到[图形属性](https://www.yuque.com/antv/f2/attribute)的映射；
 
+## 几何标记
 - [几何标记](https://www.yuque.com/antv/f2/geometry)，可以理解为你在图表中实际看到的图形元素，如点、线、多边形等，每个几何标记对象含有多个图形属性，F2 图形语法的核心就是建立数据中的一系列变量到图形属性的映射；
 
+## 度量
 - [度量](https://www.yuque.com/antv/f2/scale)，作为数据空间到图形属性空间的转换桥梁，每一个图形属性都对应着一个或者多个度量；
 
+## 坐标系
 - [坐标系](https://www.yuque.com/antv/f2/coordinate)，描述了数据是如何映射到图形所在的平面的，一个几何标记在不同坐标系下会有不同的表现。目前 F2 提供了笛卡尔坐标系、极坐标系两种坐标系；
 
+## 辅助元素
 - 辅助元素是为了增强图表的可读性和可理解性，F2 中的辅助元素包含坐标轴 Axis、图例 Legend、提示信息 Tooltip、静态辅助标记 Guide。
 
 

diff --git a/docs/tutorial/manual/grammar.zh.md → docs/tutorial/grammar.zh.md b/docs/tutorial/manual/grammar.zh.md → docs/tutorial/grammar.zh.md
@@ -1,20 +1,27 @@
 ---
 title: 图形语法
-order: 0
+order: 2
 ---
 
+## 简介
 F2 同 G2 一样，基于《The Grammar of Graphics》(Leland Wilkinson 著)一书所提的图形理论。该理论是一套用来描述所有统计图形深层特性的语法规则，该语法回答了『什么是统计图形』这一问题，以自底向上的方式组织最基本的元素形成更高级的元素。
 
-所以对于 F2 来说，**没有具体的图表类型的概念，所有的图表都是通过组合不同的图形语法元素形成的**，这些图形语法元素包括：
 
+所以对于 F2 来说，**没有具体的图表类型的概念，所有的图表都是通过组合不同的图形语法元素形成的**
+
+## 数据
 - 最基础的部分是你想要可视化的[数据](https://www.yuque.com/antv/f2/data)以及一系列将数据中的变量对应到[图形属性](https://www.yuque.com/antv/f2/attribute)的映射；
 
+## 几何标记
 - [几何标记](https://www.yuque.com/antv/f2/geometry)，可以理解为你在图表中实际看到的图形元素，如点、线、多边形等，每个几何标记对象含有多个图形属性，F2 图形语法的核心就是建立数据中的一系列变量到图形属性的映射；
 
+## 度量
 - [度量](https://www.yuque.com/antv/f2/scale)，作为数据空间到图形属性空间的转换桥梁，每一个图形属性都对应着一个或者多个度量；
 
+## 坐标系
 - [坐标系](https://www.yuque.com/antv/f2/coordinate)，描述了数据是如何映射到图形所在的平面的，一个几何标记在不同坐标系下会有不同的表现。目前 F2 提供了笛卡尔坐标系、极坐标系两种坐标系；
 
+## 辅助元素
 - 辅助元素是为了增强图表的可读性和可理解性，F2 中的辅助元素包含坐标轴 Axis、图例 Legend、提示信息 Tooltip、静态辅助标记 Guide。
 
 

diff --git a/docs/tutorial/manual/miniprogram.en.md b/docs/tutorial/manual/miniprogram.en.md