This is an automated email from the ASF dual-hosted git repository.

ovilia pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-handbook.git


The following commit(s) were added to refs/heads/master by this push:
     new fae6ccc  doc: update content
fae6ccc is described below

commit fae6ccc466317c63ec954b1b6f4f7abb93272c95
Author: Ovilia <zwl.s...@gmail.com>
AuthorDate: Thu Jun 18 20:21:13 2020 +0800

    doc: update content
---
 .../zh/application/chart-types/bar/basic-bar.md    |   2 +-
 .../zh/application/chart-types/line/step-line.md   |  18 +-
 .../zh/application/chart-types/pie/basic-pie.md    | 104 ++++++++
 contents/zh/application/chart-types/pie/ring.md    |  91 +++++++
 contents/zh/application/chart-types/pie/rose.md    |  31 +++
 .../chart-types/scatter/basic-scatter.md           | 119 ++++++++++
 contents/zh/application/custom-build.md            | 264 +++++++++++++++++++++
 contents/zh/basics/help.md                         |  42 +++-
 contents/zh/concepts/visual-map.md                 | 129 ++++++++++
 contents/zh/posts.js                               |  23 ++
 10 files changed, 812 insertions(+), 11 deletions(-)

diff --git a/contents/zh/application/chart-types/bar/basic-bar.md 
b/contents/zh/application/chart-types/bar/basic-bar.md
index c980e5b..665177c 100644
--- a/contents/zh/application/chart-types/bar/basic-bar.md
+++ b/contents/zh/application/chart-types/bar/basic-bar.md
@@ -1,6 +1,6 @@
 # 基本柱状图
 
-柱状图(或称条形图)是一种通过柱形的高度(横向的情况下则是宽度)来表现数据大小的一种常用图表类型。
+柱状图(或称条形图)是一种通过柱形的长度来表现数据大小的一种常用图表类型。
 
 设置柱状图的方式,是将 `series` 的 `name` 设为 `'bar'`。
 
diff --git a/contents/zh/application/chart-types/line/step-line.md 
b/contents/zh/application/chart-types/line/step-line.md
index 4758ce1..d271602 100644
--- a/contents/zh/application/chart-types/line/step-line.md
+++ b/contents/zh/application/chart-types/line/step-line.md
@@ -15,22 +15,22 @@ option = {
         type: 'value'
     },
     series: [{
-        name:'Step Start',
-        type:'line',
+        name: 'Step Start',
+        type: 'line',
         step: 'start',
-        data:[120, 132, 101, 134, 90, 230, 210]
+        data: [120, 132, 101, 134, 90, 230, 210]
     },
     {
-        name:'Step Middle',
-        type:'line',
+        name: 'Step Middle',
+        type: 'line',
         step: 'middle',
-        data:[220, 282, 201, 234, 290, 430, 410]
+        data: [220, 282, 201, 234, 290, 430, 410]
     },
     {
-        name:'Step End',
-        type:'line',
+        name: 'Step End',
+        type: 'line',
         step: 'end',
-        data:[450, 432, 401, 454, 590, 530, 510]
+        data: [450, 432, 401, 454, 590, 530, 510]
     }]
 };
 ```
diff --git a/contents/zh/application/chart-types/pie/basic-pie.md 
b/contents/zh/application/chart-types/pie/basic-pie.md
new file mode 100644
index 0000000..eef94a7
--- /dev/null
+++ b/contents/zh/application/chart-types/pie/basic-pie.md
@@ -0,0 +1,104 @@
+# 基础饼图
+
+饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。
+
+## 最简单的饼图
+
+饼图的配置和折线图、柱状图略有不同,不再需要配置坐标轴,而是把数据名称和值都写在系列中。以下是一个最简单的饼图的例子。
+
+<!-- embed -->
+```js
+option = {
+    series: [{
+        type: 'pie',
+        data: [{
+            value: 335,
+            name: '直接访问'
+        }, {
+            value: 234,
+            name: '联盟广告'
+        }, {
+            value: 1548,
+            name: '搜索引擎'
+        }]
+    }]
+};
+```
+
+需要注意的是,这里是 `value` 不需要是百分比数据,ECharts 会根据所有数据的 `value` ,按比例分配它们在饼图中对应的弧度。
+
+
+## 饼图样式设置
+
+### 饼图的半径
+
+饼图的半径可以通过 [`series.radius`](${optionPath}series-pie.radius) 设置,可以是诸如 `'60%'` 
这样相对的百分比字符串,或是 `200` 
这样的绝对像素数值。当它是百分比字符串时,它是相对于容器宽高中较小的一条边的。也就是说,如果宽度大于高度,则百分比是相对于高度的,反之则反;当它是数值型时,它表示绝对的像素大小。
+
+<!-- embed -->
+```js
+option = {
+    series: [{
+        type: 'pie',
+        data: [{
+            value: 335,
+            name: '直接访问'
+        }, {
+            value: 234,
+            name: '联盟广告'
+        }, {
+            value: 1548,
+            name: '搜索引擎'
+        }],
+        radius: '50%'
+    }]
+};
+```
+
+## 如果数据和为0,不显示饼图
+
+在默认情况下,如果数据值和为 0,会显示平均分割的扇形。比如,如果有 4 个数据项,并且每个数据项都是 0,则每个扇形都是 
90°。如果我们希望在这种情况下不显示任何扇形,可以将 
[`series.stillShowZeroSum`](${optionPath}series-pie.stillShowZeroSum) 设为 
`false`。
+
+<!-- embed -->
+```js
+option = {
+    series: [{
+        type: 'pie',
+        stillShowZeroSum: false,
+        data: [{
+            value: 0,
+            name: '直接访问'
+        }, {
+            value: 0,
+            name: '联盟广告'
+        }, {
+            value: 0,
+            name: '搜索引擎'
+        }]
+    }]
+};
+```
+
+如果希望扇形对应的标签也不现实,可以将 [`series.label.show`](${optionPath}series-pie.label.show) 
设为 `false`。
+
+<!-- embed -->
+```js
+option = {
+    series: [{
+        type: 'pie',
+        stillShowZeroSum: false,
+        label: {
+            show: false
+        }
+        data: [{
+            value: 0,
+            name: '直接访问'
+        }, {
+            value: 0,
+            name: '联盟广告'
+        }, {
+            value: 0,
+            name: '搜索引擎'
+        }]
+    }]
+};
+```
diff --git a/contents/zh/application/chart-types/pie/ring.md 
b/contents/zh/application/chart-types/pie/ring.md
new file mode 100644
index 0000000..58d769d
--- /dev/null
+++ b/contents/zh/application/chart-types/pie/ring.md
@@ -0,0 +1,91 @@
+# 环形图
+
+环形图同样可以用来表示数据占总体的比例,相比于饼图,它中间空余的部分可以用来显示一些额外的文字等信息,因而也是一种常用的图表类型。
+
+## 基础环形图
+
+在 ECharts 
中,饼图的半径除了上一小节提到的,可以是一个数值或者字符串之外,还可以是一个包含两个元素的数组,每个元素可以为数值或字符串。当它是一个数组时,它的前一项表示内半径,后一项表示外半径,这样就形成了一个环形图。
+
+从这个角度上来说,可以认为饼图是一个内半径为 0 的环形图,也就是说,饼图是环形图的特例。
+
+<!-- embed -->
+```js
+option = {
+    title: {
+        text: '环形图的例子',
+        left: 'center',
+        top: 'center'
+    },
+    series: [{
+        type: 'pie',
+        data: [{
+            value: 335,
+            name: 'A'
+        }, {
+            value: 234,
+            name: 'B'
+        }, {
+            value: 1548,
+            name: 'C'
+        }],
+        radius: ['40%', '70%']
+    }]
+};
+```
+
+如果半径是数组,其中的两项也可以一项是数值,另一项是百分比形式的字符串。但是这样可能导致在某些分辨率下,内半径小于外半径。ECharts 
会自动使用小的一项作为内半径,但是仍应小心这样可能会导致的非预期效果。
+
+## 在环形图中间显示高亮扇形对应的文字
+
+上面的例子展现了在环形图中间显示固定文字的例子,下面我们要介绍,如何在环形图中间显示鼠标高亮的扇形对应的文字。实现这一效果的思路是,利用系列的 
`label`(默认用扇形颜色显示数据的 `name`),显示在环形图中间。在默认情况下不显示系列的 `label`,在高亮时显示。具体的代码如下:
+
+<!-- embed -->
+```js
+option = {
+    tooltip: {
+        trigger: 'item',
+        formatter: "{a} <br/>{b}: {c} ({d}%)"
+    },
+    legend: {
+        orient: 'vertical',
+        x: 'left',
+        data: ['A', 'B', 'C', 'D', 'E']
+    },
+    series: [
+        {
+            type: 'pie',
+            radius: ['50%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+                show: false,
+                position: 'center',
+                emphasis: {
+                }
+            },
+            labelLine: {
+                show: false
+            },
+            emphasis: {
+                label: {
+                    show: true,
+                    textStyle: {
+                        fontSize: '30',
+                        fontWeight: 'bold'
+                    }
+                }
+            },
+            data:[
+                {value: 335, name: 'A'},
+                {value: 310, name: 'B'},
+                {value: 234, name: 'C'},
+                {value: 135, name: 'D'},
+                {value: 1548, name: 'E'}
+            ]
+        }
+    ]
+};
+```
+
+其中,`avoidLabelOverlap` 是用来控制是否由 ECharts 调整标签位置以实现防止标签重叠。它的默认值是 
`true`,而在这里,我们不希望标签位置调整到不是中间的位置,因此我们需要将其设为 `false`。
+
+这样,环形图中间会显示高亮数据的 `name` 值。
diff --git a/contents/zh/application/chart-types/pie/rose.md 
b/contents/zh/application/chart-types/pie/rose.md
new file mode 100644
index 0000000..908af91
--- /dev/null
+++ b/contents/zh/application/chart-types/pie/rose.md
@@ -0,0 +1,31 @@
+# 南丁格尔图(玫瑰图)
+
+南丁格尔图又称玫瑰图,通常用弧度相同但半径不同的扇形表示各个类目。
+
+ECharts 可以通过将饼图的 [`series.roseType`](${optionPath}series-pie.roseType) 值设为 
`'area'` 实现南丁格尔图,其他配置项和饼图是相同的。
+
+<!-- embed -->
+```js
+option = {
+    series: [{
+        type: 'pie',
+        data: [{
+            value: 100,
+            name: 'A'
+        }, {
+            value: 200,
+            name: 'B'
+        }, {
+            value: 300,
+            name: 'C'
+        }, {
+            value: 400,
+            name: 'D'
+        }, {
+            value: 500,
+            name: 'E'
+        }],
+        roseType: 'area'
+    }]
+};
+```
diff --git a/contents/zh/application/chart-types/scatter/basic-scatter.md 
b/contents/zh/application/chart-types/scatter/basic-scatter.md
new file mode 100644
index 0000000..70b0da4
--- /dev/null
+++ b/contents/zh/application/chart-types/scatter/basic-scatter.md
@@ -0,0 +1,119 @@
+# 基础散点图
+
+散点图又称气泡图,也是一种常见的图表类型。散点图由许多“点”组成,有时,这些点用来表示数据在坐标系中的位置(比如在笛卡尔坐标系下,表示数据在 x 轴和 y 
轴上的坐标;在地图坐标系下,表示数据在地图上的某个位置等);有时,这些点的大小、颜色等属性也可以映射到数据值,用以表现高维数据。
+
+## 最简单的散点图
+
+下面是一个横坐标为类目轴、纵坐标为数值轴的最简单的散点图配置:
+
+<!-- embed -->
+```js
+option = {
+    xAxis: {
+        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+    },
+    yAxis: {},
+    series: [{
+        type: 'scatter',
+        data: [220, 182, 191, 234, 290, 330, 310]
+    }]
+};
+```
+
+
+## 笛卡尔坐标系下的散点图
+
+在上文的例子中,散点图的横坐标都是离散的类目轴,而纵坐标都是连续的数值轴。而对于散点图而言,另一种常见的场景是,两个坐标轴均为连续的数值轴,也就是笛卡尔坐标系。这时的系列形式略有不同,数据的横坐标和纵坐标一同写在
 `data` 中,而非坐标轴中。
+
+<!-- embed -->
+```js
+option = {
+    xAxis: {},
+    yAxis: {},
+    series: [{
+        type: 'scatter',
+        data:[
+            [10, 5],
+            [0, 8],
+            [6, 10],
+            [2, 12],
+            [8, 9]
+        ]
+    }]
+};
+```
+
+
+## 散点图样式设置
+
+### 图形的形状
+
+图形(symbol)指的是散点图中数据“点”的形状。有三类图形可选,一种是 ECharts 内置形状,第二种是图片,第三种是 SVG 的路径。
+
+ECharts 
内置形状包括:圆形、矩形、圆角矩形、三角形、菱形、大头针形、箭头形,分别对应`'circle'`、`'rect'`、`'roundRect'`、`'triangle'`、`'diamond'`、`'pin'`、`'arrow'`。使用内置形状时,只要将
 `symbol` 属性指定为形状名称对应的字符串即可。
+
+如果想要将图形指定为任意的图片,以 `'image://'` 
开头,后面跟图片的绝对或相对地址。形如:`'image://http://example.com/xxx.png'` 或 
`'image://./xxx.png'`。
+
+除此之外,还支持 SVG的路径作为矢量图形,将 `symbol` 设置为以 `'path://'` 开头的 SVG 
路径即可。使用矢量图形的好处是,图片不会因为缩放而产生锯齿或模糊,并且通常而言比图片形式的文件大小更小。路径的查看方法为,打开一个 `SVG` 文件,找到形如 
`<path d="M… L…"></path>` 的路径,将 `d` 的值添加在 `'path://'` 后即可。
+
+下面,我们展示一个将图形设置为矢量爱心形状的方式。
+
+首先,我们需要一个爱心的 SVG 文件,可以使用矢量编辑软件绘制,或者从网上下载到相关资源。其内容如下:
+
+<!-- embed -->
+```xml
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg"; 
xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px" viewBox="0 0 51.997 
51.997" style="enable-background:new 0 0 51.997 51.997;" xml:space="preserve">
+    <path 
d="M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905
 
c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478
 
c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014
 C52.216,18.553,51.97,16.611,51.911,16.242z"/>
+</svg>
+```
+
+在 ECharts 的 `symbol` 配置项中,我们使用d的值作为路径。
+
+<!-- embed -->
+```js
+option = {
+    xAxis: {
+        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+    },
+    yAxis: {},
+    series: [{
+        type: 'scatter',
+        data:[220, 182, 191, 234, 290, 330, 310],
+        symbol: 
'path://M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905
 
c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478
 
c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014
 C52.216,18.553,51.97,16.611,51.911,16.242z'
+    }]
+};
+```
+
+这样,就能得到爱心形状的图形作为点的形状了。
+
+### 图形的大小
+
+图形大小可以使用 [`series.symbolSize`](${optionPath}series-scatter.symbolSize) 
控制。它既可以是一个表示图形大小的像素值,也可以是一个包含两个 number 元素的数组,分别表示图形的宽和高。
+
+除此之外,它还可以是一个回调函数,其参数格式为:
+
+```
+(value: Array|number, params: Object) => number|Array
+```
+
+第一个参数为数据值,第二个参数是数据项的其他参数。
+
+在下面的例子中,我们将散点图点的大小设置为与其数据值成正比。
+
+<!-- embed -->
+```js
+option = {
+    xAxis: {
+        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+    },
+    yAxis: {},
+    series: [{
+        type: 'scatter',
+        data:[220, 182, 191, 234, 290, 330, 310],
+        symbolSize: function(value) {
+            return value / 10;
+        }
+    }]
+};
+```
diff --git a/contents/zh/application/custom-build.md 
b/contents/zh/application/custom-build.md
new file mode 100644
index 0000000..2ed7579
--- /dev/null
+++ b/contents/zh/application/custom-build.md
@@ -0,0 +1,264 @@
+# 自定义构建
+
+一般来说,可以直接从 [CDN](https://www.jsdelivr.com/package/npm/echarts) 中获取构建后的 
ECharts,也可以从 [GitHub](https://github.com/apache/incubator-echarts/releases) 中的 
`echarts/dist` 文件夹中获取构建好的 echarts,这都可以直接在浏览器端项目中使用。这些构建好的 echarts 提供了下面这几种定制:
+
+- 
完全版:`echarts/dist/echarts.js`,体积最大,包含所有的图表和组件,所包含内容参见:`echarts/echarts.all.js`。
+- 
常用版:`echarts/dist/echarts.common.js`,体积适中,包含常见的图表和组件,所包含内容参见:`echarts/echarts.common.js`。
+- 
精简版:`echarts/dist/echarts.simple.js`,体积较小,仅包含最常用的图表和组件,所包含内容参见:`echarts/echarts.simple.js`。
+
+我们也可以自己构建 ECharts,能够仅仅包括自己所需要的图表和组件。可以用这几种方式自定义构建:
+
+- [在线自定义构建](${websitePath}/builder.html):比较方便。
+- 使用 `echarts/build/build.js` 脚本自定义构建:比在线构建更灵活一点,并且支持多语言。
+- 直接使用构建工具(如 
[rollup](https://rollupjs.org/)、[webpack](https://webpack.js.org//)、[browserify](http://browserify.org/))自己构建:也是一种选择。
+
+下面我们举些小例子,介绍后两种方式。
+
+
+## 准备工作:创建自己的工程和安装 echarts
+
+使用命令行,创建自己的工程:
+
+```shell
+mkdir myProject
+cd myProject
+```
+
+在 `myProject` 目录下使用命令行,初始化工程的 [npm](https://www.npmjs.com/) 环境并安装 
echarts(这里前提是您已经安装了 [npm](https://www.npmjs.com/)):
+
+```shell
+npm init
+npm install echarts --save
+```
+
+通过 npm 安装的 echarts 会出现在 `myProject/node_modules` 目录下,从而可以直接在项目代码中得到 echarts,例如:
+
+使用 ES Module:
+```js
+import * as echarts from 'echarts';
+```
+
+使用 CommonJS:
+```js
+var echarts = require('echarts')
+```
+
+下面仅以使用 ES Module 的方式来举例。
+
+
+
+## 使用 ECharts 提供的构建脚本自定义构建
+
+在这个例子中,我们要创建一个饼图,并且想自定义构建一个只含有饼图的 echarts 文件,从而能使 ECharts 文件的大小比较小一些。
+
+ECharts 已经提供了构建脚本 `echarts/build/build.js`,基于 [Node.js](https://nodejs.org) 
运行。我们可以在 `myProject` 目录下使用命令行,看到它的使用方式:
+
+```shell
+node node_modules/echarts/build/build.js --help
+```
+
+其中我们在这个例子里会用到的参数有:
+
+- `-i`:代码入口文件,可以是绝对路径或者基于当前命令行路径的相对路径。
+- `-o`:生成的 bundle 文件,可以是绝对路径或者基于当前命令行路径的相对路径。
+- `--min`:是否压缩文件(默认不压缩),并且去多余的打印错误信息的代码,形成生产环境可用的文件。
+- `--lang <language shortcut or file path>`:是否使用其他语言版本,默认是中文。例如:`--lang en` 
表示使用英文,`--lang my/langXX.js` 表示构建时使用 `<cwd>/my/langXX.js` 替代 
`echarts/lib/lang.js` 文件。
+- `--sourcemap`:是否输出 source map,以便于调试。
+- `--format`:输出的格式,可选 `'umb'`(默认)、`'amd'`、`'iife'`、`'cjs'`、`'es'`。
+
+既然我们想自定义构建一个只含有饼图的 echarts 文件,我们需要创建一个入口文件,可以命名为 
`myProject/echarts.custom.js`,文件里会引用所需要的 echarts 模块:
+
+```js
+// 引入 echarts 主模块。
+export * from 'echarts/src/echarts';
+// 引入饼图。
+import 'echarts/src/chart/pie';
+// 在这个场景下,可以引用 `echarts/src` 或者 `echarts/lib` 下的文件(但是不可混用),
+// 参见下方的解释:“引用 `echarts/lib/**` 还是 `echarts/src/**`”。
+```
+
+然后我们可以在 `myProject` 目录下使用命令行,这样开始构建:
+
+```shell
+node node_modules/echarts/build/build.js --min -i echarts.custom.js -o 
lib/echarts.custom.min.js
+```
+
+这样,`myProject/lib/echarts.custom.min.js` 就生成了。我们可以创建 `myProject/pie.html` 来使用它:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>myProject</title>
+    <!-- 引入 lib/echarts.custom.min.js -->
+    <script src="lib/echarts.custom.min.js"></script>
+</head>
+<body>
+    <div id="main" style="width: 600px;height:400px;"></div>
+    <script>
+        // 绘制图表。
+        echarts.init(document.getElementById('main')).setOption({
+            series: {
+                type: 'pie',
+                data: [
+                    {name: 'A', value: 1212},
+                    {name: 'B', value: 2323},
+                    {name: 'C', value: 1919}
+                ]
+            }
+        });
+    </script>
+</body>
+</html>
+```
+
+然后在浏览器里打开 `myProject/pie.html`,就可以看到一个饼图:
+
+![300xauto](~custom-build-pie.png)
+
+
+## 允许被引用的模块
+
+在自定义构建中,允许被引用的模块,全声明在 
[`myProject/node_module/echarts/echarts.all.js`](https://github.com/apache/incubator-echarts/blob/master/echarts.all.js)
 和 
[`myProject/node_module/echarts/src/export.js`](https://github.com/apache/incubator-echarts/blob/master/src/export.js)
 中。echarts 和 zrender 源代码中的其他模块,都是 echarts 的内部模块,**不应该去引用**。因为在后续 echarts 
版本升级中,内部模块的接口和功能可能变化,甚至模块本身也可能被移除。
+
+
+## 引用 `echarts/lib/**` 还是 `echarts/src/**`
+
++ 项目中如果直接引用 echarts 里的一些模块并自行构建,应该使用 `echarts/lib/**` 路径,而不可使用 
`echarts/src/**`。
++ 当使用构建脚本 `echarts/build/build.js` 打包 bundle,那么两者可以选其一使用(不可混用),使用 
`echarts/src/**` 可以获得稍微小一些的文件体积。
+
+> 原因是:目前,`echarts/src/**` 中是采用 ES Module 的源代码,`echarts/lib/**` 中是 
`echarts/src/**` 编译成为 CommonJS 后的产物(编译成 CommonJS 是为了向后兼容一些不支持 ES Module 的老版本 
NodeJS 和 webpack)。
+> 因为历史上,各个 echarts 扩展、各个用户项目,一直是使用的包路径是 
`echarts/lib/**`,所以这个路径不应该改变,否则,可能导致混合使用 `echarts/src/**` 和 `echarts/lib/**` 
得到两个不同的 echarts 名空间,造成问题。而使用 `echarts/build/build.js` 打包 bundle 
时没有涉及这个问题,`echarts/src/**` 中的 ES Module 便于静态分析从而得到稍微小些的文件体积。
+
+
+## 直接使用 rollup 自定义构建
+
+上文中介绍了如何使用 echarts 提供的脚本 `echarts/build/build.js` 
自定义构建。与此并列的另一种选择是,我们直接使用构建工具(如 
[rollup](https://rollupjs.org/)、[webpack](https://webpack.js.org//)、[browserify](http://browserify.org/))自定义构建,并且把
 echarts 代码和项目代码在构建成一体。在一些项目中可能需要这么做。下面我们仅仅介绍如何使用 
[rollup](https://rollupjs.org/) 来构建。[webpack](https://webpack.js.org//) 和 
[browserify](http://browserify.org/) 与此类同,不赘述。
+
+首先我们在 `myProject` 目录下使用 npm 安装 [rollup](https://rollupjs.org/):
+
+```shell
+npm install rollup --save-dev
+npm install rollup-plugin-node-resolve --save-dev
+npm install rollup-plugin-uglify --save-dev
+```
+
+接下来创建项目 JS 文件 `myProject/line.js` 来绘制图表,内容为:
+
+```js
+// 引入 echarts 主模块。
+import * as echarts from 'echarts/lib/echarts';
+// 引入折线图。
+import 'echarts/lib/chart/line';
+// 引入提示框组件、标题组件、工具箱组件。
+import 'echarts/lib/component/tooltip';
+import 'echarts/lib/component/title';
+import 'echarts/lib/component/toolbox';
+
+// 基于准备好的dom,初始化 echarts 实例并绘制图表。
+echarts.init(document.getElementById('main')).setOption({
+    title: {text: 'Line Chart'},
+    tooltip: {},
+    toolbox: {
+        feature: {
+            dataView: {},
+            saveAsImage: {
+                pixelRatio: 2
+            },
+            restore: {}
+        }
+    },
+    xAxis: {},
+    yAxis: {},
+    series: [{
+        type: 'line',
+        smooth: true,
+        data: [[12, 5], [24, 20], [36, 36], [48, 10], [60, 10], [72, 20]]
+    }]
+});
+```
+
+对于不支持 ES Module 的浏览器而言,刚才创建的 `myProject/line.js` 还不能直接被网页引用并在浏览器中运行,需要进行构建。使用 
[rollup](https://rollupjs.org/) 构建前,需要创建它的配置文件 
`myProject/rollup.config.js`,内容如下:
+
+```js
+// 这个插件用于在 `node_module` 文件夹(即 npm 用于管理模块的文件夹)中寻找模块。比如,代码中有
+// `import 'echarts/lib/chart/line';` 时,这个插件能够寻找到
+// `node_module/echarts/lib/chart/line.js` 这个模块文件。
+import nodeResolve from 'rollup-plugin-node-resolve';
+// 用于压缩构建出的代码。
+import uglify from 'rollup-plugin-uglify';
+// 用于多语言支持(如果不需要可忽略此 plugin)。
+// import ecLangPlugin from 'echarts/build/rollup-plugin-ec-lang';
+
+export default {
+    name: 'myProject',
+    // 入口代码文件,就是刚才所创建的文件。
+    input: './line.js',
+    plugins: [
+        nodeResolve(),
+        // ecLangPlugin({lang: 'en'}),
+        // 消除代码中的 __DEV__ 代码段,从而不在控制台打印错误提示信息。
+        uglify()
+    ],
+    output: {
+        // 以 UMD 格式输出,从而能在各种浏览器中加载使用。
+        format: 'umd',
+        // 输出 source map 便于调试。
+        sourcemap: true,
+        // 输出文件的路径。
+        file: 'lib/line.min.js'
+    }
+};
+```
+
+然后在 `myProject` 目录下使用命令行,构建工程代码 `myProject/line.js`:
+
+```shell
+./node_modules/.bin/rollup -c
+```
+
+> 其中 `-c` 表示让 `rollup` 使用我们刚才创建的 `myProject/rollup.config.js` 文件作为配置文件。
+
+构建生成的 `myProject/lib/line.min.js` 文件包括了工程代码和 echarts 
代码,并且仅仅包括我们所需要的图和组件,并且可以在浏览器中使用。我们可以用一个示例页面来测试一下,创建文件 
`myProject/line.html`,内容如下:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>myProject</title>
+</head>
+<body>
+    <!-- 为 echarts 准备一个具备大小(宽高)的Dom。 -->
+    <div id="main" style="width: 600px;height:400px;"></div>
+    <!-- 引入刚才构建好的文件。 -->
+    <script src="lib/line.min.js"></script>
+</body>
+</html>
+```
+
+在浏览器里打开 `myProject/line.html` 则会得到如下效果:
+
+<!-- TODO: image custom-build-line.png -->
+
+
+## 多语言支持
+
+上面的例子中能看到,工具箱组件(toolbox)的提示文字是中文。本质上,echarts 图表显示出来的文字,都可以通过 `option` 
来定制,改成任意语言。但是如果想“默认就是某种语言”,则需要通过构建来实现。
+
+在上面的例子中,可以在 `echarts/build/build.js` 的参数中指定语言:
+
+```shell
+node node_modules/echarts/build/build.js --min -i echarts.custom.js -o 
lib/echarts.custom.min.js --lang en
+```
+
+表示使用内置的英文。此外还可以是 `--lang fi`。
+
+```shell
+node node_modules/echarts/build/build.js --min -i echarts.custom.js -o 
lib/echarts.custom.min.js --lang my/langXX.js
+```
+
+表示在构建时使用 `myProject/my/langXX.js` 文件来替换 
`myProject/node_modules/echarts/lib/lang.js` 文件。这样可以在 `myProject/my/langXX.js` 
文件中自定义语言。注意这种方式中,必须指定 `-o` 或者 `--output`。
+
+另外,上面的 rollup 插件 `echarts/build/rollup-plugin-ec-lang` 也可以传入同样的参数,实现同样的功能。
diff --git a/contents/zh/basics/help.md b/contents/zh/basics/help.md
index b61dc29..fbb246f 100644
--- a/contents/zh/basics/help.md
+++ b/contents/zh/basics/help.md
@@ -1 +1,41 @@
-# 寻求帮助
\ No newline at end of file
+# 寻求帮助
+
+## 技术问题
+
+### 1. 确保现有文档等资料无法解决你的问题
+
+ECharts 
有非常大量的用户,所以你遇到过的问题,很可能别人在此之前也遇到并解决了。通过查看文档以及使用搜索引擎搜索关键字,可以帮助你自助地在第一时间解决问题,而不需要依赖社区的帮助。
+
+因此,在做其他操作前,请确保现有文档等资料无法解决你的问题。可以尝试查看或搜索的资料包括:
+
+- [API](${mainSitePath}/api.html)
+- [配置项手册](${mainSitePath}/option.html):可以尝试使用搜索功能
+- 本手册的文章
+- [常见问题](${mainSitePath}/faq.html)
+- 在 [GitHub issue](https://github.com/apache/incubator-echarts/issues) 中搜索关键字
+- 使用搜索引擎搜索关键字
+
+
+### 2. 创建一个最简单可复现的例子
+
+使用 [Codepen](https://codepen.io/Ovilia/pen/dyYWXWM) 或者 [ECharts 
Gallery](https://gallery.echartsjs.com/editor.html) 创建一个例子,这将使得他人更方便地复现你的问题。
+
+例子应尽可能以最简单的方式复现你的问题,去除不必要的配置项和数据,可以让帮助你的人更快速地定位问题,从而让你的问题更快得到解决。更详细的介绍请参见 [How 
to create a Minimal, Reproducible 
Example](https://stackoverflow.com/help/minimal-reproducible-example)。
+
+
+### 3. 判断是否是 bug
+
+#### 报告 bug 或请求新功能
+
+如果不符合文档描述或你的预期效果,这很有可能是 bug。如果是 bug,或者你有一个想请求事项的功能,请使用 [issue 
模板](https://ecomfe.github.io/echarts-issue-helper/) 中新建一个 issue 并按照提示详细描述。
+
+#### 咨询类问题
+
+如果不是 bug,而是不知道如何实现某种效果,可以尝试在 <a 
href="https://stackoverflow.com";>stackoverflow.com</a>、<a 
href="https://www.oschina.net/question/tag/echarts";>开源中国</a> 或 <a 
href="https://segmentfault.com/t/echarts";>segmentfault.com</a> 等问答平台上提问。
+
+如果没能得到答复,也可以发送邮件至邮件组 
[d...@echarts.apache.org](mailto:d...@echarts.apache.org)。为了让更多人理解你的问题,并且在将来搜索的时候得到帮助,强烈建议使用英文发送邮件。
+
+
+## 非技术类问题
+
+其他问题可以发送英文邮件至邮件组 [d...@echarts.apache.org](mailto:d...@echarts.apache.org)。
diff --git a/contents/zh/concepts/visual-map.md 
b/contents/zh/concepts/visual-map.md
index e69de29..30a3dfd 100644
--- a/contents/zh/concepts/visual-map.md
+++ b/contents/zh/concepts/visual-map.md
@@ -0,0 +1,129 @@
+# 数据的视觉映射
+
+数据可视化是数据到视觉元素的映射过程(这个过程也可称为视觉编码,视觉元素也可称为视觉通道)。
+
+ECharts 
的每种图表本身就内置了这种映射过程,比如折线图把数据映射到“线”,柱状图把数据映射到“长度”。一些更复杂的图表,如关系图、事件河流图、树图也都会做出各自内置的映射。
+
+此外,ECharts 还提供了 [visualMap 组件](${optionPath}visualMap) 来提供通用的视觉映射。`visualMap` 
组件中可以使用的视觉元素有:
+
+- 图形类别(symbol)、图形大小(symbolSize)
+- 颜色(color)、透明度(opacity)、颜色透明度(colorAlpha)、
+- 颜色明暗度(colorLightness)、颜色饱和度(colorSaturation)、色调(colorHue)
+
+下面对 `visualMap` 组件的使用方式进行简要的介绍。
+
+## 数据和维度
+
+ECharts中的数据,一般存放于 [`series.data`](${optionPath}series.data) 
中。根据图表类型不同,数据的具体形式也可能有些许差异。比如可能是“线性表“、“树“、“图“等。但他们都有个共性:都是“数据项(dataItem)“的集合。每个数据项含有“数据值(value)“和其他信息(如果需要的话)。每个数据值,可以是单一的数值(一维)或者一个数组(多维)。
+
+例如,[series.data](${optionPath}series.data) 最常见的形式,是“线性表“,即一个普通数组:
+
+```js
+series: {
+    data: [
+        {       // 这里每一个项就是数据项(dataItem)
+            value: 2323, // 这是数据项的数据值(value)
+            itemStyle: {...}
+        },
+        1212,   // 也可以直接是 dataItem 的 value,这更常见。
+        2323,   // 每个 value 都是“一维“的。
+        4343,
+        3434
+    ]
+}
+```
+
+```js
+series: {
+    data: [
+        {                        // 这里每一个项就是数据项(dataItem)
+            value: [3434, 129,  '圣马力诺'], // 这是数据项的数据值(value)
+            itemStyle: {...}
+        },
+        [1212, 5454, '梵蒂冈'],   // 也可以直接是 dataItem 的 value,这更常见。
+        [2323, 3223, '瑙鲁'],     // 每个 value 都是“三维“的,每列是一个维度。
+        [4343, 23,   '图瓦卢']    // 假如是“气泡图“,常见第一维度映射到x轴,
+                                 // 第二维度映射到y轴,
+                                 // 第三维度映射到气泡半径(symbolSize)
+    ]
+}
+```
+
+在图表中,往往默认把 value 的前一两个维度进行映射,比如取第一个维度映射到 x 轴,取第二个维度映射到y轴。如果想要把更多的维度展现出来,可以借助 
`visualMap`。最常见的情况,[散点图(scatter)](${optionPath}series-scatter) 使用半径展现了第三个维度。
+
+## visualMap 组件
+
+visualMap 组件定义了把数据的*哪个维度*映射到*什么视觉元素上*。
+
+现在提供如下两种类型的 visualMap 组件,通过 [visualMap.type](${optionPath}visualMap.type) 来区分。
+
+其定义结构例如:
+
+```js
+option = {
+    visualMap: [ // 可以同时定义多个 visualMap 组件。
+        { // 第一个 visualMap 组件
+            type: 'continuous', // 定义为连续型 visualMap
+            ...
+        },
+        { // 第二个 visualMap 组件
+            type: 'piecewise', // 定义为分段型 visualMap
+            ...
+        }
+    ],
+    ...
+};
+```
+
+
+## 连续型与分段型视觉映射组件
+
+ECharts 
的视觉映射组件分为连续型([visualMapContinuous](${optionPath}visualMap-continuous))与分段型([visualMapPiecewise](${optionPath}visualMap-piecewise))。
+
+连续型的意思是,进行视觉映射的数据维度是连续的数值;而分段型则是数据被分成了多段或者是离散型的数据。
+
+### 连续型视觉映射
+
+连续型视觉映射通过指定最大值、最小值,就可以确定视觉映射的范围。
+
+```js
+option = {
+    visualMap: [{
+        type: 'piecewise'
+        min: 0,
+        max: 5000,
+        dimension: 3,       // series.data 的第四个维度(即 value[3])被映射
+        seriesIndex: 4,     // 对第四个系列进行映射。
+        inRange: {          // 选中范围中的视觉配置
+            color: ['blue', '#121122', 'red'], // 定义了图形颜色映射的颜色列表,
+                            // 数据最小值映射到'blue'上,
+                            // 最大值映射到'red'上,
+                            // 其余自动线性计算。
+            symbolSize: [30, 100]   // 定义了图形尺寸的映射范围,
+                                    // 数据最小值映射到30上,
+                                    // 最大值映射到100上,
+                                    // 其余自动线性计算。
+        },
+        outOfRange: {       // 选中范围外的视觉配置
+            symbolSize: [30, 100]
+        }
+    },
+       ...
+    ]
+};
+```
+
+其中,[visualMap.inRange](${optionPath}visualMap.inRange) 表示在数据映射范围内的数据采用的样式;而 
[visualMap.outOfRange](${optionPath}visualMap.outOfRange) 则指定了超出映射范围外的数据的样式。
+
+[visualMap.dimension](~visualMap.dimension) 则指定了将数据的哪个维度做视觉映射。
+
+
+### 分段型视觉映射
+
+分段型视觉映射组件有三种模式:
+
+- 连续型数据平均分段:依据 
[visualMap-piecewise.splitNumber](${optionPath}visualMap-piecewise.splitNumber) 
来自动平均分割成若干块。
+- 连续型数据自定义分段:依据 
[visualMap-piecewise.pieces](${optionPath}visualMap-piecewise.pieces) 来定义每块范围。
+- 离散数据(类别性数据):类别定义在 
[visualMap-piecewise.categories](${optionPath}visualMap-piecewise.categories) 中。
+
+使用分段型视觉映射时,需要将 `type` 设为 `'piecewise'`,并且将上面的三个配置项选其一配置即可,其他配置项类似连续型视觉映射。
diff --git a/contents/zh/posts.js b/contents/zh/posts.js
index d3b2511..167bc90 100644
--- a/contents/zh/posts.js
+++ b/contents/zh/posts.js
@@ -106,6 +106,26 @@ export default [{
                 title: '阶梯线图',
                 dir: 'step-line'
             }]
+        }, {
+            title: '饼图',
+            dir: 'pie',
+            children: [{
+                title: '基础饼图',
+                dir: 'basic-pie'
+            }, {
+                title: '环形图',
+                dir: 'ring'
+            }, {
+                title: '南丁格尔图(玫瑰图)',
+                dir: 'rose'
+            }]
+        }, {
+            title: '散点图',
+            dir: 'scatter',
+            children: [{
+                title: '基础散点图',
+                dir: 'basic-scatter'
+            }]
         }]
     }, {
         title: '移动端优化',
@@ -114,6 +134,9 @@ export default [{
         title: '跨平台方案',
         dir: 'cross-platform'
     }, {
+        title: '自定义构建',
+        dir: 'custom-build'
+    }, {
         title: '无障碍访问',
         dir: 'aria'
     }, {


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org

Reply via email to