docs: 统一通用文档样式 (#1470)

* docs: 统一通用文档样式 * docs: 文档修改 Co-authored-by: liufu.lf <liufu.lf@antfin.com>
antvis · Aug 21, 2020 · bdafeb0 · bdafeb0
1 parent 3c10eb5
commit bdafeb0
Show file tree

Hide file tree

Showing 16 changed files with 420 additions and 228 deletions.
diff --git a/docs/common/axis.en.md b/docs/common/axis.en.md
@@ -174,11 +174,13 @@ interface ComponentAnimateCfg {
   readonly delay?: number;
 }
 // 配置参考
-animateOption: {
-  appear: ComponentAnimateCfg;
-  update: ComponentAnimateCfg;
-  enter: ComponentAnimateCfg;
-  leave: ComponentAnimateCfg;
+{
+  animateOption: {
+    appear: ComponentAnimateCfg;
+    update: ComponentAnimateCfg;
+    enter: ComponentAnimateCfg;
+    leave: ComponentAnimateCfg;
+  }
 }
 ```
 

diff --git a/docs/common/axis.zh.md b/docs/common/axis.zh.md
@@ -174,11 +174,13 @@ interface ComponentAnimateCfg {
   readonly delay?: number;
 }
 // 配置参考
-animateOption: {
-  appear: ComponentAnimateCfg;
-  update: ComponentAnimateCfg;
-  enter: ComponentAnimateCfg;
-  leave: ComponentAnimateCfg;
+{
+  animateOption: {
+    appear: ComponentAnimateCfg;
+    update: ComponentAnimateCfg;
+    enter: ComponentAnimateCfg;
+    leave: ComponentAnimateCfg;
+  }
 }
 ```
 

diff --git a/docs/common/chart-methods.en.md b/docs/common/chart-methods.en.md
@@ -0,0 +1,38 @@
+#### render() 📌
+
+<description>**必选** </description>
+
+功能描述：渲染图表。
+
+默认配置：`无`
+
+#### update()
+
+<description>**可选** </description>
+
+功能描述：更新图表配置项，配置覆盖，不会做差异比对。
+
+默认配置：`无`
+
+使用示例：
+
+```ts
+plot.update({
+  ...currentConfig,
+  legend: false,
+});
+```
+
+#### changeData()
+
+<description>**可选** </description>
+
+功能描述：更新图表数据。`update()`方法会导致图形区域销毁并重建，如果只进行数据更新，而不涉及其他配置项更新，推荐使用本方法。。
+
+默认配置：`无`
+
+使用示例：
+
+```ts
+plot.changeData(newData);
+```
diff --git a/docs/common/chart-methods.zh.md b/docs/common/chart-methods.zh.md
@@ -0,0 +1,38 @@
+#### render() 📌
+
+<description>**必选** </description>
+
+功能描述：渲染图表。
+
+默认配置：`无`
+
+#### update()
+
+<description>**可选** </description>
+
+功能描述：更新图表配置项，配置覆盖，不会做差异比对。
+
+默认配置：`无`
+
+使用示例：
+
+```ts
+plot.update({
+  ...currentConfig,
+  legend: false,
+});
+```
+
+#### changeData()
+
+<description>**可选** </description>
+
+功能描述：更新图表数据。`update()`方法会导致图形区域销毁并重建，如果只进行数据更新，而不涉及其他配置项更新，推荐使用本方法。。
+
+默认配置：`无`
+
+使用示例：
+
+```ts
+plot.changeData(newData);
+```
diff --git a/docs/common/label.en.md b/docs/common/label.en.md
@@ -12,13 +12,15 @@
 
 示例代码：
 
-```js
-label: {
-  style: {
-    fill: 'red',
-    opacity: 0.6,
-    fontSize: 24
-  },
-  rotate: true
+```ts
+{
+  label: {
+    style: {
+      fill: 'red',
+      opacity: 0.6,
+      fontSize: 24
+    },
+    rotate: true
+  }
 }
 ```
diff --git a/docs/common/label.zh.md b/docs/common/label.zh.md
@@ -12,13 +12,15 @@
 
 示例代码：
 
-```js
-label: {
-  style: {
-    fill: 'red',
-    opacity: 0.6,
-    fontSize: 24
-  },
-  rotate: true
+```ts
+{
+  label: {
+    style: {
+      fill: 'red',
+      opacity: 0.6,
+      fontSize: 24
+    },
+    rotate: true
+  }
 }
 ```
diff --git a/docs/common/line-style.en.md b/docs/common/line-style.en.md
@@ -14,20 +14,22 @@
 
 示例代码：
 
-```js
-xAxis: {
-  grid: {
-    line: {
-      style: {
-        stroke: 'black',
-        lineWidth: 2,
-        lineDash: [4, 5],
-        strokeOpacity: 0.7,
-        shadowColor: 'black',
-        shadowBlur: 10,
-        shadowOffsetX: 5,
-        shadowOffsetY: 5,
-        cursor: 'pointer'
+```ts
+{
+  xAxis: {
+    grid: {
+      line: {
+        style: {
+          stroke: 'black',
+          lineWidth: 2,
+          lineDash: [4, 5],
+          strokeOpacity: 0.7,
+          shadowColor: 'black',
+          shadowBlur: 10,
+          shadowOffsetX: 5,
+          shadowOffsetY: 5,
+          cursor: 'pointer'
+        }
       }
     }
   }

diff --git a/docs/common/line-style.zh.md b/docs/common/line-style.zh.md
@@ -14,20 +14,22 @@
 
 示例代码：
 
-```js
-xAxis: {
-  grid: {
-    line: {
-      style: {
-        stroke: 'black',
-        lineWidth: 2,
-        lineDash: [4, 5],
-        strokeOpacity: 0.7,
-        shadowColor: 'black',
-        shadowBlur: 10,
-        shadowOffsetX: 5,
-        shadowOffsetY: 5,
-        cursor: 'pointer'
+```ts
+{
+  xAxis: {
+    grid: {
+      line: {
+        style: {
+          stroke: 'black',
+          lineWidth: 2,
+          lineDash: [4, 5],
+          strokeOpacity: 0.7,
+          shadowColor: 'black',
+          shadowBlur: 10,
+          shadowOffsetX: 5,
+          shadowOffsetY: 5,
+          cursor: 'pointer'
+        }
       }
     }
   }

diff --git a/docs/common/shape-style.en.md b/docs/common/shape-style.en.md
@@ -17,7 +17,8 @@
 
 示例代码：
 
-```js
+```ts
+{
   pointStyle: {
     fill: 'red',
     fillOpacity: 0.5,
@@ -31,4 +32,5 @@
     shadowOffsetY: 5,
     cursor: 'pointer'
   }
+}
 ```
diff --git a/docs/common/shape-style.zh.md b/docs/common/shape-style.zh.md
@@ -17,7 +17,8 @@
 
 示例代码：
 
-```js
+```ts
+{
   pointStyle: {
     fill: 'red',
     fillOpacity: 0.5,
@@ -31,4 +32,5 @@
     shadowOffsetY: 5,
     cursor: 'pointer'
   }
+}
 ```
diff --git a/docs/common/text-style.en.md b/docs/common/text-style.en.md
@@ -22,15 +22,17 @@
 
 示例代码，以 label.style 配置为例：
 
-```js
-label: {
-  style:{
-    fontSize: 80,
-    fontWeight: 300,
-    textAlign: 'center',
-    textBaseline: 'middle',
-    shadowColor: 'white',
-    shadowBlur: 10,
+```ts
+{
+  label: {
+    style:{
+      fontSize: 80,
+      fontWeight: 300,
+      textAlign: 'center',
+      textBaseline: 'middle',
+      shadowColor: 'white',
+      shadowBlur: 10,
+    }
   }
 }
 ```
diff --git a/docs/common/text-style.zh.md b/docs/common/text-style.zh.md
@@ -22,15 +22,17 @@
 
 示例代码，以 label.style 配置为例：
 
-```js
-label: {
-  style:{
-    fontSize: 80,
-    fontWeight: 300,
-    textAlign: 'center',
-    textBaseline: 'middle',
-    shadowColor: 'white',
-    shadowBlur: 10,
+```ts
+{
+  label: {
+    style:{
+      fontSize: 80,
+      fontWeight: 300,
+      textAlign: 'center',
+      textBaseline: 'middle',
+      shadowColor: 'white',
+      shadowBlur: 10,
+    }
   }
 }
 ```
diff --git a/docs/common/tooltip.en.md b/docs/common/tooltip.en.md
@@ -143,20 +143,18 @@
 
 默认配置： `无`
 
-```js
-/** 通用对象 */
-export interface LooseObject {
-  [key: string]: any;
-}
+```ts
 /** Tooltip 内容框的 css 样式定义 */
-export interface TooltipDomStyles {
-  'g2-tooltip'?: LooseObject;
-  'g2-tooltip-title'?: LooseObject;
-  'g2-tooltip-list'?: LooseObject;
-  'g2-tooltip-list-item'?: LooseObject;
-  'g2-tooltip-marker'?: LooseObject;
-  'g2-tooltip-value'?: LooseObject;
-  'g2-tooltip-name'?: LooseObject;
+{
+  domStyles: {
+    'g2-tooltip'?: object;
+    'g2-tooltip-title'?: object;
+    'g2-tooltip-list'?: object;
+    'g2-tooltip-list-item'?: object;
+    'g2-tooltip-marker'?: object;
+    'g2-tooltip-value'?: object;
+    'g2-tooltip-name'?: object;
+  }
 }
 ```
 
@@ -176,13 +174,12 @@ export interface TooltipDomStyles {
 
 默认配置：`无`
 
-```js
- const config = {
-   tooltip: {
-     customContent: (title, data) => {
-       return `<div>${title}</div>`
-     };
-   }
- }
-
+```ts
+{
+  tooltip: {
+    customContent: (title, data) => {
+      return `<div>${title}</div>`;
+    };
+  }
+}
 ```