docs: update data type: inline, fetch (#6702)

* docs: update data type fetch

* docs: update data type inline

Author: hustcc

site/docs/manual/core/data/fetch.zh.md

@@ -3,32 +3,31 @@ title: fetch
 order: 2
 ---
 
-根据 `value` 指定的 `url` 获取远程的数据。可以通过 `format` 去指定数据类型，G2 默认会根据 `value` 指定的文件后缀名去推断数据类型。
+## 概述
+
+G2 的数据源来源有两种，一种是 `inline`，即直接传入具体的数据，这种是 G2 默认的数据源类型；另外一种数据源类型是 `fetch`，即从远程接口获取数据。
+
+G2 的 `fetch` 支持从远程接口获得数据，让数据源具备一定的动态性，支持 JSON、CSV 等格式解析，适配多场景数据集成，提升大屏、监控等应用的开发效率与交互体验。配置上，根据 `value` 指定的 `url` 获取远程的数据。可以通过 `format` 去指定数据类型，G2 默认会根据 `value` 指定的文件后缀名去推断数据类型，记得保证远程的地址没有设置鉴权。
+
+### 使用方式
+
+直接在设置数据得时候，传入一个对象，并设置类型 type 为 `fetch`。
 
 ```js
 // Spec
 chart.options({
   type: 'point',
   data: {
-    type: 'fetch',
-    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
-  },
-});
-```
-
-```js
-// API
-chart.data({
-  type: 'point',
-  data: {
-    type: 'fetch',
-    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
+    type: 'fetch', // 指定 fetch 类型
+    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json', // 远程地址
   },
 });
 ```
 
 ## 开始使用
 
+举一个例子如下：
+
 ```js | ob
 (() => {
   const chart = new G2.Chart();
@@ -51,12 +50,14 @@ chart.data({
 })();
 ```
 
-## 选项
+## 配置项
 
-| 属性      | 描述                                              | 类型              | 默认值 |
+| 属性      | 描述                                               | 类型              | 默认值 |
 | --------- | ------------------------------------------------- | ----------------- | ------ |
-| value     | fetch 请求的网络地址                              | `string`          | `[]`   |
-| format    | 远程文件的数据格式类型，决定用什么方式解析        | `'json' \| 'csv'` | `json` |
-| delimiter | 如果是 csv 文件，解析的时候分割符                 | `string`          | `,`    |
-| autoType  | 如果是 csv 文件，解析的时候是否自动判断列数据类型 | `boolean`         | `true` |
-| transform | 对加载后的数据进行变换操作                        | `DataTransform`   | `[]`   |
+| value     | fetch 请求的网络地址                                | `string`          | `[]`   |
+| format    | 远程文件的数据格式类型，决定用什么方式解析               | `'json' \| 'csv'` | `json` |
+| delimiter | 如果是 csv 文件，解析的时候分割符                     | `string`          | `,`    |
+| autoType  | 如果是 csv 文件，解析的时候是否自动判断列数据类型        | `boolean`         | `true` |
+| transform | 对加载后的数据进行变换操作                            | `DataTransform`   | `[]`   |
+
+在 `fetch` 实现上，如果 format 为 `json`，则使用 JavaScript 的 `fetch` API 然后将返回值转成 JSON Object；如果 format 为 `csv`，则调用 `d3-dsv` 去解析接口返回值。

site/docs/manual/core/data/inline.zh.md

@@ -3,12 +3,15 @@ title: inline
 order: 2
 ---
 
-使用内联数据。
+## 概述
 
-## 开始使用
+G2 的数据源来源有两种，一种是 `inline`，即直接传入具体的数据，这种是 G2 默认的数据源类型；另外一种数据源类型是 `fetch`，即从远程接口获取数据。
+
+### 使用方式
+
+显式的指定 `type` 为 `inline`，完整的写法如下：
 
 ```js
-// 完整写法
 chart.data({
   type: 'inline',
   value: [
@@ -19,8 +22,11 @@ chart.data({
     { genre: 'Other', sold: 150 },
   ],
 });
+```
+
+因为 G2 默认的数据类型就是 `inline`，所以也可以简写为如下：
 
-// 语法糖
+```js
 chart.data([
   { genre: 'Sports', sold: 275 },
   { genre: 'Strategy', sold: 115 },
@@ -30,9 +36,54 @@ chart.data([
 ]);
 ```
 
-## 选项
+## 开始使用
+
+举一个例子如下：
+
+```js | ob
+(() => {
+  const chart = new G2.Chart();
+
+  chart.options({
+    type: 'interval',
+    data: [
+      { genre: 'Sports', sold: 275 },
+      { genre: 'Strategy', sold: 115 },
+      { genre: 'Action', sold: 120 },
+      { genre: 'Shooter', sold: 350 },
+      { genre: 'Other', sold: 150 },
+    ],
+    encode: {
+      x: 'genre',
+      y: 'sold',
+    },
+  });
+
+  return chart.render().then((chart) => chart.getContainer());
+})();
+```
+
+## 配置项
 
 | 属性      | 描述                         | 类型            | 默认值 |
 | --------- | ---------------------------- | --------------- | ------ |
-| value     | 具体的 object 数组数据       | `object[]`      | `[]`   |
-| transform | 针对数据 inline 数据进行变换 | `DataTransform` | `[]`   |
+| value     | 具体的 object 数组数据         | `object[]`      | `[]`   |
+| transform | 针对数据 inline 数据进行变换    | `DataTransform` | `[]`   |
+
+这个数据源比较简单，相当于传入的数据，直接作为数据源进行 transform 处理加工，然后走渲染逻辑。
+
+⚠️ G2 支持了一些关系图的数据结构，这些数据结构是一个 JavaScript 的 Object 类型，所以使用简写传入的时候，可能会导致 G2 识别出错，所以建议如果图表的数据是 Object 对象，使用完整的写法传入数据。
+
+```js
+const graphData = {
+  nodes: [/** */],
+  edges: [/** */],
+};
+
+chart.data(graphData);  // ❌ 不建议这么写，G2 在处理的时候可能识别出错
+
+chart.data({            // ✅ 建议完整写法，语义更明确，不会因为歧义带来识别错误
+  type: 'inline',
+  value: graphData
+})
+```