docs: 文档修复

antvis · Nov 15, 2019 · e5a9f32 · e5a9f32
1 parent d415a5a
commit e5a9f32
Show file tree

Hide file tree

Showing 18 changed files with 215 additions and 157 deletions.
diff --git a/docs/manual/plots/area.zh.md b/docs/manual/plots/area.zh.md
@@ -13,17 +13,17 @@ order: 0
 
 折线图适合的数据类型为一个**连续字段**(时间)和一个**离散字段**(数值)。在下面这个例子中，`time`为连续数据字段，`value`为离散数据字段。
 
-```
+```typescript
 const data = [
-  {time:'2000',value: 100},
-  {time:'2001',value:60},
-  {time:'2002',value: 30}
- ];
+  { time: '2000', value: 100 },
+  { time: '2001', value: 60 },
+  { time: '2002', value: 30 },
+];
 ```
 
 在进行图表绘制的时候，连续字段将映射到折线形状在 x 方向上的信息，而离散字段将映射到折线形状在 y 方向上的信息。/>在上面的示例数据中再加入一个**分类字段**`type`，折线将根据该分类字段分为两根，两根折线在 x 方向(时间)的信息是完全一致的，通常用作同一时间区间内两个变量发展趋势的对比。
 
-```
+````typescript
 const data = [
   time:'2000',value: 100,type:'a',
   time:'2001',value:60,type:'a',
@@ -189,3 +189,4 @@ const data = [
   `onLineContextmenu: function`    折线右键事件<br />
 
 - 其他事件类型见[通用图表配置](../generalConfig.zh-CN.md)。
+````
diff --git a/docs/manual/plots/bar.zh.md b/docs/manual/plots/bar.zh.md
@@ -11,12 +11,12 @@ order: 0
 
 条形图适合的数据类型为一个**分类字段**(类型)和一个**离散字段**(数值)。在下面这个例子中，`type`为分类数据字段，`value`为离散数据字段。
 
-```
+```typescript
 const data = [
-  {type:'a',value: 100},
-  {type:'b',value:60},
-  {type:'c',value: 30}
- ];
+  { type: 'a', value: 100 },
+  { type: 'b', value: 60 },
+  { type: 'c', value: 30 },
+];
 ```
 
 图表绘制时，每一个分类对应一根柱子，映射到 y 轴，而分类数值对应柱子的长度，映射到 x 轴。

diff --git a/docs/manual/plots/column.zh.md b/docs/manual/plots/column.zh.md
@@ -11,12 +11,12 @@ order: 0
 
 基础柱状图适合的数据类型为一个**分类字段**(类型)和一个**离散字段**(数值)。在下面这个例子中，`type`为分类数据字段，`value`为离散数据字段。
 
-```
+```typescript
 const data = [
-  {type:'a',value: 100},
-  {type:'b',value:60},
-  {type:'c',value: 30}
- ];
+  { type: 'a', value: 100 },
+  { type: 'b', value: 60 },
+  { type: 'c', value: 30 },
+];
 ```
 
 图表绘制时，每一个分类对应一根柱子，映射到 x 轴，而分类数值对应柱子的高度，映射到 y 轴。

diff --git a/docs/manual/plots/gauge.zh.md b/docs/manual/plots/gauge.zh.md
@@ -93,6 +93,6 @@ order: 0
 
 示例如下：
 
-```
-format = (value) => `${value}%`
+```typescript
+format = (value) => `${value}%`;
 ```
diff --git a/docs/manual/plots/group-bar.zh.md b/docs/manual/plots/group-bar.zh.md
@@ -13,18 +13,18 @@ order: 0
 
 分组柱状图适合的数据类型为两个**分类字段**(分类字段、分组字段)和一个**连续字段**(数值)。在下面这个例子中，`type`为分类数据字段，`quarter`为分组数据字段，`value`为离散数据字段。
 
-```
+```typescript
 const data = [
-  {type:'a',quarter:'Q1',value: 100},
-  {type:'a',quarter:'Q2',value: 70},
-  {type:'a',quarter:'Q3',value: 20},
-  {type:'b',quarter:'Q1',value: 10},
-  {type:'b',quarter:'Q2',value: 50},
-  {type:'b',quarter:'Q3',value: 40},
-  {type:'c',quarter:'Q1',value: 30},
-  {type:'c',quarter:'Q2',value: 50},
-  {type:'c',quarter:'Q3',value: 20},
- ];
+  { type: 'a', quarter: 'Q1', value: 100 },
+  { type: 'a', quarter: 'Q2', value: 70 },
+  { type: 'a', quarter: 'Q3', value: 20 },
+  { type: 'b', quarter: 'Q1', value: 10 },
+  { type: 'b', quarter: 'Q2', value: 50 },
+  { type: 'b', quarter: 'Q3', value: 40 },
+  { type: 'c', quarter: 'Q1', value: 30 },
+  { type: 'c', quarter: 'Q2', value: 50 },
+  { type: 'c', quarter: 'Q3', value: 20 },
+];
 ```
 
 图表绘制时，每一个分类对应一组条形，映射到 y 轴，而分组字段决定一组条形的分布情况，而连续字段决定条形的长度，映射到 x 轴。

diff --git a/docs/manual/plots/group-column.zh.md b/docs/manual/plots/group-column.zh.md
@@ -13,18 +13,18 @@ order: 0
 
 分组柱状图适合的数据类型为两个**分类字段**(分类字段、分组字段)和一个**连续字段**(数值)。在下面这个例子中，`type`为分类数据字段，`quarter`为分组数据字段，`value`为离散数据字段。
 
-```
+```typescript
 const data = [
-  {type:'a',quarter:'Q1',value: 100},
-  {type:'a',quarter:'Q2',value: 70},
-  {type:'a',quarter:'Q3',value: 20},
-  {type:'b',quarter:'Q1',value: 10},
-  {type:'b',quarter:'Q2',value: 50},
-  {type:'b',quarter:'Q3',value: 40},
-  {type:'c',quarter:'Q1',value: 30},
-  {type:'c',quarter:'Q2',value: 50},
-  {type:'c',quarter:'Q3',value: 20},
- ];
+  { type: 'a', quarter: 'Q1', value: 100 },
+  { type: 'a', quarter: 'Q2', value: 70 },
+  { type: 'a', quarter: 'Q3', value: 20 },
+  { type: 'b', quarter: 'Q1', value: 10 },
+  { type: 'b', quarter: 'Q2', value: 50 },
+  { type: 'b', quarter: 'Q3', value: 40 },
+  { type: 'c', quarter: 'Q1', value: 30 },
+  { type: 'c', quarter: 'Q2', value: 50 },
+  { type: 'c', quarter: 'Q3', value: 20 },
+];
 ```
 
 图表绘制时，每一个分类对应一组柱子，映射到 x 轴，而分组字段决定一组柱子的分布情况，而连续字段决定柱子的高度，映射到 y 轴。

diff --git a/docs/manual/plots/line.zh.md b/docs/manual/plots/line.zh.md
@@ -13,27 +13,27 @@ order: 0
 
 折线图适合的数据类型为一个**连续字段**(时间)和一个**离散字段**(数值)。在下面这个例子中，`time`为连续数据字段，`value`为离散数据字段。
 
-```
+```typescript
 const data = [
-  {time:'2000',value: 100},
-  {time:'2001',value:60},
-  {time:'2002',value: 30}
- ];
+  { time: '2000', value: 100 },
+  { time: '2001', value: 60 },
+  { time: '2002', value: 30 },
+];
 ```
 
 在进行图表绘制的时候，连续字段将映射到折线形状在 x 方向上的信息，而离散字段将映射到折线形状在 y 方向上的信息。
 
 在上面的示例数据中再加入一个**分类字段**`type`，折线将根据该分类字段分为两根，两根折线在 x 方向(时间)的信息是完全一致的，通常用作同一时间区间内两个变量发展趋势的对比。
 
-```
+```typescript
 const data = [
-  { time:'2000',value: 100,type:'a'},
-  { time:'2001',value:60,type:'a' },
-  { time:'2002',value: 30, type: 'a' },
-  { time:'2000',value: 70,type:'b' },
-  { time:'2001',value:120,type:'b' },
-  { time:'2002',value: 40, type: 'b' },
- ];
+  { time: '2000', value: 100, type: 'a' },
+  { time: '2001', value: 60, type: 'a' },
+  { time: '2002', value: 30, type: 'a' },
+  { time: '2000', value: 70, type: 'b' },
+  { time: '2001', value: 120, type: 'b' },
+  { time: '2002', value: 40, type: 'b' },
+];
 ```
 
 ## 图表用法

diff --git a/docs/manual/plots/pie.zh.md b/docs/manual/plots/pie.zh.md
@@ -11,14 +11,14 @@ order: 0
 
 ## 数据类型
 
-饼图适合的数据类型为一个分类数据字段和一个连续数据字段。在下面这个例子中，`type`为分类字段，`value`为联系字段。
+饼图适合的数据类型为一个分类数据字段和一个连续数据字段。在下面这个例子中，`type` 为分类字段，`value` 为联系字段。
 
-```
+```typescript
 const data = [
-  {type:'a',value: 100},
-  {type:'b',value:60},
-  {type:'c',value: 30}
- ];
+  { type: 'a', value: 100 },
+  { type: 'b', value: 60 },
+  { type: 'c', value: 30 },
+];
 ```
 
 在进行图表绘制的时候，分类字段将映射到扇形切片的颜色，而连续字段将映射到扇形的面积（占比）。
@@ -69,7 +69,7 @@ const data = [
 
 **required**
 
-数据源为对象集合，例如：[{ segment: 分类一, value: 20 }, { segment: 分类二, value: 20 }]。
+数据源为对象集合，例如： [{ segment: 分类一, value: 20 }, { segment: 分类二, value: 20 }]。
 
 ### radius: number
 
@@ -105,19 +105,26 @@ const data = [
 
 ### label
 
-optional<br />`visible: boolean`    图形标签是否显示<br />`type: 'inner' | 'outer' | 'spider'`    图形标签的类型
+optional
 
-<p>(src as img)="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*E-2WTKY2BEIAAAAAAAAAAABkARQnAQ" width="600">(/p>
-`formatter: function` as )  对label的显示文本进行格式化。/>注意：当配置了colorField，即扇形切片接受分类类型的颜色映射，此时spider label的文本为上下显示，此时formatter方法入参为angleField及colorField两个字段对应的值，返回值应为数组。
+`visible: boolean`    图形标签是否显示
 
-```
+`type: 'inner' | 'outer' | 'spider'`    图形标签的类型
+
+<img src="https://cdn.nlark.com/yuque/0/2019/png/221520/1573810041204-c58c86bf-3981-47c1-bf71-a14545ece788.png" alt="image.png" style="visibility: visible; width: 600px; height: 248px;">
+
+`formatter: function` 对 label 的显示文本进行格式化
+
+> 注意：当配置了 colorField，即扇形切片接受分类类型的颜色映射，此时 spider label 的文本为上下显示，此时 formatter 方法入参为 angleField 及 colorField 两个字段对应的值，返回值应为数组。
+
+```typescript
 label: {
   type: 'spider',
   formatter:(angleField, colorField)=>{
     return ['value1','value2'];
   }
 }
-``` as br
+```
 
 ### events
 

diff --git a/docs/manual/plots/radar.zh.md b/docs/manual/plots/radar.zh.md
@@ -13,17 +13,17 @@ order: 0
 
 单组雷达图适合的数据类型为一个分类字段和一个连续字段。在下面这个例子中，`type`为分类字段，`value`为联系字段。
 
-```
+```typescript
 const data = [
-  {type:'a',value: 100},
-  {type:'b',value:60},
-  {type:'c',value: 30}
- ];
+  { type: 'a', value: 100 },
+  { type: 'b', value: 60 },
+  { type: 'c', value: 30 },
+];
 ```
 
 多组雷达图需要在此基础上再加入一个分类字段作为分组字段。雷达图将根据此字段分为 N 组。在下面的例子中，`mark`为分组字段，将雷达图分为上下叠加的两组。
 
-```
+```typescript
 const data = [
   type:'a',mark:'top',value: 100,
   type:'b',mark:'top',value:60,
@@ -106,7 +106,7 @@ const data = [
 - `stroke: string`  线的颜色<br />
 - `lineWidth: number`  线的宽度<br />
 - `lineDash: number[]`  虚线<br />
-- - `opacity: number`  透明度
+- `opacity: number`  透明度
 
 另外还支持回调函数的配置方式，入参为当前图形的对应数据，出参为一个样式配置对象。
 
@@ -133,11 +133,11 @@ const data = [
 
 **optional**
 
-`visible: boolean`    图形标签是否显示<br />
-`formatter: function`  对 label 的显示文本进行格式化。/>
-`offsetX: number` as br    在 label 位置的基础上再往 x 方向的偏移量。/>
-`offsetY: number` as br    在 label 位置的基础上再往 y 方向的偏移量。/>
-`style: object` as br    配置 label 文本
+`visible: boolean`    图形标签是否显示。<br />
+`formatter: function`  对 label 的显示文本进行格式化。<br />
+`offsetX: number`  在 label 位置的基础上再往 x 方向的偏移量。<br />
+`offsetY: number`  在 label 位置的基础上再往 y 方向的偏移量。<br />
+`style: object` 配置 label 文本
 
 ### events
 

diff --git a/docs/manual/plots/ring.zh.md b/docs/manual/plots/ring.zh.md
@@ -11,12 +11,12 @@ order: 0
 
 环图适合的数据类型为一个分类数据字段和一个连续数据字段。在下面这个例子中，`type`为分类字段，`value`为联系字段。
 
-```
+```typescript
 const data = [
-  {type:'a',value: 100},
-  {type:'b',value:60},
-  {type:'c',value: 30}
- ];
+  { type: 'a', value: 100 },
+  { type: 'b', value: 60 },
+  { type: 'c', value: 30 },
+];
 ```
 
 在进行图表绘制的时候，分类字段将映射到弧形切片的颜色，而连续字段将映射到弧形的面积（占比）。
@@ -55,17 +55,22 @@ const data = [
 
 中心文本
 
-`content: string|object`    中心文本内容，用户可以指定一段文字(此时中心文本单行显示)或一组数据(此时中心文本分两行显示)，指定数据时需采用{ name:xxx, value:xxx }的格式。如不配置 content，则默认显示第一行数据。/>
-`htmlContent: string` as br    自定义中心文本，用户可以根据 htmlContent 方法的 data 参数定义中心文本 dom 节点的构成和显示方式。/>
-`onActive: boolean` as br    是否自动响应鼠标交互。当设置为 true 时，鼠标滑过弧形切片时中心文本显示当前弧形切片内容，此时 tooltip 默认不再显示。
+`content: string|object`  中心文本内容
+
+用户可以指定一段文字(此时中心文本单行显示)或一组数据(此时中心文本分两行显示)，指定数据时需采用`{ name:xxx, value:xxx }`的格式。如不配置 content，则默认显示第一行数据。
+
+`htmlContent: string` 自定义中心文本
+
+用户可以根据 htmlContent 方法的 data 参数定义中心文本 dom 节点的构成和显示方式。
+
+`onActive: boolean` 是否自动响应鼠标交互
+
+当设置为 true 时，鼠标滑过弧形切片时中心文本显示当前弧形切片内容，此时 tooltip 默认不再显示。
 
 用法：
 
-```
-annotation: [
-  { type: 'centralText',
-    onActive: true
-  }]
+```typescript
+annotation: [{ type: 'centralText', onActive: true }];
 ```
 
 ### 通用图表配置
@@ -120,7 +125,7 @@ annotation: [
 
 **optional**
 
-饼图的半径，原点为画布中心。配置值域为[0,1]，0 代表饼图大小为 0，即不显示，1 代表饼图撑满绘图区域。/>默认值为 0.8, 即 width / as br 2 \* 0.8。
+饼图的半径，原点为画布中心。配置值域为[0,1]，0 代表饼图大小为 0，即不显示，1 代表饼图撑满绘图区域。默认值为 0.8, 即 `width / 2 * 0.8`。
 
 #### angleField: string
 
@@ -145,12 +150,12 @@ annotation: [
 **optional**
 
 `visible: boolean`    图形标签是否显示<br />
-`type: 'inner' | 'outer' | 'spider'`    图形标签的类型<br/>
-`formatter: function`  对 label 的显示文本进行格式化。/> as br
+`type: 'inner' | 'outer' | 'spider'`    图形标签的类型<br />
+`formatter: function`  对 label 的显示文本进行格式化。
 
-注意：当配置了 colorField，即扇形切片接受分类类型的颜色映射，此时 spider label 的文本为上下显示，此时 formatter 方法入参为 angleField 及 colorField 两个字段对应的值，返回值应为数组。
+> 注意：当配置了 colorField，即扇形切片接受分类类型的颜色映射，此时 spider label 的文本为上下显示，此时 formatter 方法入参为 angleField 及 colorField 两个字段对应的值，返回值应为数组。
 
-```
+```typescript
 label: {
   type: 'spider',
   formatter:(angleField, colorField)=>{

diff --git a/docs/manual/plots/stack-area.zh.md b/docs/manual/plots/stack-area.zh.md
@@ -157,7 +157,8 @@ work in progress
   `onAreaMouseenter: function`    区域鼠标进入事件<br />
   `onAreaMouseleave: function`    区域鼠标移出事件<br />
   `onAreaMousedown: function`    区域鼠标点击事件<br />
-  `onAreaMouseup: function`    区域鼠标抬起事件<br />`onAreaContextmenu: function`    右键事件
+  `onAreaMouseup: function`    区域鼠标抬起事件<br />
+  `onAreaContextmenu: function`    右键事件
 
   如配置了区域图上的数据点：