You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2020/06/18 12:21:29 UTC
[incubator-echarts-handbook] branch master updated: doc: update
content
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 <zw...@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`，就可以看到一个饼图：
+
+
+
+
+## 允许被引用的模块
+
+在自定义构建中，允许被引用的模块，全声明在 [`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> 等问答平台上提问。
+
+如果没能得到答复，也可以发送邮件至邮件组 [dev@echarts.apache.org](mailto:dev@echarts.apache.org)。为了让更多人理解你的问题，并且在将来搜索的时候得到帮助，强烈建议使用英文发送邮件。
+
+
+## 非技术类问题
+
+其他问题可以发送英文邮件至邮件组 [dev@echarts.apache.org](mailto:dev@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-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org