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 2019/09/23 08:09:21 UTC
[incubator-echarts-doc] branch master updated: doc: add English
translation for gl document (#66)
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-doc.git
The following commit(s) were added to refs/heads/master by this push:
new 82332b8 doc: add English translation for gl document (#66)
82332b8 is described below
commit 82332b8da9ae1dd01763d18d1983986b8e9d0dde
Author: Dinger <wa...@gmail.com>
AuthorDate: Mon Sep 23 16:09:16 2019 +0800
doc: add English translation for gl document (#66)
---
cn/option-gl/component/axis3D-axis-common.md | 8 +-
cn/option-gl/component/axis3D-common.md | 8 +-
cn/option-gl/component/geo3D-common.md | 18 +-
cn/option-gl/component/geo3D.md | 4 +-
cn/option-gl/component/globe.md | 12 +-
cn/option-gl/component/grid3D.md | 2 +-
cn/option-gl/component/mapbox3D.md | 2 +-
cn/option-gl/partial/animation.md | 2 +-
cn/option-gl/partial/box-size.md | 6 +-
cn/option-gl/partial/environment.md | 2 +-
cn/option-gl/partial/formatter.md | 78 ++++++++
cn/option-gl/partial/label.md | 15 +-
cn/option-gl/partial/light.md | 6 +-
cn/option-gl/partial/post-effect.md | 39 ++--
cn/option-gl/partial/series-name.md | 2 +-
cn/option-gl/partial/shading.md | 16 +-
cn/option-gl/partial/temporal-super-sampling.md | 2 +-
cn/option-gl/partial/view-control.md | 6 +-
cn/option-gl/partial/zlevel.md | 2 +-
cn/option-gl/series/bar3D.md | 2 +-
cn/option-gl/series/flowGL.md | 10 +-
cn/option-gl/series/graphGL.md | 6 +-
cn/option-gl/series/lines3D.md | 2 +-
cn/option-gl/series/polygons3D.md | 4 +-
cn/option-gl/series/scatter3D.md | 2 +-
cn/option-gl/series/series.md | 2 +-
cn/option-gl/series/surface.md | 9 +-
en/api/events.md | 2 +-
en/changelog.md | 26 +--
en/option-gl/component/axis3D-axis-common.md | 134 ++++++++++++++
{cn => en}/option-gl/component/axis3D-common.md | 102 +++++------
{cn => en}/option-gl/component/geo3D-common.md | 69 +++----
en/option-gl/component/geo3D.md | 16 ++
en/option-gl/component/globe.md | 199 +++++++++++++++++++--
en/option-gl/component/grid3D.md | 73 ++++++++
en/option-gl/component/mapbox3D.md | 83 +++++++++
en/option-gl/component/xAxis3D.md | 27 +++
en/option-gl/component/yAxis3D.md | 27 +++
en/option-gl/component/zAxis3D.md | 27 +++
en/option-gl/option-gl.md | 20 ++-
{cn => en}/option-gl/partial/animation.md | 13 +-
en/option-gl/partial/area-style.md | 19 ++
en/option-gl/partial/blend-mode.md | 9 +
{cn => en}/option-gl/partial/box-size.md | 6 +-
en/option-gl/partial/environment.md | 22 +++
en/option-gl/partial/formatter.md | 78 ++++++++
en/option-gl/partial/icon.md | 16 ++
en/option-gl/partial/item-style.md | 18 ++
{cn => en}/option-gl/partial/label.md | 50 +++---
en/option-gl/partial/light.md | 104 +++++++++++
en/option-gl/partial/line-style.md | 23 +++
en/option-gl/partial/post-effect.md | 187 +++++++++++++++++++
en/option-gl/partial/series-name.md | 3 +
en/option-gl/partial/shading.md | 98 ++++++++++
en/option-gl/partial/symbol.md | 17 ++
en/option-gl/partial/temporal-super-sampling.md | 19 ++
en/option-gl/partial/view-control.md | 155 ++++++++++++++++
.../partial/viewport.md} | 84 ++++-----
en/option-gl/partial/zlevel.md | 12 ++
{cn => en}/option-gl/series/bar3D.md | 46 ++---
en/option-gl/series/common-coordinate-system.md | 61 +++++++
en/option-gl/series/common-data.md | 29 +++
en/option-gl/series/flowGL.md | 85 +++++++++
en/option-gl/series/graphGL.md | 174 ++++++++++++++++++
en/option-gl/series/line3D.md | 65 +++++++
en/option-gl/series/lines3D.md | 122 +++++++++++++
en/option-gl/series/map3D.md | 21 +++
en/option-gl/series/polygons3D.md | 65 +++++++
{cn => en}/option-gl/series/scatter3D.md | 25 ++-
en/option-gl/series/scatterGL.md | 66 +++++++
en/option-gl/series/series.md | 9 +
en/option-gl/series/silent.md | 4 +
{cn => en}/option-gl/series/surface.md | 92 +++++-----
en/option/component/aria.md | 44 ++---
en/option/component/axisPointer.md | 2 +-
en/option/component/brush.md | 2 +-
en/option/component/graphic.md | 2 +-
en/option/component/toolbox.md | 4 +-
en/option/component/visual-map-continuous.md | 4 +-
en/option/component/visual-map.md | 6 +-
en/option/option.md | 7 +
en/option/partial/1d-data.md | 4 +-
en/option/partial/2d-data.md | 2 +-
en/option/partial/animation.md | 2 +-
en/option/partial/axisPointer-common.md | 2 +-
en/option/partial/encode-dimensions.md | 2 +-
en/option/partial/icon.md | 2 +-
en/option/partial/mark-area.md | 8 +-
en/option/partial/rect-layout.md | 8 +-
en/option/partial/series-name.md | 2 +-
en/option/partial/tooltip-common.md | 2 +-
en/option/partial/z-zlevel.md | 2 +-
en/option/partial/zr-graphic.md | 4 +-
en/option/series/custom.md | 4 +-
en/option/series/line.md | 2 +-
en/option/series/lines.md | 5 +-
en/option/series/pictorialBar.md | 4 +-
en/option/series/tree.md | 4 +-
en/tutorial/aria.md | 17 +-
99 files changed, 2581 insertions(+), 435 deletions(-)
diff --git a/cn/option-gl/component/axis3D-axis-common.md b/cn/option-gl/component/axis3D-axis-common.md
index 0e2160f..e17830c 100644
--- a/cn/option-gl/component/axis3D-axis-common.md
+++ b/cn/option-gl/component/axis3D-axis-common.md
@@ -6,7 +6,7 @@
## nameTextStyle(Object)
-坐标轴名称的显示样式。
+坐标轴名称的文字样式。
{{ use: partial-text-style(
prefix='##',
@@ -32,10 +32,10 @@
类目轴，适用于离散的类目数据，为该类型时必须通过 [data](~${componentType}.data) 设置类目数据。
+ `'time'`
- 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
+ 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月、星期、日、小时范围的刻度。
+ `'log'`
- 对数轴。适用于对数数据。
+ 对数轴，适用于对数数据。
## min(number|string) = null
@@ -53,7 +53,7 @@
可以设置成特殊值 `'dataMax'`，此时取数据在该轴上的最大值作为最大刻度。
-不设置时会自动计算最大值保证坐标轴刻度的均匀分布。
+如果不设置，则会自动计算最大值来保证坐标轴刻度的均匀分布。
在类目轴中，也可以设置为类目的序数（如类目轴 `data: ['类A', '类B', '类C']` 中，序数 `2` 表示 `'类C'`。也可以设置为负数，如 `-3`）。
diff --git a/cn/option-gl/component/axis3D-common.md b/cn/option-gl/component/axis3D-common.md
index 406fb09..01da740 100644
--- a/cn/option-gl/component/axis3D-common.md
+++ b/cn/option-gl/component/axis3D-common.md
@@ -5,7 +5,7 @@ ${name}的显示间隔，在类目轴中有效。{{ if: !${isAxisLabel} }}默认
可以设置成 0 强制显示所有标签。
-如果设置为 `1`，表示『隔一个标签显示一个标签』，如果值为 `2`，表示隔两个标签显示一个标签，以此类推。
+如果设置为 `1`，表示『隔一个标签显示一个标签』，如果值为 `2`，表示『隔两个标签显示一个标签』，以此类推。
可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：
```js
@@ -17,7 +17,7 @@ ${name}的显示间隔，在类目轴中有效。{{ if: !${isAxisLabel} }}默认
{{target: component-axis3D-common-formatter-desc}}
-刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
+刻度标签的内容格式器。支持字符串模板和回调函数两种形式。
示例:
```js
@@ -163,7 +163,7 @@ textStyle: {
#${prefix|default('#')} splitArea(Object)
坐标轴在 [grid3D](~grid3D) 的平面上的分隔区域。
-##${prefix|default('#')} show(boolean) = ${defaultShow|default(true)}
+##${prefix|default('#')} show(boolean) = ${defaultShow|default(false)}
是否显示分隔区域。
{{ if: ${hasLabelInterval|default(true)} }}
@@ -206,7 +206,7 @@ textStyle: {
###${prefix|default('#')} formatter(Function)
-标签格式器，函数第一个参数是当前坐标轴的数值，第二个参数是所有坐标轴的数值数组
+标签格式器，函数第一个参数是当前坐标轴的数值，第二个参数是所有坐标轴的数值数组。
```js
(value: number, valueAll: Array) => string
diff --git a/cn/option-gl/component/geo3D-common.md b/cn/option-gl/component/geo3D-common.md
index dc9ad20..f99def0 100644
--- a/cn/option-gl/component/geo3D-common.md
+++ b/cn/option-gl/component/geo3D-common.md
@@ -3,11 +3,11 @@
## map(string)
-地图类型。echarts-gl 中使用的地图类型同 [geo](http://echarts.baidu.com/option.html#geo.map) 组件相同
+地图类型。echarts-gl 中使用的地图类型同 [geo](http://echarts.baidu.com/option.html#geo.map) 组件相同。
你可以在[地图下载界面](http://ecomfe.github.io/echarts-builder-web/map3.html)下载到需要的地图文件引入并注册到 ECharts 中。
-ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。
+ECharts 提供了两种格式的地图数据，一种是可以直接通过 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。
下面是两种类型的使用示例：
@@ -42,7 +42,7 @@ $.get('map/json/china.json', function (chinaJson) {
});
```
-ECharts 使用 [geoJSON](http://geojson.org/) 格式的数据作为地图的轮廓，除了上述数据，你也可以通过其它手段获取地图的 [geoJSON](http://geojson.org/) 数据注册到 ECharts 中。
+ECharts 使用 [geoJSON](http://geojson.org/) 格式的数据作为地图的轮廓。除此之外，你也可以通过其它手段获取地图的 [geoJSON](http://geojson.org/) 格式的数据注册到 ECharts 中。
{{ use: partial-box-size-geo3D(
componentType=${componentType},
@@ -99,7 +99,7 @@ ${componentName} 中三维图形的视觉属性，包括颜色，透明度，描
## emphasis(Object)
-鼠标 hover 高亮时图形和标签的样式
+鼠标 hover 高亮时图形和标签的样式。
### label(Object)
@@ -116,7 +116,7 @@ ${componentName} 中三维图形的视觉属性，包括颜色，透明度，描
## {{ if: ${inMap} }} data(Array) {{ else: }} regions(Array) {{ /if }}
-地图区域的设置，
+地图区域的设置。
### name(string)
所对应的地图区域的名称，例如 `'广东'`，`'浙江'`。
@@ -127,7 +127,7 @@ ${componentName} 中三维图形的视觉属性，包括颜色，透明度，描
{{ /if }}
### regionHeight(number)
-区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。如下图
+区域的高度。可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。如下图:
@@ -150,7 +150,7 @@ ${componentName} 中三维图形的视觉属性，包括颜色，透明度，描
### emphasis(Object)
-单个区域标签和样式的高亮设置。
+单个区域的标签和样式的高亮设置。
#### itemStyle(Object)
@@ -218,11 +218,11 @@ ${componentName} 中三维图形的视觉属性，包括颜色，透明度，描
{{ /block }}
{{ block: boxDepthDescriptionExtra }}
-组件深度默认自动，保证三维组件的显示比例跟输入的 GeoJSON 的比例相同
+组件深度默认自动，保证三维组件的显示比例跟输入的 GeoJSON 的比例相同。
{{ /block }}
{{ block: boxHeightDescriptionExtra}}
-组件高度。这个高度包含三维地图上的柱状图，散点图。
+组件高度。这个高度包含三维地图上的柱状图、散点图的高度。
{{ /block }}
diff --git a/cn/option-gl/component/geo3D.md b/cn/option-gl/component/geo3D.md
index f1f217b..71969b5 100644
--- a/cn/option-gl/component/geo3D.md
+++ b/cn/option-gl/component/geo3D.md
@@ -3,11 +3,11 @@
# geo3D(Object)
-三维的地理坐标系组件。组件提供了三维 GeoJSON 的绘制以及相应的坐标系，开发者可以在上面展示三维的散点图，气泡图，柱状图，飞线图。
+三维的地理坐标系组件。组件提供了三维 GeoJSON 的绘制以及相应的坐标系，开发者可以在上面展示三维的散点图、气泡图、柱状图、飞线图。
## show(boolean) = true
-是否显示三维地理坐标系组件
+是否显示三维地理坐标系组件。
{{ use: component-geo3D-common(
componentType="geo3D",
diff --git a/cn/option-gl/component/globe.md b/cn/option-gl/component/globe.md
index be35dda..8827106 100644
--- a/cn/option-gl/component/globe.md
+++ b/cn/option-gl/component/globe.md
@@ -3,7 +3,7 @@
# globe(Object)
-地球组件。组件提供了地球的绘制以及相应的坐标系，开发者可以在上面展示三维的散点图，气泡图，柱状图，飞线图。
+地球组件。组件提供了地球的绘制以及相应的坐标系，开发者可以在上面展示三维的散点图、气泡图、柱状图、飞线图。
## show(boolean) = true
@@ -13,7 +13,7 @@
地球的半径。单位相对于三维空间，跟 [viewControl.distance](~globe.viewControl.distance) 相关。
## globeOuterRadius(number) = 150
-地球的外半径。`globeRadius` 到 `globeOuterRadius` 之间这篇区域会被用于展示三维柱状图，散点图等。
+地球的外半径。`globeRadius` 到 `globeOuterRadius` 之间这片区域会被用于展示三维柱状图，散点图等。
{{ use: partial-environment(
componentType="globe",
@@ -22,7 +22,7 @@
## baseTexture(string|HTMLImageElement|HTMLCanvasElement|EChartsInstance)
-地球的纹理。支持图片路径字符串，图片或者 Canvas 的对象。
+地球的纹理。支持图片路径的字符串，图片或者 Canvas 的对象。
也支持直接使用 echarts 的实例作为纹理，此时在地球上的鼠标动作会跟纹理上使用的 echarts 实例有联动。
@@ -56,7 +56,7 @@ baseTexture: mapChart
## heightTexture(string|HTMLImageElement|HTMLCanvasElement)
-地球的高度纹理。高度纹理可以用于[凹凸贴图](https://zh.wikipedia.org/wiki/%E5%87%B9%E5%87%B8%E8%B4%B4%E5%9B%BE)表现地球表面的明暗细节。下面两图分别是使用`heightTexture`和未使用`heightTexuture`的效果区别。
+地球的高度纹理。高度纹理可以用于[凹凸贴图](https://zh.wikipedia.org/wiki/%E5%87%B9%E5%87%B8%E8%B4%B4%E5%9B%BE)表现地球表面的明暗细节。下面两张图分别是使用`heightTexture`和未使用`heightTexuture`的效果区别。
@@ -190,7 +190,7 @@ chart.setOption({
### texture(string|HTMLImageElement|HTMLCanvasElement|EChartsInstance)
-层的纹理，支持图片路径字符串，图片或者 Canvas 的对象。
+层的纹理，支持图片路径的字符串、图片对象或者 Canvas 的对象。
也支持直接使用 echarts 的实例作为纹理，此时在地球上的鼠标动作会跟纹理上使用的 echarts 实例有联动。
@@ -202,7 +202,7 @@ chart.setOption({
{{ target: partial-shading-globe(master=partial-shading) }}
{{ block: shading-compare }}
-下面是不同着色效果的区别
+下面是不同着色效果的区别：
diff --git a/cn/option-gl/component/grid3D.md b/cn/option-gl/component/grid3D.md
index 3682020..ab90598 100644
--- a/cn/option-gl/component/grid3D.md
+++ b/cn/option-gl/component/grid3D.md
@@ -14,7 +14,7 @@
---
-> **注意：** [xAxis3D](~xAxis3D)，[yAxis3D](~yAxis3D)，[zAxis3D](~zAxis3D) 上单独设置的`axisLine`, `axisTick`, `axisLabel`, `splitLine`, `splitArea`, `axisPointer`会覆盖`grid3D`下的相应配置项。
+> **注意：** [xAxis3D](~xAxis3D)，[yAxis3D](~yAxis3D)，[zAxis3D](~zAxis3D) 上单独设置的 [axisLine](~xAxis3D.axisLine), [axisTick](~xAxis3D.axisTick), [axisLabel](~xAxis3D.axisLabel), [splitLine](~xAxis3D.splitLine), [splitArea](~xAxis3D.splitArea), [axisPointer](~xAxis3D.axisPointer)` 会覆盖[grid3D](~grid3D) 下的相应配置项。
diff --git a/cn/option-gl/component/mapbox3D.md b/cn/option-gl/component/mapbox3D.md
index e68109d..1c44ac4 100644
--- a/cn/option-gl/component/mapbox3D.md
+++ b/cn/option-gl/component/mapbox3D.md
@@ -55,7 +55,7 @@ Mapbox 地图的旋转角度。见 [https://www.mapbox.com/mapbox-gl-js/style-sp
## pitch(number) = 0
-视角俯视的倾斜角度。默认为`0`，也就是正对着地图。最大`60`。见 [https://www.mapbox.com/mapbox-gl-js/style-spec/#root-pitch](https://www.mapbox.com/mapbox-gl-js/style-spec/#root-pitch)
+视角俯视的倾斜角度。默认为`0`，也就是垂直于地图表面。最大的值是`60`。见 [https://www.mapbox.com/mapbox-gl-js/style-spec/#root-pitch](https://www.mapbox.com/mapbox-gl-js/style-spec/#root-pitch)
## altitudeScale(number) = 1
diff --git a/cn/option-gl/partial/animation.md b/cn/option-gl/partial/animation.md
index 031eb18..543a0b2 100644
--- a/cn/option-gl/partial/animation.md
+++ b/cn/option-gl/partial/animation.md
@@ -21,7 +21,7 @@
如下示例：
```js
animationDelayUpdate: function (idx) {
- // 越往后的数据延迟越大
+ // 越往后的数据,动画的延迟越大
return idx * 100;
}
```
diff --git a/cn/option-gl/partial/box-size.md b/cn/option-gl/partial/box-size.md
index 0c562b1..09075b4 100644
--- a/cn/option-gl/partial/box-size.md
+++ b/cn/option-gl/partial/box-size.md
@@ -2,21 +2,21 @@
#${prefix|default('#')} boxWidth(number) = ${defaultBoxWidth|default(100)}
-${componentName}组件在三维场景中的宽度。配合 [viewControl.distance](~${componentType}.viewControl.distance) 可以得到最合适的展示尺寸。
+${componentName}在三维场景中的宽度。配合 [viewControl.distance](~${componentType}.viewControl.distance) 可以得到最合适的展示尺寸。
{{ block: boxWidthDescriptionExtra }}
{{ /block }}
#${prefix|default('#')} boxHeight(number) = ${defaultBoxHeight|default(100)}
-${componentName}组件在三维场景中的高度。
+${componentName}在三维场景中的高度。
{{ block: boxHeightDescriptionExtra }}
{{ /block }}
#${prefix|default('#')} boxDepth(number) = ${defaultBoxDepth|default(100)}
-${componentName}组件在三维场景中的深度。
+${componentName}在三维场景中的深度。
{{ block: boxDepthDescriptionExtra }}
{{ /block }}
\ No newline at end of file
diff --git a/cn/option-gl/partial/environment.md b/cn/option-gl/partial/environment.md
index 5cc31bf..593813d 100644
--- a/cn/option-gl/partial/environment.md
+++ b/cn/option-gl/partial/environment.md
@@ -2,7 +2,7 @@
#${prefix|default("#")} environment(string) = 'auto'
-环境贴图，支持純颜色值，渐变色，全景贴图的 url。默认为 `'auto'`，在配置有 [light.ambientCubemap.texture](~${componentType}.light.ambientCubemap.texture) 的时候会使用该纹理作为环境贴图。否则则不显示环境贴图。
+环境贴图。支持纯色、渐变色、全景贴图的 url。默认为 `'auto'`，在配置有 [light.ambientCubemap.texture](~${componentType}.light.ambientCubemap.texture) 的时候会使用该纹理作为环境贴图。否则则不显示环境贴图。
示例：
```js
diff --git a/cn/option-gl/partial/formatter.md b/cn/option-gl/partial/formatter.md
new file mode 100644
index 0000000..e60ef0a
--- /dev/null
+++ b/cn/option-gl/partial/formatter.md
@@ -0,0 +1,78 @@
+{{ target: partial-formatter-params-structure }}
+
+```js
+{
+ componentType: 'series',
+ // 系列类型
+ seriesType: string,
+ // 系列在传入的 option.series 中的 index
+ seriesIndex: number,
+ // 系列名称
+ seriesName: string,
+ // 数据名，类目名
+ name: string,
+ // 数据在传入的 data 数组中的 index
+ dataIndex: number,
+ // 传入的原始数据项
+ data: Object,
+ // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）
+ value: number|Array|Object,
+ // 坐标轴 encode 映射信息，
+ // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）
+ // value 必然为数组，不会为 null/undefied，表示 dimension index 。
+ // 其内容如：
+ // {
+ // x: [2] // dimension index 为 2 的数据映射到 x 轴
+ // y: [0] // dimension index 为 0 的数据映射到 y 轴
+ // }
+ encode: Object,
+ // 维度名列表
+ dimensionNames: Array<String>,
+ // 数据的维度 index，如 0 或 1 或 2 ...
+ // 仅在雷达图中使用。
+ dimensionIndex: number,
+ // 数据图形的颜色
+ color: string,
+{{ for: ${extra} as ${obj}, ${name} }}{{ if: ${extra}.hasOwnProperty(${name}) }}
+ // ${obj.desc}
+ ${name}: ${obj.type},
+{{ /if }}{{ /for }}
+}
+```
+
+注：encode 和 dimensionNames 的使用方式，例如：
+
+如果数据为：
+```js
+dataset: {
+ source: [
+ ['Matcha Latte', 43.3, 85.8, 93.7],
+ ['Milk Tea', 83.1, 73.4, 55.1],
+ ['Cheese Cocoa', 86.4, 65.2, 82.5],
+ ['Walnut Brownie', 72.4, 53.9, 39.1]
+ ]
+}
+```
+则可这样得到 y 轴对应的 value：
+```js
+params.value[params.encode.y[0]]
+```
+
+如果数据为：
+```js
+dataset: {
+ dimensions: ['product', '2015', '2016', '2017'],
+ source: [
+ {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
+ {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
+ {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
+ {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
+ ]
+}
+```
+则可这样得到 y 轴对应的 value：
+```js
+params.value[params.dimensionNames[params.encode.y[0]]]
+```
+
+{{ /target }}
\ No newline at end of file
diff --git a/cn/option-gl/partial/label.md b/cn/option-gl/partial/label.md
index 97b9a71..87b3341 100644
--- a/cn/option-gl/partial/label.md
+++ b/cn/option-gl/partial/label.md
@@ -26,7 +26,7 @@ ${name}文字的字体大小。
${name}文字字体的粗细。
-可选：
+**可选：**
+ `'normal'`
+ `'bold'`
+ `'bolder'`
@@ -34,9 +34,6 @@ ${name}文字字体的粗细。
+ 100 | 200 | 300 | 400...
-
-
-
{{ target: partial-label }}
#${prefix|default('##')} show(boolean) = ${defaultShow|default(false)}
@@ -65,15 +62,19 @@ ${name}文字字体的粗细。
标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 `\n` 换行。
-**字符串模板**
-模板变量有 `{a}`、`{b}`、`{c}`，分别表示系列名，数据名，数据值。
+**字符串模板**
+
+模板变量有：
++ `{a}`：系列名。
++ `{b}`：数据名。
++ `{c}`：数据值。
**示例：**
```js
formatter: '{b}: {c}'
```
-**回调函数**
+**回调函数**
回调函数格式：
```js
diff --git a/cn/option-gl/partial/light.md b/cn/option-gl/partial/light.md
index e07b9c9..9370672 100644
--- a/cn/option-gl/partial/light.md
+++ b/cn/option-gl/partial/light.md
@@ -22,7 +22,7 @@
###${prefix|default("#")} shadow(boolean) = false
-主光源是否投射阴影。默认关闭。
+主光源是否投射阴影。默认为关闭。
开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
@@ -76,11 +76,11 @@
##${prefix|default("#")} ambientCubemap(Object)
-ambientCubemap 会使用纹理作为光源的环境光， 会为物体提供漫反射和高光反射。可以通过 [diffuseIntensity](~${componentType}.light.ambientCubemap.diffuseIntensity) 和 [specularIntensity](~${componentType}.light.ambientCubemap.specularIntensity) 分别设置漫反射强度和高光反射强度。
+ambientCubemap 会使用纹理作为环境光的光源，会为物体提供漫反射和高光反射。可以通过 [diffuseIntensity](~${componentType}.light.ambientCubemap.diffuseIntensity) 和 [specularIntensity](~${componentType}.light.ambientCubemap.specularIntensity) 分别设置漫反射强度和高光反射强度。
###${prefix|default("#")} texture(string)
-环境光纹理的 url，支持使用`.hdr`格式的 HDR 贴图。可以从 http://www.hdrlabs.com/sibl/archive.html 等网站获取 `.hdr` 的资源。
+环境光贴图的 url，支持使用`.hdr`格式的 HDR 图片。可以从 http://www.hdrlabs.com/sibl/archive.html 等网站获取 `.hdr` 的资源。
例如：
diff --git a/cn/option-gl/partial/post-effect.md b/cn/option-gl/partial/post-effect.md
index 2bb57c4..071bd2d 100644
--- a/cn/option-gl/partial/post-effect.md
+++ b/cn/option-gl/partial/post-effect.md
@@ -2,7 +2,7 @@
#${prefix|default('#')} postEffect(Object)
-后处理特效的相关配置，后处理特效可以为画面添加高光，景深，环境光遮蔽（SSAO），调色等效果。可以让整个画面更富有质感。
+后处理特效的相关配置。后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
下面分别是关闭和开启 `postEffect` 的区别。
@@ -11,16 +11,16 @@
<img src="documents/asset/gl/img/globe-posteffect-enable.png" width="100%" title="Enable">
</div>
-注意在开启 postEffect 的时候默认会开启 [temporalSuperSampling](~${componentType}.temporalSuperSampling) 在画面静止后持续对画面增强，包括抗锯齿，景深，SSAO，阴影等。
+注意在开启 postEffect 的时候默认会开启 [temporalSuperSampling](~${componentType}.temporalSuperSampling) 在画面静止后持续对画面增强，包括抗锯齿、景深、SSAO、阴影等。
##${prefix|default('#')} enable(boolean) = false
-是否开启后处理特效，默认关闭。
+是否开启后处理特效。默认关闭。
##${prefix|default('#')} bloom(Object)
-高光特效。高光特效用来表现很“亮”的颜色，因为传统的 RGB 只能表现`0 - 255`范围的颜色，所以对于超出这个范围特别“亮”的颜色，会通过这种高光溢出的特效去表现。如下图
+高光特效。高光特效用来表现很“亮”的颜色，因为传统的 RGB 只能表现`0 - 255`范围的颜色，所以对于超出这个范围特别“亮”的颜色，会通过这种高光溢出的特效去表现。如下图：
@@ -34,9 +34,9 @@
##${prefix|default('#')} depthOfField(Object)
-景深效果。景深效果是模拟摄像机的光学成像效果，在对焦的区域相对清晰，原理对焦的区域则会逐渐模糊。
+景深效果。景深效果是模拟摄像机的光学成像效果，在对焦的区域相对清晰，离对焦的区域越远则会逐渐模糊。
-景深效果可以让观察者几种注意力到对焦的区域，而且让画面的镜头感更强，大景深还能塑造出微距的模型效果。
+景深效果可以让观察者集中注意力到对焦的区域，而且让画面的镜头感更强，大景深还能塑造出微距的模型效果。
下面分别是关闭和开启景深的区别。
@@ -47,7 +47,7 @@
###${prefix|default('#')} enable(boolean) = false
-是否开启景深
+是否开启景深。
###${prefix|default('#')} focalDistance(boolean) = 50
@@ -74,9 +74,10 @@
##${prefix|default('#')} screenSpaceAmbientOcclusion(Object)
-屏幕空间的环境光遮蔽效果。环境光遮蔽可以让角落，缝隙等大部分光无法到达的区域变暗，是传统的阴影贴图的补充，可以让整个场景更加自然，有层次。
+屏幕空间的环境光遮蔽效果。环境光遮蔽效果可以让拐角处、洞、缝隙等大部分光无法到达的区域变暗，是传统的阴影贴图的补充，可以让整个场景更加自然，有层次。
-下面是无 SSAO 和有 SSAO 的对比。
+
+下面是无 SSAO 和有 SSAO 的效果对比：
<div class="twentytwenty-container" style="width: 700px;">
<img src="documents/asset/gl/img/geo-no-ssao.png" width="100%" title="No SSAO">
@@ -90,17 +91,17 @@
###${prefix|default('#')} enable(boolean) = false
-是否开启环境光遮蔽，默认不开启
+是否开启环境光遮蔽。默认不开启。
###${prefix|default('#')} quality(string) = 'medium'
-环境光遮蔽的质量，支持`'low'`, `'medium'`, `'high'`, `'ultra'`
+环境光遮蔽的质量。支持`'low'`, `'medium'`, `'high'`, `'ultra'`。
###${prefix|default('#')} radius(number) = 2
环境光遮蔽的采样半径。半径越大效果越自然，但是需要设置较高的`'quality'`。
-下面是半径值较小与较大之间的区别
+下面是半径值较小与较大之间的区别：
<div class="twentytwenty-container" style="width: 700px;">
<img src="documents/asset/gl/img/geo-ssao-small-radius.png" width="100%" title="Radius: 1">
@@ -113,7 +114,7 @@
##${prefix|default('#')} colorCorrection(Object)
-颜色纠正和调整。类似 Photoshop 中的 Color Adjustments
+颜色纠正和调整。类似 Photoshop 中的 Color Adjustments。
下图同个场景调整为冷色系和暖色系的区别。
@@ -124,7 +125,7 @@
###${prefix|default('#')} enable(boolean) = true
-是否开启颜色纠正
+是否开启颜色纠正。
###${prefix|default('#')} lookupTexture(string|HTMLImageElement|HTMLCanvasElement)
颜色查找表，推荐使用。
@@ -139,9 +140,9 @@
-然后那这张纹理图片就作为该配置项的值，就可以得到相同的你在 Photoshop 上的效果了。
+然后那这张纹理图片就作为该配置项的值，就可以得到相同的在 Photoshop 里调整好的效果了。
-当然如果你只是想得到一张截图，完全不用再这样折腾，但是如果你想在能实时交互的作品中也能方便的调整到理想的色调，这个就非常有用了。
+当然如果你只是想得到一张截图，完全可以不这样操作，但是如果你想在可以实时交互的作品中能方便的调整到理想的色调，这个就非常有用了。
###${prefix|default('#')} exposure(number) = 0
@@ -163,7 +164,7 @@
##${prefix|default('#')} FXAA(Object)
-在开启 [postEffect](~${componentType}.postEffect) 后，WebGL 默认的 MSAA 会无法使用。这时候通过 FXAA 可以廉价方便的解决抗锯齿的问题，FXAA 会对一些场景的边缘部分进行模糊从而解决锯齿的问题，这在一些场景上效果还不错，但是在 echarts-gl 中，需要保证很多文字和线条边缘的锐利清晰，因此 FXAA 并不是那么适用。这时候我们可以通过如下设置更高的`devicePixelRatio`来使用超采样
+在开启 [postEffect](~${componentType}.postEffect) 后，WebGL 默认的 MSAA (Multi Sampling Anti Aliasing) 会无法使用。这时候通过 FXAA (Fast Approximate Anti-Aliasing) 可以廉价方便的解决抗锯齿的问题，FXAA 会对一些场景的边缘部分进行模糊从而解决锯齿的问题，这在一些场景上效果还不错，但是在 echarts-gl 中，需要保证很多文字和线条边缘的锐利清晰，因此 FXAA 并不是那么适用。这时候我们可以通过设置更高的`devicePixelRatio`来使用超采样，如下所示：
```js
var chart = echarts.init(dom, null, {
@@ -171,11 +172,11 @@ var chart = echarts.init(dom, null, {
})
```
-但是这种方法对电脑性能有很高的要求，所以更多时候我们建议使用 echarts-gl 中的 [temporalSuperSampling](~${componentType}.temporalSuperSampling)，在画面静止后会持续分帧对一个像素多次抖动采样，从而达到超采样抗锯齿的效果。
+但是设置更高的`devicePixelRatio` 对电脑性能有很高的要求，所以更多时候我们建议使用 echarts-gl 中的 [temporalSuperSampling](~${componentType}.temporalSuperSampling)，在画面静止后会持续分帧对一个像素多次抖动采样，从而达到超采样抗锯齿的效果。
###${prefix|default('#')} enable(boolean) = false
-是否开启 FXAA，默认关闭。
+是否开启 FXAA。默认为不开启。
diff --git a/cn/option-gl/partial/series-name.md b/cn/option-gl/partial/series-name.md
index 0878caa..d7ae692 100644
--- a/cn/option-gl/partial/series-name.md
+++ b/cn/option-gl/partial/series-name.md
@@ -1,3 +1,3 @@
{{ target: partial-series-name }}
## name(string)
-系列名称，用于[tooltip](http://echarts.baidu.com/option.html#tooltip)的显示，[legend](http://echarts.baidu.com/option.html#legend) 的图例筛选，在 `setOption` 更新数据和配置项时用于指定对应的系列。
+系列名称，用于 [tooltip](https://echarts.apache.org/zh/option.html#tooltip) 的显示，[legend](https://echarts.apache.org/zh/option.html#legend) 的图例筛选，在 `setOption` 更新数据和配置项时用于指定对应的系列。
diff --git a/cn/option-gl/partial/shading.md b/cn/option-gl/partial/shading.md
index 1bf9c6d..6c6ee6f 100644
--- a/cn/option-gl/partial/shading.md
+++ b/cn/option-gl/partial/shading.md
@@ -6,9 +6,9 @@
#${prefix|default("##")} textureTiling(number) = 1
-材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数
+材质细节纹理的平铺。默认为`1`，也就是拉伸填满。大于 `1` 的时候，数字表示纹理平铺重复的次数。
-**注：**使用平铺需要 `detailTexture` 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。
+**注：** 使用平铺需要 `detailTexture` 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。
#${prefix|default("##")} textureOffset(number) = 0
@@ -18,7 +18,7 @@
#${prefix|default("#")} shading(string)
-${componentName}中三维图形的着色效果，echarts-gl 中支持下面三种着色方式
+${componentName}中三维图形的着色效果。echarts-gl 中支持下面三种着色方式：
+ `'color'`
只显示颜色，不受光照等其它因素的影响。
@@ -43,7 +43,7 @@ ${componentName}中三维图形的着色效果，echarts-gl 中支持下面三
`roughness`属性用于表示材质的粗糙度，`0`为完全光滑，`1`完全粗糙，中间的值则是介于这两者之间。
{{ block: roughness-compare }}
-下图是 [globe](~globe) 中`roughness`分别是`0.2`（光滑）与`0.8`（粗糙）的效果
+下图是 [globe](~globe) 中`roughness`分别是`0.2`（光滑）与`0.8`（粗糙）的效果。
@@ -53,11 +53,11 @@ ${componentName}中三维图形的着色效果，echarts-gl 中支持下面三
-贴图中颜色越白的地方值越大，也就是越粗糙。你可以从 [http://freepbr.com/](http://freepbr.com/) 等资源网站获取不同材质的贴图资源，也可以自己使用工具生成。
+贴图中颜色越白的地方值越大，就越粗糙。你可以从 [http://freepbr.com/](http://freepbr.com/) 等资源网站获取不同材质的贴图资源，也可以使用其他工具自己生成。
##${prefix|default("#")} metalness(number|string|HTMLImageElement|HTMLCanvasElement) = 0
-`metalness`属性用于表示材质是金属还是非金属，`0`为非金属，`1`为金属，中间的值则是介于这两者之间，但是通常设成`0`和`1`就能满足大部分场景了
+`metalness`属性用于表示材质是金属还是非金属，`0`为非金属，`1`为金属，中间的值则是介于这两者之间。通常设成`0`和`1`就能满足大部分场景了。
{{ block: metalness-compare }}
下图是 [globe](~globe) 中`metalness`分别设成`1`与`0`的效果区别。
@@ -70,11 +70,11 @@ ${componentName}中三维图形的着色效果，echarts-gl 中支持下面三
##${prefix|default("#")} roughnessAdjust(number) = 0.5
-粗糙度调整，在使用粗糙度贴图的时候有用。可以对贴图整体的粗糙度进行调整。默认为 0.5 的时候不调整，0 的时候变成完全光滑，1 的时候变成完全粗糙。
+粗糙度调整，在使用粗糙度贴图的时候有用。可以对贴图整体的粗糙度进行调整。默认为 `0.5`，`0`的时候为完全光滑，`1`的时候为完全粗糙。
##${prefix|default("#")} metalnessAdjust(number) = 0.5
-金属度调整，在使用金属度贴图的时候有用。可以对贴图整体的金属度进行调整。默认为 0.5 的时候不调整，0 的时候变成非金属，1 的时候变成金属。
+金属度调整，在使用金属度贴图的时候有用。可以对贴图整体的金属度进行调整。默认为 `0.5`，`0`的时候为非金属，`1`的时候为金属。
##${prefix|default("#")} normalTexture(string|HTMLImageElement|HTMLCanvasElement)
diff --git a/cn/option-gl/partial/temporal-super-sampling.md b/cn/option-gl/partial/temporal-super-sampling.md
index aec194a..6178e94 100644
--- a/cn/option-gl/partial/temporal-super-sampling.md
+++ b/cn/option-gl/partial/temporal-super-sampling.md
@@ -4,7 +4,7 @@
分帧超采样。在开启 [postEffect](~${componentType}.postEffect) 后，WebGL 默认的 MSAA 会无法使用，所以我们需要自己解决锯齿的问题。
-分帧超采样就是用来解决锯齿的问题，它在画面静止后会持续分帧对一个像素多次抖动采样，从而达到抗锯齿的效果。而且在这个分帧采样的过程中，echarts-gl 也会对 [postEffect](~${componentType}.postEffect) 中一些需要采样保证效果的特效，例如 [SSAO](~${componentType}.postEffect.SSAO), [景深](~${componentType}.postEffect.depthOfField)，以及阴影进行渐进增强。
+分帧超采样是用来解决锯齿问题的方法，它在画面静止后会持续分帧对一个像素多次抖动采样，从而达到抗锯齿的效果。而且在这个分帧采样的过程中，echarts-gl 也会对 [postEffect](~${componentType}.postEffect) 中一些需要采样保证效果的特效，例如 [SSAO](~${componentType}.postEffect.SSAO), [景深](~${componentType}.postEffect.depthOfField)，以及阴影进行渐进增强。
下面是未开启和开启`temporalSuperSampling`的区别。
diff --git a/cn/option-gl/partial/view-control.md b/cn/option-gl/partial/view-control.md
index 45d635b..eec274d 100644
--- a/cn/option-gl/partial/view-control.md
+++ b/cn/option-gl/partial/view-control.md
@@ -34,7 +34,7 @@
旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。
-默认为`${defaultRotateSensitivitydefault(1)}`
+默认为`${defaultRotateSensitivity | default(1)}`。
设置为`0`后无法旋转。
@@ -49,7 +49,7 @@ rotateSensitivity: [0, 1]
##${prefix|default('#')} zoomSensitivity(number) = ${defaultZoomSensitivity|default(1)}
-缩放操作的灵敏度，值越大越灵敏。默认为`${defaultRotateSensitivitydefault(1)}`
+缩放操作的灵敏度，值越大越灵敏。默认为`${defaultRotateSensitivity | default(1)}`。
设置为`0`后无法缩放。
@@ -57,7 +57,7 @@ rotateSensitivity: [0, 1]
平移操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的平移灵敏度
-默认为`${defaultRotateSensitivitydefault(1)}`
+默认为`${defaultRotateSensitivity | default(1)}`。
设置为`0`后无法平移。
diff --git a/cn/option-gl/partial/zlevel.md b/cn/option-gl/partial/zlevel.md
index de76f55..8bd7db0 100644
--- a/cn/option-gl/partial/zlevel.md
+++ b/cn/option-gl/partial/zlevel.md
@@ -8,4 +8,4 @@
`zlevel` 大的 Canvas 会放在 `zlevel` 小的 Canvas 的上面。
-**注:** echarts-gl 中组件的层需要跟 echarts 中组件的层分开。同一个 zlevel 不能同时用于 WebGL 和 Canvas 的绘制。
\ No newline at end of file
+**注:** echarts-gl 中组件的层需要跟 echarts 中组件的层分开。同一个 `zlevel` 不能同时用于 WebGL 和 Canvas 的绘制。
\ No newline at end of file
diff --git a/cn/option-gl/series/bar3D.md b/cn/option-gl/series/bar3D.md
index 8f2a425..2215193 100644
--- a/cn/option-gl/series/bar3D.md
+++ b/cn/option-gl/series/bar3D.md
@@ -91,7 +91,7 @@ data: [
对于数组中的每一项：
1. 在 [grid3D](~grid3D) 中，每一项的前三个值分别是`x`, `y`, `z`。
-2. 在 [geo3D](~geo3D) 以及 [globe](globe) 中，每一项的前两个值分别是经纬度 `lng`, `lat`，第三个值表示数值大小，例如人口的大小。这个值会被映射到 [minHeight](~series-bar3D.minHeight) ~ [maxHeight](~series-bar3D.maxHeight) 的范围。
+2. 在 [geo3D](~geo3D) 以及 [globe](~globe) 中，每一项的前两个值分别是经纬度 `lng`, `lat`，第三个值表示数值大小，例如人口的多少。这个值会被映射到 [minHeight](~series-bar3D.minHeight) ~ [maxHeight](~series-bar3D.maxHeight) 的范围。
除了默认给坐标系使用的三个值，每一项还可以加入任意多个值，用于给 [visualMap](~visualMap) 组件映射到颜色等其它图形属性。
diff --git a/cn/option-gl/series/flowGL.md b/cn/option-gl/series/flowGL.md
index 605d764..474e343 100644
--- a/cn/option-gl/series/flowGL.md
+++ b/cn/option-gl/series/flowGL.md
@@ -12,11 +12,11 @@
## particleDensity(number) = 128
-粒子的密度，实际的粒子数量是设置数目的平方。粒子密度越大迹线效果越好，但是性能开销也会越大。除了该属性，将 [particleType](~series-flowGL.particleType) 也可以得到更加清晰连贯的迹线。
+粒子的密度，实际的粒子数量是设置数目的平方。粒子密度越大迹线效果越好，但是性能开销也会越大。除了该属性，使用 [particleType](~series-flowGL.particleType) 也可以得到更加清晰连贯的迹线。
## particleType(string) = 'point'
-粒子的类型，默认为点 `'point'`，可以设置成线 `'line'`，线类型的粒子会用一条线连接上个运动位置和当前运动位置。会让这个轨迹更加连贯。
+粒子的类型，默认为点 `'point'`，可以设置成线 `'line'`。线类型的粒子会用一条线连接上个运动的位置和当前运动的位置，这会让这个轨迹更加连贯。
下面是类型分别是`'point'`和`'line'`的区别。
@@ -50,7 +50,7 @@
## gridWidth(number|string) = 'auto'
-传入的网格数据的网格宽度数量，`flowGL` 会根据这个值和 [gridHeight](~series-flowGL.gridHeight) 创建存储向量场的浮点纹理，用于粒子的轨迹计算。
+传入的网格数据的网格宽度数量。`flowGL` 会根据这个值和 [gridHeight](~series-flowGL.gridHeight) 创建存储向量场的浮点纹理，用于粒子的轨迹计算。
## gridHeight(number|string) = 'auto'
@@ -64,8 +64,8 @@
```js
data: [
- // 每个数据项包含四个值，表示位置的 lng, lat 以及相应维度上的速度 sLng, sLat.
- // 如果是直角坐标系上的话则是表示位置的 x, y 以及相应维度上的速度 sx, sy
+ // 每个数据项包含四个值，表示位置的 lng、lat 以及相应维度上的速度 sLng、 sLat.
+ // 如果是直角坐标系上的话则是表示位置的 x、y 以及相应维度上的速度 sx、sy
[0, 0, 1, 1], [1, 0, 1, 1],
[0, 1, 1, 1], [1, 1, 1, 1]
];
diff --git a/cn/option-gl/series/graphGL.md b/cn/option-gl/series/graphGL.md
index 6ae7553..568083a 100644
--- a/cn/option-gl/series/graphGL.md
+++ b/cn/option-gl/series/graphGL.md
@@ -22,7 +22,7 @@
CPU 实现的优势是兼容性好，而 GPU 实现在高端显卡中有着数十倍甚至上百倍的性能优势。
-下面是在 GTX1070 和 i7 4GHz 的电脑中对一个 2w 个节点，近 5w 条边的关系图一次布局的迭代的性能对比。
+下面是在 GTX1070 和 i7 4GHz 的电脑中对一个 2w 个节点（近 5w 条边）的关系图一次布局的迭代的性能对比。
@@ -124,7 +124,7 @@ CPU 实现的优势是兼容性好，而 GPU 实现在高端显卡中有着数
### value(number|Array)
-数据项值
+数据项值。
### itemStyle(Object)
@@ -138,7 +138,7 @@ CPU 实现的优势是兼容性好，而 GPU 实现在高端显卡中有着数
## nodes(Array)
-同 [graphGL.data](~series-graphGL.data)
+同 [graphGL.data](~series-graphGL.data)。
## links(Array)
diff --git a/cn/option-gl/series/lines3D.md b/cn/option-gl/series/lines3D.md
index cfeb3bb..3d338cd 100644
--- a/cn/option-gl/series/lines3D.md
+++ b/cn/option-gl/series/lines3D.md
@@ -2,7 +2,7 @@
# series.lines3D(Object)
-三维的飞线图。跟二维的[飞线图](http://echarts.baidu.com/option.html#series-line)一样用于表现起点终点的线数据。更多用在地理可视化上。
+三维的飞线图。跟二维的[飞线图](https://echarts.apache.org/zh/option.html#series-line)一样用于表现起点终点的线数据。更多用在地理可视化上。
下图是使用 [lines3D](~series-lines3D) 在 [globe](~globe) 上可视化飞机航班的一个例子。
diff --git a/cn/option-gl/series/polygons3D.md b/cn/option-gl/series/polygons3D.md
index c44c5e1..b6ac760 100644
--- a/cn/option-gl/series/polygons3D.md
+++ b/cn/option-gl/series/polygons3D.md
@@ -14,7 +14,7 @@
## itemStyle(Object)
-图形样式，包括颜色，透明度，描边等。
+图形样式，包括颜色、透明度、描边等。
{{ use: partial-item-style(
prefix="##",
@@ -24,7 +24,7 @@
## emphasis(Object)
-鼠标 hover 高亮时图形和标签的样式
+鼠标 hover 高亮时图形和标签的样式。
### itemStyle(Object)
diff --git a/cn/option-gl/series/scatter3D.md b/cn/option-gl/series/scatter3D.md
index 5cd155d..b73acd3 100644
--- a/cn/option-gl/series/scatter3D.md
+++ b/cn/option-gl/series/scatter3D.md
@@ -53,7 +53,7 @@
## data(Array)
-三维散点图数据数组。数组每一项为一个数据。通常这个数据是用数组存储数据的每个属性/维度。例如下面：
+三维散点图数据数组。数组每一项为一个数据。通常这个数据用一个数组存储数据的每个属性/维度。例如：
```js
data: [
diff --git a/cn/option-gl/series/series.md b/cn/option-gl/series/series.md
index a769c11..380771d 100644
--- a/cn/option-gl/series/series.md
+++ b/cn/option-gl/series/series.md
@@ -3,4 +3,4 @@
echarts-gl 加入了丰富的三维可视化类型，包括 [三维柱状图 bar3D](~series.bar3D)，[三维散点图 scatter3D](~series.scatter3D)，[三维飞线 lines3D](~series.lines3D)，[曲面图 surface](~series.surface)，大部分可视化类型都能在多种坐标系组件中使用。而且与 echarts 原先的图例，tooltip 等交互组件有良好的集成。
-同时对原先二维的图表也有功能上的增强，对于大量数据的散点图和关系图，你可以使用 echarts-gl 中提供的 [scatterGL](~series.scatterGL)，[graphGL](~series.graphGL) 加速绘制和运算。
+同时,对原先的二维图表也进行了更多功能上的增强。例如，对于大量数据的散点图和关系图，你可以使用 echarts-gl 中提供的 [scatterGL](~series.scatterGL)，[graphGL](~series.graphGL) 加速绘制和运算。
diff --git a/cn/option-gl/series/surface.md b/cn/option-gl/series/surface.md
index 8309d38..df08750 100644
--- a/cn/option-gl/series/surface.md
+++ b/cn/option-gl/series/surface.md
@@ -96,10 +96,11 @@ z 为关于 [x](~series-surface.equation.x), [y](~series-surface.equation.y) 的
## parametricEquation(Object)
-曲面的[参数方程](https://zh.wikipedia.org/wiki/%E5%8F%83%E6%95%B8%E6%96%B9%E7%A8%8B)。在不设置 [data](~series-surface.data)，可以通过 [parametricEquation](~series-surface.equation) 去声明参数参数方程。在 [parametric](~series-surface) 为`true`时有效。
+曲面的[参数方程](https://zh.wikipedia.org/wiki/%E5%8F%83%E6%95%B8%E6%96%B9%E7%A8%8B)。在[data](~series-surface.data)没被设置的时候，可以通过 [parametricEquation](~series-surface.equation) 去声明参数参数方程。在 [parametric](~series-surface) 为`true`时有效。
-参数方程是 [x](~series-surface.parametricEquation.x), [y](~series-surface.parametricEquation.y), [z](~series-surface.parametricEquation.z) 关于参数 [u](~series-surface.parametricEquation.u)，[v](~series-surface.parametricEquation.v) 的方程。
-下面的参数方程就是绘制前面图中类似一个金属零件的参数曲面的。
+参数方程是 [x](~series-surface.parametricEquation.x)、[y](~series-surface.parametricEquation.y)、 [z](~series-surface.parametricEquation.z) 关于参数 [u](~series-surface.parametricEquation.u)、[v](~series-surface.parametricEquation.v) 的方程。
+
+下面的参数方程就是绘制前面图中类似一个金属零件的参数曲面的：
```js
var aa = 0.4;
@@ -183,7 +184,7 @@ x 为关于 [u](~series-surface.equation.u), [v](~series-surface.equation.v) 的
## itemStyle(Object)
-曲面的颜色和不透明度等样式。
+曲面的颜色、不透明度等样式。
{{ use: partial-item-style(
componentType='series-surface',
diff --git a/en/api/events.md b/en/api/events.md
index 27a5071..f5be324 100644
--- a/en/api/events.md
+++ b/en/api/events.md
@@ -271,7 +271,7 @@ Event triggered after action [brush](~action.brush) dispatched.
Notice what are selected.
-See [brush component](option.html#brush)。
+See [brush component](option.html#brush).
This event will be triggered when `dispatchAction` called, or use do brush behavior.
But this event will not be triggered in `setOption`.
diff --git a/en/changelog.md b/en/changelog.md
index 0ef59d7..70f74f8 100644
--- a/en/changelog.md
+++ b/en/changelog.md
@@ -394,13 +394,13 @@ Fix the problem that bar progressive was blocked.
## v4.0.0
<div class="time">2018-01-16</div>
-+ [+] Supported to render up to **tens millions of data** directly。ECharts4 has upgrade to stream architecture, and along with detailed optimization, it has supported to render incrementally loaded data and support progressive rendering.
++ [+] Supported to render up to **tens millions of data** directly. ECharts4 has upgrade to stream architecture, and along with detailed optimization, it has supported to render incrementally loaded data and support progressive rendering.
+ Ten millions of GIS data probably take up to about hundreds MB of space. In this case chunked data loading or WebStock is required for the purpose of display graphics as soon as possible and not blocking the browser while processing loaded data. The samples of incremental data loading can be checked here: [scatterGL-gps](https://ecomfe.github.io/echarts-examples/public/editor.html?c=scatterGL-gps&gl=1) and [linesGL-ny](https://ecomfe.github.io/echarts-examples/public/editor.html?c= [...]
+ Supported the human interactions in the big data scenario, where continuous interactions (e.g., roam in geo and cartesian) will not block the browser. Benefit from the using of GPU and avoiding of layout recalculation, ECharts GL provides smooth interactions, which has been demonstrated in the examples above. Without WebGL, the basic ECharts implements progressive rendering to support non-blocking interaction, which can be checked at the pan and zoom in [lines-airline](https://ecom [...]
+ [+] **Published ZRender SVG Rendering Engine** as an alternative backend of ECharts besides the existing Canvas Rendering Engine. The choice of rendering engine usually depends on the scenario, for example, benefit from the low memory cost, SVG Rendering Engine is suitable for mobile device, or the case that many ECharts instances exists in a single page, while the Canvas Rendering Engine is suitable for big data rendering or when visual effects required. Canvas Rendering Engine is def [...]
-+ [+] **Published Sunburst Chart** to visualize hierarchical data efficiently with excellent interactions. See [examples] and (excellent) and [docs](https://ecomfe.github.io/echarts-doc/public/en/option.html#series-sunburst)。
++ [+] **Published Sunburst Chart** to visualize hierarchical data efficiently with excellent interactions. See [examples] and (excellent) and [docs](https://ecomfe.github.io/echarts-doc/public/en/option.html#series-sunburst).
+ [+] **Published [dataset](http://echarts.baidu.com/tutorial.html#%E6%95%B0%E6%8D%AE%E9%9B%86%EF%BC%88dataset%EF%BC%89) component** to support data based configuration, visual encoding and data sharing in different series.
@@ -564,7 +564,7 @@ Fix the problem that bar progressive was blocked.
+ [+] Supported [minInterval](https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.minInterval) on time axis (that is, [axis.type](https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.type) is `'time'`), and supported [maxInterval](https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.maxInterval) on value axis (that is [axis.type](https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.type) is `'value'`). So that it is enabled to controll the [...]
-+ [+] Supported [xAxis.axisLine.onZeroAxisIndex](https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.axisLine.onZeroAxisIndex), which enables specifing corresponding relationship when multiple axes used and `onZero` is required. See [#5069](https://github.com/ecomfe/echarts/issues/5069)。
++ [+] Supported [xAxis.axisLine.onZeroAxisIndex](https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.axisLine.onZeroAxisIndex), which enables specifing corresponding relationship when multiple axes used and `onZero` is required. See [#5069](https://github.com/ecomfe/echarts/issues/5069).
+ [+] Supported that do not use [coordinate system](https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.coordinateSystems) in `custom series`.
@@ -592,7 +592,7 @@ Fix the problem that bar progressive was blocked.
+ [+] Fixed the incorrect rendering when the first entry was empty in [candlestick](https://ecomfe.github.io/echarts-doc/public/en/option.html#series-candlestick). See [#6059](https://github.com/ecomfe/echarts/issues/6059).
-+ [^] Fixed that [series-bar.dimensions](https://ecomfe.github.io/echarts-doc/public/en/option.html#series-bar.dimensions) did not work. See [#6252](https://github.com/ecomfe/echarts/issues/6252)。
++ [^] Fixed that [series-bar.dimensions](https://ecomfe.github.io/echarts-doc/public/en/option.html#series-bar.dimensions) did not work. See [#6252](https://github.com/ecomfe/echarts/issues/6252).
+ [^] Fixed that when chilren number of group was not fixed, they could not be removed correctly in [custom series](https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom).
@@ -608,7 +608,7 @@ Fix the problem that bar progressive was blocked.
## v3.6.2
<div class="time">2017-06-15</div>
-+ [+] Supported draw [custom series](https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom) on [Baidu Map (bmap)](https://github.com/ecomfe/echarts/tree/master/extension/bmap). See [example 1](https://ecomfe.github.io/echarts-examples/public/editor.html?c=map-polygon) and [example 2](https://ecomfe.github.io/echarts-examples/public/editor.html?c=map-bin)。
++ [+] Supported draw [custom series](https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom) on [Baidu Map (bmap)](https://github.com/ecomfe/echarts/tree/master/extension/bmap). See [example 1](https://ecomfe.github.io/echarts-examples/public/editor.html?c=map-polygon) and [example 2](https://ecomfe.github.io/echarts-examples/public/editor.html?c=map-bin).
+ [+] Supported show parent labels in [treemap](https://ecomfe.github.io/echarts-doc/public/en/option.html#series-treemap). See [example](https://ecomfe.github.io/echarts-examples/public/editor.html?c=treemap-show-parent). See [#5869](https://github.com/ecomfe/echarts/issues/5869) and [#5579](https://github.com/ecomfe/echarts/issues/5579).
@@ -650,9 +650,9 @@ Fix the problem that bar progressive was blocked.
## v3.6.0
<div class="time">2017-05-25</div>
-+ **[+] Published [custom series](http://echarts.baidu.com/option.html#series-custom)**, which enables user to customize render logic and make new types of chart. See [samples](http://echarts.baidu.com/examples.html#chart-type-custom)。
++ **[+] Published [custom series](http://echarts.baidu.com/option.html#series-custom)**, which enables user to customize render logic and make new types of chart. See [samples](http://echarts.baidu.com/examples.html#chart-type-custom).
-+ **[+] Supported polar bar chart**. See [sample1](https://ecomfe.github.io/echarts-examples/public/editor.html?c=bar-polar-stack), [sample2](https://ecomfe.github.io/echarts-examples/public/editor.html?c=bar-polar-stack-radial), [sample3](https://ecomfe.github.io/echarts-examples/public/editor.html?c=bar-polar-real-estate)。
++ **[+] Supported polar bar chart**. See [sample1](https://ecomfe.github.io/echarts-examples/public/editor.html?c=bar-polar-stack), [sample2](https://ecomfe.github.io/echarts-examples/public/editor.html?c=bar-polar-stack-radial), [sample3](https://ecomfe.github.io/echarts-examples/public/editor.html?c=bar-polar-real-estate).
+ [+] Supported [encode](http://echarts.baidu.com/option.html#series-scatter.encode), which enable user to specify which dimensions in [data](http://echarts.baidu.com/option.html#series-scatter.data) are mapped to which axis of coordinate system. Or which dimensions will be displayed in [tooltip](http://echarts.baidu.com/option.html#tooltip) or [label](http://echarts.baidu.com/option.html#series-scatter.label). [Break Change]: The default name of the third dimension in `cartesian2d` is c [...]
@@ -715,13 +715,13 @@ Fix the problem that bar progressive was blocked.
## v3.5.2
<div class="time">2017-04-05</div>
-+ [+] Supported [useUTC](https://ecomfe.github.io/echarts-doc/public/en/option.html#useUTC), which enables display `axisLabel` and `tooltip` in local time or UTC. Related default setttings are modified: `axisLabel` and `tooltip` display local time by default, and `data` recognize time string as local time if timezone not specified. See [the time part in series.data](https://ecomfe.github.io/echarts-doc/public/en/option.html#series-line.data). Fixed the problem that when `axis.type` is `' [...]
++ [+] Supported [useUTC](https://ecomfe.github.io/echarts-doc/public/en/option.html#useUTC), which enables display `axisLabel` and `tooltip` in local time or UTC. Related default setttings are modified: `axisLabel` and `tooltip` display local time by default, and `data` recognize time string as local time if timezone not specified. See [the time part in series.data](https://ecomfe.github.io/echarts-doc/public/en/option.html#series-line.data). Fixed the problem that when `axis.type` is `' [...]
+ [+] Supported [axisLabel.showMinLabel](https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.axisLabel.showMinLabel) and [axisLabel.showMaxLabel](https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.axisLabel.showMaxLabel).
+ [+] Supported [funnel.sort](https://ecomfe.github.io/echarts-doc/public/en/option.html#series-funnel.sort), which enables sorting funnel by index or customized function.
-+ [^] Fixed float error of `axisTick`. See [#5041](https://github.com/ecomfe/echarts/issues/5041)。
++ [^] Fixed float error of `axisTick`. See [#5041](https://github.com/ecomfe/echarts/issues/5041).
+ [^] Fixed that `axisTick` did not display when value was too small. See [#5386](https://github.com/ecomfe/echarts/issues/5386).
@@ -729,7 +729,7 @@ Fix the problem that bar progressive was blocked.
+ [^] Fixed that [visualMap](https://ecomfe.github.io/echarts-doc/public/en/option.html#visualMap) disabled `itemStyle` of [map](https://ecomfe.github.io/echarts-doc/public/en/option.html#series-map). See [#5388](https://github.com/ecomfe/echarts/issues/5388).
-+ [^] Fixed that [tooltip.trigger](https://ecomfe.github.io/echarts-doc/public/en/option.html#tooltip.trigger) did not support `'none'`. See [#5400](https://github.com/ecomfe/echarts/issues/5400)。
++ [^] Fixed that [tooltip.trigger](https://ecomfe.github.io/echarts-doc/public/en/option.html#tooltip.trigger) did not support `'none'`. See [#5400](https://github.com/ecomfe/echarts/issues/5400).
+ [^] Fixed problem of [sankey](https://ecomfe.github.io/echarts-doc/public/en/option.html#series-sankey) on ie11. See [#3306](https://github.com/ecomfe/echarts/issues/3306).
@@ -786,9 +786,9 @@ Recovery Build
## v3.4.0
<div class="time">2017-01-12</div>
-+ **[+] Published `pictorialBar` chart：[pictorialBar](https://ecomfe.github.io/echarts-doc/public/en/option.html#series-pictorialBar)。See [example](https://ecomfe.github.io/echarts-examples/public/index.html#chart-type-pictorialBar)。**
++ **[+] Published `pictorialBar` chart：[pictorialBar](https://ecomfe.github.io/echarts-doc/public/en/option.html#series-pictorialBar). See [example](https://ecomfe.github.io/echarts-examples/public/index.html#chart-type-pictorialBar).**
-+ **[+] Published `themeRiver` chart：[themeRiver](https://ecomfe.github.io/echarts-doc/public/en/option.html#series-themeRiver)。See [example](https://ecomfe.github.io/echarts-examples/public/index.html#chart-type-themeRiver)。**
++ **[+] Published `themeRiver` chart：[themeRiver](https://ecomfe.github.io/echarts-doc/public/en/option.html#series-themeRiver).See [example](https://ecomfe.github.io/echarts-examples/public/index.html#chart-type-themeRiver).**
+ [+] A specified [geo coordinate system](https://ecomfe.github.io/echarts-doc/public/en/option.html#geo) has been able to be used in [map series](https://ecomfe.github.io/echarts-doc/public/en/option.html#series-map). (In the past map series could only creat an inner exclusive geo coodinate system). Thus, [map series](https://ecomfe.github.io/echarts-doc/public/en/option.html#series-map) can be used to control color of a geo component. Moreover, a geo coordinate system can be shared amo [...]
@@ -846,7 +846,7 @@ Recovery Build
+ [^] Fix that erroneously forbiden default pan behavior in touch device. See [#4393](https://github.com/ecomfe/echarts/issues/4393).
-+ [^] Enhance user experience for [geo](https://ecomfe.github.io/echarts-doc/public/en/option.html#geo) / [map](https://ecomfe.github.io/echarts-doc/public/en/option.html#series-map) in touche device。
++ [^] Enhance user experience for [geo](https://ecomfe.github.io/echarts-doc/public/en/option.html#geo) / [map](https://ecomfe.github.io/echarts-doc/public/en/option.html#series-map) in touche device.
+ [^] Fix calculation error of [containPixel](https://ecomfe.github.io/echarts-doc/public/en/api.html#echartsInstance.containPixel) in [geo](https://ecomfe.github.io/echarts-doc/public/en/option.html#geo) / [graph](https://ecomfe.github.io/echarts-doc/public/en/option.html#series-graph). See [#4405](https://github.com/ecomfe/echarts/issues/4405).
diff --git a/en/option-gl/component/axis3D-axis-common.md b/en/option-gl/component/axis3D-axis-common.md
new file mode 100644
index 0000000..c37ddbb
--- /dev/null
+++ b/en/option-gl/component/axis3D-axis-common.md
@@ -0,0 +1,134 @@
+{{ target: component-axis3D-axis-common }}
+
+## grid3DIndex(number) = 0
+
+The index of the [grid3D](~grid3D) component used by the axis. The default is to use the first [grid3D](~grid3D) component.
+
+## nameTextStyle(Object)
+
+Text style of axis name.
+
+{{ use: partial-text-style(
+ prefix='##',
+ defaultFontSize=16
+)}}
+
+### color(Color)
+
+Color of axis name uses [axisLine.lineStyle.color](~${componentType}.axisLine.lineStyle.color) by default.
+
+## nameGap(number) = 20
+
+The gap between the axis name and axis line. Note the distance is in 3D space, not the screen pixel value.
+
+## type(string) = ${axisTypeDefault|default('value')}
+
+The type of the axis.
+
+Optional:
++ `'value'`
+ The value axis. Suitable for continuous data.
+
++ `'category'`
+ The category axis. Suitable for the discrete category data. For this type, the category data must be set through [data](~${componentType}.data).
+
++ `'time'`
+ The timeline. Suitable for the continuous timing data. The time axis has a time format compared to the value axis, and the scale calculation is also different. For example, the scale of the month, week, day, and hour ranges can be determined according to the range of the span.
+
++ `'log'`
+ Logarithmic axis. Suitable for the logarithmic data.
+
+## min(number|string) = null
+
+The minimum value of axis.
+
+It can be set to a special value `'dataMin'` so that the minimum value on this axis is set to be the minimum label.
+
+It will be automatically computed to make sure the axis tick is equally distributed when not set.
+
+In the category axis, it can also be set as the ordinal number. For example, if a category axis has `data: ['categoryA', 'categoryB', 'categoryC']`, and the ordinal `2` represents `'categoryC'`. Moreover, it can be set as a negative number, like `-3`.
+
+## max(number|string) = null
+
+The maximum value of the axis.
+
+It can be set to a special value `'dataMax'` so that the minimum value on this axis is set to be the maximum label.
+
+It will be automatically computed to make sure the axis tick is equally distributed when not set.
+
+In the category axis, it can also be set as the ordinal number. For example, if a category axis has `data: ['categoryA', 'categoryB', 'categoryC']`, and the ordinal `2` represents `'categoryC'`. Moreover, it can be set as a negative number, like `-3`.
+
+## scale(boolean) = false
+
+It is available only in numerical axis, i.e., [type](~${componentType}.type): 'value'.
+
+It specifies whether not to contain zero position of axis compulsively. When it is set to be `true`, the axis may not contain zero position, which is useful in the scatter chart for both value axes.
+
+This configuration item is unavailable when the [min](~${componentType}.min) and [max](~${componentType}.max) are set.
+
+## splitNumber(number) = 5
+
+The number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.
+
+This is unavailable for the category axis.
+
+## minInterval(number) = 0
+
+Minimum gap between split lines.
+
+For example, it can be set to be `1` to make sure the axis label is shown as an integer.
+
+```js
+{
+ minInterval: 1
+}
+```
+
+It is available only for axis of [type](~${componentType}.type) 'value' or 'time'.
+
+## interval(number)
+
+Compulsively set segmentation interval for axis.
+
+As [splitNumber](~${componentType}.splitNumber) is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with [min](~${componentType}.min) and [max](~${componentType}.max) to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.
+
+This is unavailable for category axis. Timestamp should be passed for [type](~${componentType}.type): 'time' axis. Logged value should be passed for [type](~${componentType}.type): 'log' axis.
+
+## logBase(number) = 10
+
+Base of logarithm, which is valid only for numeric axes with [type](~${componentType}.type): 'log'.
+
+## data(Array)
+
+Category data, available in [type](~${componentType}.type): 'category' axis.
+
+If [type](~${componentType}.type) is specified as `'category'`, but `axis.data` is not specified, `axis.data` will be auto collected from [series.data](~series.data). It brings convenience, but we should notice that `axis.data` provides then value range of the `'category'` axis. If it is auto collected from [series.data](~series.data), Only the values appearing in [series.data](~series.data) can be collected. For example, if [series.data](~series.data) is empty, nothing will be collected.
+
+Example:
+
+```js
+// Name list of all categories
+data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
+// Each item could also be a specific configuration item.
+// In this case, `value` is used as the category name.
+data: [{
+ value: 'Monday',
+ // Highlight Monday
+ textStyle: {
+ fontSize: 20,
+ color: 'red'
+ }
+}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
+```
+
+### value(string)
+
+Name of a category.
+
+### textStyle(Object)
+
+Text style of the category.
+
+{{ use:partial-text-style(
+ prefix='###'
+) }}
diff --git a/cn/option-gl/component/axis3D-common.md b/en/option-gl/component/axis3D-common.md
similarity index 57%
copy from cn/option-gl/component/axis3D-common.md
copy to en/option-gl/component/axis3D-common.md
index 406fb09..ec463f0 100644
--- a/cn/option-gl/component/axis3D-common.md
+++ b/en/option-gl/component/axis3D-common.md
@@ -1,32 +1,32 @@
-{{ target: component-axis3D-common-axis-interval }}
-${name}的显示间隔，在类目轴中有效。{{ if: !${isAxisLabel} }}默认同 [axisLabel.interval](~${componentType}.axisLabel.interval) 一样。{{ /if }}
+The display interval of {{ target: component-axis3D-common-axis-interval }}
+${name} is valid in the category axis. {{ if: !${isAxisLabel} }} Defaults to the same as [axisLabel.interval](~${componentType}.axisLabel.interval). {{ /if }}
-默认会自动计算`interval`以保证较好的展示效果。
+By default, `interval` is automatically calculated to ensure a good display.
-可以设置成 0 强制显示所有标签。
+It can be set to 0 to force all labels to be displayed.
-如果设置为 `1`，表示『隔一个标签显示一个标签』，如果值为 `2`，表示隔两个标签显示一个标签，以此类推。
+If the value is `1`, it means "displays a label every other label". If the value is `2`, it means "displays a label between two labels", and so on.
+
+The interval data can be represented by a numerical value or by a callback function. The format of the callback function is as follows:
-可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：
```js
(index:number, value: string) => boolean
```
-第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 `false`。
-
+The first parameter is the index of the class, the second value is the name of the class, and if it is skipped, it returns `false`.
{{target: component-axis3D-common-formatter-desc}}
-刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
+The content formatter for tick labels. Supports both string templates and callback functions.
-示例:
+Example:
```js
-// 使用字符串模板，模板变量为刻度默认标签 {value}
+// Use string template; template variable is the default label of axis {value}
formatter: '{value} kg'
-// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
+// Use callback function; function parameters are axis index
formatter: function (value, index) {
- // 格式化成月/日，只在第一个刻度显示年份
+ // Formatted to be month/day; display year only in the first label
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
@@ -41,21 +41,21 @@ formatter: function (value, index) {
{{ target: component-axis3D-common-axisLine }}
#${prefix|default('#')} axisLine(Object)
-坐标轴轴线相关设置。
+Settings related to axis line.
##${prefix|default('#')} show(boolean) = ${defaultShow|default(true)}
-是否显示坐标轴轴线。
+Set this to be `false` to prevent the axis line from showing.
{{ if: ${hasLabelInterval|default(true)} }}
##${prefix|default('#')} interval(number|Function) = 'auto'
{{ use: component-axis3D-common-axis-interval(
- name="坐标轴刻度标签",
+ name="axis scale label",
isAxisLabel=true,
componentType=${componentType}
) }}
{{ /if }}
##${prefix|default('#')} lineStyle(Object)
-{{ use: partial-line-style(prefix='##' + ${prefix|default('#')}, defaultColor="'#333'", defaultWidth=2, name="坐标轴线") }}
+{{ use: partial-line-style(prefix='##' + ${prefix|default('#')}, defaultColor="'#333'", defaultWidth=2, name="axisLine") }}
@@ -63,19 +63,19 @@ formatter: function (value, index) {
{{ target: component-axis3D-common-axisLabel }}
#${prefix|default('#')} axisLabel(Object)
-坐标轴刻度标签的相关设置。
+Settings related to axis label.
##${prefix|default('#')} show(boolean) = ${defaultShow|default(true)}
-是否显示刻度标签。
+Set this to be `false` to prevent the axis label from appearing.
##${prefix|default('#')} margin(number) = 8
-刻度标签与轴线之间的距离。
+The margin between the axis label and the axis line.
-**注意：** 这个距离是三维空间而非屏幕空间的。
+**Note：** This distance is three-dimensional space, not screen space.
{{ if: ${hasLabelInterval|default(true)} }}
##${prefix|default('#')} interval(number|Function) = 'auto'
{{ use: component-axis3D-common-axis-interval(
- name="坐标轴刻度标签",
+ name="axis scale label",
isAxisLabel=true,
componentType=${componentType}
) }}
@@ -93,13 +93,12 @@ formatter: function (value, index) {
<!-- Overwrite color -->
###${prefix|default('#')} color(Color|Function)
-刻度标签文字的颜色，默认取 [axisLine.lineStyle.color](~${componentType}.axisLine.lineStyle.color)。支持回调函数，格式如下
+Color of axis label is set to be [axisLine.lineStyle.color](~${componentType}.axisLine.lineStyle.color) by default. Callback function is supported, in the following format:
```js
(val: string) => Color
```
-
-参数是标签的文本，返回颜色值，如下示例：
+Parameter is the text of label, and return value is the color. See the following example:
```js
textStyle: {
@@ -113,48 +112,47 @@ textStyle: {
{{ target: component-axis3D-common-axisTick }}
#${prefix|default('#')} axisTick(Object)
-坐标轴刻度相关设置。
+Settings related to axis tick.
##${prefix|default('#')} show(boolean) = ${defaultShow|default(true)}
-是否显示坐标轴刻度。
+Set this to be `false` to prevent the axis tick from showing.
{{ if: ${hasLabelInterval|default(true)} }}
##${prefix|default('#')} interval(number|Function) = 'auto'
{{ use: component-axis3D-common-axis-interval(
- name="坐标轴刻度标签",
+ name="axis scale label",
componentType=${componentType}
) }}
{{ /if }}
##${prefix|default('#')} length(number) = 5
-坐标轴刻度的长度。
+The length of the axis tick.
##${prefix|default('#')} lineStyle(Object)
-{{ use: partial-line-style(prefix='##' + ${prefix|default('#')}, defaultColor="'#333'", defaultWidth=1, name="坐标轴线") }}
+{{ use: partial-line-style(prefix='##' + ${prefix|default('#')}, defaultColor="'#333'", defaultWidth=1, name="axisLine") }}
<!-- Overwrite color -->
###${prefix|default('#')} color(Color)
-刻度线的颜色，默认取 [axisLine.lineStyle.color](~${componentType}.axisLine.lineStyle.color)。
-
+Color of axis label is set to be [axisLine.lineStyle.color](~${componentType}.axisLine.lineStyle.color) by default.
{{ target: component-axis3D-common-splitLine }}
#${prefix|default('#')} splitLine(Object)
-坐标轴轴线相关设置。
+Settings related to axis line.
##${prefix|default('#')} show(boolean) = ${defaultShow|default(true)}
-是否显示坐标轴轴线。
+Set this to be `false` to prevent the axis line from showing.
{{ if: ${hasLabelInterval|default(true)} }}
##${prefix|default('#')} interval(number|Function) = 'auto'
{{ use: component-axis3D-common-axis-interval(
- name="坐标轴刻度标签",
+ name="axis scale label",
isAxisLabel=true,
componentType=${componentType}
) }}
{{ /if }}
##${prefix|default('#')} lineStyle(Object)
-{{ use: partial-line-style(prefix='##' + ${prefix|default('#')}, defaultColor="'#333'", defaultWidth=2, name="坐标轴线") }}
+{{ use: partial-line-style(prefix='##' + ${prefix|default('#')}, defaultColor="'#333'", defaultWidth=2, name="axisLine") }}
@@ -162,22 +160,24 @@ textStyle: {
#${prefix|default('#')} splitArea(Object)
-坐标轴在 [grid3D](~grid3D) 的平面上的分隔区域。
-##${prefix|default('#')} show(boolean) = ${defaultShow|default(true)}
-是否显示分隔区域。
+Split area of axis in [grid](~grid) area.
+
+##${prefix|default('#')} show(boolean) = ${defaultShow|default(false)}
+Set this to be `true` to show the splitArea.
{{ if: ${hasLabelInterval|default(true)} }}
##${prefix|default('#')} interval(number|Function) = 'auto'
{{ use: component-axis3D-common-axis-interval(
- name="坐标轴分隔区域",
+ name="Axis splitArea",
componentType=${componentType}
) }}
{{ /if }}
##${prefix|default('#')} areaStyle(Object)
-分隔区域的样式设置。
+Split area style.
###${prefix|default('#')} color(Array) = ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
-分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
+Color of the split area.
+The split area color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.
{{ use:partial-style-shadow-opacity(prefix='##' + ${prefix|default('#')}) }}
@@ -186,35 +186,35 @@ textStyle: {
{{ target: component-axis3D-common-axisPointer }}
#${prefix|default('#')} axisPointer(Object)
-坐标轴指示线。
+
+Configurations for axis pointer.
##${prefix|default('#')} show(boolean) = ${defaultShow|default(true)}
-是否显示坐标轴指示线。
+Whether to display the axisPointer. Set this to be `true` to show the splitArea.
##${prefix|default('#')} lineStyle(Object)
-{{ use: partial-line-style(prefix='##' + ${prefix|default('#')}, defaultColor="'rgba(0, 0, 0, 0.8)'", defaultWidth=1, name="坐标轴指示线") }}
+{{ use: partial-line-style(prefix='##' + ${prefix|default('#')}, defaultColor="'rgba(0, 0, 0, 0.8)'", defaultWidth=1, name="axisPointer") }}
##${prefix|default('#')} label(Object)
-指示线标签。
+The label of axisPointer.
###${prefix|default('#')} show(boolean) = true
-是否显示指示线标签。默认数值轴显示，类目轴不显示。
+Whether to display the label of axisPointer. Value axes are displayed by default, while category axes are not.
###${prefix|default('#')} formatter(Function)
-
-标签格式器，函数第一个参数是当前坐标轴的数值，第二个参数是所有坐标轴的数值数组
+The formatter of the label. . The first parameter to the function is the value of the current axis. The second parameter to the function is an array of values for all axes.
```js
(value: number, valueAll: Array) => string
```
###${prefix|default('#')} margin(number)
-
-标签距离坐标轴的距离。同刻度标签一样，这个距离是三维空间而非屏幕像素。
+Distance between label and axis.
+Like the scale label, this distance is a 3D space rather than a screen pixel.
###${prefix|default('#')} textStyle(Object)
diff --git a/cn/option-gl/component/geo3D-common.md b/en/option-gl/component/geo3D-common.md
similarity index 56%
copy from cn/option-gl/component/geo3D-common.md
copy to en/option-gl/component/geo3D-common.md
index dc9ad20..f168587 100644
--- a/cn/option-gl/component/geo3D-common.md
+++ b/en/option-gl/component/geo3D-common.md
@@ -2,16 +2,15 @@
{{ target: component-geo3D-common }}
## map(string)
+The map type. The map type used in ECharts-gl is the same as the [geo](http://echarts.baidu.com/option.html#geo.map) component.
-地图类型。echarts-gl 中使用的地图类型同 [geo](http://echarts.baidu.com/option.html#geo.map) 组件相同
+You can download the required map file in the [Map Download Interface](http://ecomfe.github.io/echarts-builder-web/map3.html), then to import and register it into ECharts.
+
+EChart provides map data in two formats. One is the JS file that can be imported directly through the script tag. After it is introduced, the map name and data will be automatically registered. Another is the JSON file that needs to be registered manually after loaded asynchronously by AJAX.
-你可以在[地图下载界面](http://ecomfe.github.io/echarts-builder-web/map3.html)下载到需要的地图文件引入并注册到 ECharts 中。
+Here are two types of use examples:
-ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。
-
-下面是两种类型的使用示例：
-
-** JavaScript 引入示例 **
+** JavaScript Introduction Example **
```html
<script src="echarts.js"></script>
@@ -27,7 +26,7 @@ chart.setOption({
</script>
```
-** JSON 引入示例 **
+** JSON Introduction Example **
```js
$.get('map/json/china.json', function (chinaJson) {
@@ -42,7 +41,7 @@ $.get('map/json/china.json', function (chinaJson) {
});
```
-ECharts 使用 [geoJSON](http://geojson.org/) 格式的数据作为地图的轮廓，除了上述数据，你也可以通过其它手段获取地图的 [geoJSON](http://geojson.org/) 数据注册到 ECharts 中。
+ECharts uses the data in [geoJSON] (http://geojson.org/) format as the outline of the map. In addition, you can also obtain data in [geoJSON] (http://geojson.org/) format of the map by other means and register it in ECharts.
{{ use: partial-box-size-geo3D(
componentType=${componentType},
@@ -53,7 +52,9 @@ ECharts 使用 [geoJSON](http://geojson.org/) 格式的数据作为地图的轮
## regionHeight(number) = 3
-三维地图每个区域的高度。这个高度是模型的高度，小于 [boxHeight](~${componentType}.boxHeight)。`boxHeight - regionHeight` 这一片区域会被用于三维柱状图，散点图等的展示。
+The height of each area of the 3D map. This height is the height of the model, less than [boxHeight](~${componentType}.boxHeight). `boxHeight - regionHeight` will be used for the display of 3D bar, 3D scatter, and etc.
+
+
{{ use: partial-environment(
componentType=${componentType},
@@ -62,25 +63,27 @@ ECharts 使用 [geoJSON](http://geojson.org/) 格式的数据作为地图的轮
## groundPlane(Object)
-地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
+The ground allows the entire assembly to be “placed” to make the entire scene look more realistic.
+
+ `groundPlane` supports setting up separate `realisticMaterial`, `colorMaterial`, `lambertMaterial` and other materials. If not set, the material parameters of the component are taken by default.
-`groundPlane` 下支持设置单独的 `realisticMaterial`, `colorMaterial`, `lambertMaterial` 等材质。如果不设置则默认取组件下的材质参数。
### show(boolean) = false
-是否显示地面。
+Whether to display the ground.
### color(string) = '#aaa'
-地面颜色。
+The color of the ground.
## instancing(boolean) = false
-`instancing`会将 GeoJSON 中所有的 [geometry](http://geojson.org/geojson-spec.html#geometry-objects) 合并成一个，在 GeoJSON 拥有特别多（上千）的 [geometry](http://geojson.org/geojson-spec.html#geometry-objects) 时可以有效提升绘制效率。
+`instancing` will merge all the [geometry](http://geojson.org/geojson-spec.html#geometry-objects) in GeoJSON into one. When GeoJSON has a lot of (thousands) [geometry](http://geojson.org/geojson-spec.html#geometry-objects), it can effectively improve drawing efficiency.
+
## label(Object)
-标签的相关设置。
+The setting of the label.
{{ use: partial-label(
prefix="##",
@@ -89,7 +92,7 @@ ECharts 使用 [geoJSON](http://geojson.org/) 格式的数据作为地图的轮
## itemStyle(Object)
-${componentName} 中三维图形的视觉属性，包括颜色，透明度，描边等。
+Visual properties of 3D graphics in ${componentName}, including color, transparency, strokes, etc.
{{ use: partial-item-style-geo3D(
prefix="##",
@@ -99,7 +102,7 @@ ${componentName} 中三维图形的视觉属性，包括颜色，透明度，描
## emphasis(Object)
-鼠标 hover 高亮时图形和标签的样式
+Graphic and label styles when mouse hover is highlighted.
### label(Object)
@@ -116,24 +119,26 @@ ${componentName} 中三维图形的视觉属性，包括颜色，透明度，描
## {{ if: ${inMap} }} data(Array) {{ else: }} regions(Array) {{ /if }}
-地图区域的设置，
+The setting of the map area.
### name(string)
-所对应的地图区域的名称，例如 `'广东'`，`'浙江'`。
+The name of the corresponding map area, such as `'Guangdong'`, `'Zhejiang'`.
{{ if: ${inMap} }}
### value(number)
-该区域的数据值。
+The data value for this area.
{{ /if }}
### regionHeight(number)
-区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。如下图
+
+The height of the area. Different heights can be set to express the size of the data. When GeoJSON is the data of the building, this value can also be used to represent the approximate height. As shown below：
+
### itemStyle(Object)
-单个区域的样式设置。
+Style settings for a single area.
{{ use: partial-item-style-geo3D(
prefix="###"
@@ -141,7 +146,7 @@ ${componentName} 中三维图形的视觉属性，包括颜色，透明度，描
### label(Object)
-单个区域的标签设置。
+Label settings for a single area.
{{ use: partial-label-geo3D(
prefix="###",
@@ -150,7 +155,7 @@ ${componentName} 中三维图形的视觉属性，包括颜色，透明度，描
### emphasis(Object)
-单个区域标签和样式的高亮设置。
+Setting the highlight for labels and styles for a single area.
#### itemStyle(Object)
@@ -205,24 +210,23 @@ ${componentName} 中三维图形的视觉属性，包括颜色，透明度，描
{{ use: partial-viewport }}
-
-
{{ target:partial-box-size-geo3D(master=partial-box-size)}}
{{ block: boxWidthDescriptionExtra }}
-下面是${componentName} 中`boxWidth`, `boxHeight`, `boxDepth`, `regionHeight`的示意图。
+The following image is a schematic diagram of `boxWidth`, `boxHeight`, `boxDepth`, `regionHeight` in ${componentName}.
+
{{ /block }}
{{ block: boxDepthDescriptionExtra }}
-组件深度默认自动，保证三维组件的显示比例跟输入的 GeoJSON 的比例相同
+The component depth defaults to automatic, ensuring that the scale of the 3D component is the same as the ratio of the input GeoJSON.
{{ /block }}
{{ block: boxHeightDescriptionExtra}}
-组件高度。这个高度包含三维地图上的柱状图，散点图。
+Component height. This height contains the height of the bar and scatter on a 3D map.
{{ /block }}
@@ -249,10 +253,9 @@ ${componentName} 中三维图形的视觉属性，包括颜色，透明度，描
#${prefix|default('##')} borderWidth(number) = ${defaultBorderWidth|default(0)}
-图形描边的宽度。加上描边后可以更清晰的区分每个区域。如下图：
+The width of the border. With the border, you can distinguish each area more clearly. As shown below:
#${prefix|default('##')} borderColor(string) = ${defaultBorderColor|default('#333')}
-
-图形描边的颜色。
+The color of the border.
diff --git a/en/option-gl/component/geo3D.md b/en/option-gl/component/geo3D.md
new file mode 100644
index 0000000..0577e5a
--- /dev/null
+++ b/en/option-gl/component/geo3D.md
@@ -0,0 +1,16 @@
+
+{{ target: component-geo3D }}
+
+# geo3D(Object)
+
+A 3D geographic coordinate system component. The component can draw a 3D GeoJSON and coordinate system. Developers can display 3D Scatter, 3D Bubble, 3D Bar, 3D Lines on it.
+
+
+## show(boolean) = true
+
+Whether to display 3D geographic coordinate system components.
+
+{{ use: component-geo3D-common(
+ componentType="geo3D",
+ componentName="A 3D geographic coordinate system component"
+) }}
\ No newline at end of file
diff --git a/en/option-gl/component/globe.md b/en/option-gl/component/globe.md
index cd7b016..c735ea4 100644
--- a/en/option-gl/component/globe.md
+++ b/en/option-gl/component/globe.md
@@ -3,34 +3,44 @@
# globe(Object)
-地球组件。组件提供了地球的绘制以及相应的坐标系，开发者可以在上面展示三维的散点图，气泡图，柱状图，飞线图。
+Globe component. The component provides the drawing of the Earth and the coordinate system. The developer can display 3D Scatter, 3D Bubble, 3D Bar, 3D Lines on it.
## show(boolean) = true
-是否显示地球组件。
+Whether to show the globe component.
{{ use: partial-zlevel }}
{{ use: partial-viewport }}
## globeRadius(number) = 100
-地球的半径。单位相对于三维空间，跟 [viewControl.distance](~globe.viewControl.distance) 相关。
+The radius of the globe. The unit is relative to the three-dimensional space, related to [viewControl.distance](~globe.viewControl.distance).
+
+
+## globeOuterRadius(number) = 150
+
+The outer radius of the globe. This area between `globeRadius` and `globeOuterRadius` will be used to display 3D histograms, scatter plots, etc.
+
+
+{{ use: partial-environment(
+ componentType="globe",
+ componentName="地球"
+) }}
{{ use: partial-environment }}
## baseTexture(string|HTMLImageElement|HTMLCanvasElement|EChartsInstance)
-地球的纹理。支持图片路径字符串，图片或者 Canvas 的对象。
+The texture of the globe. Support for the string of image paths, images object or Canvas objects.
-也支持直接使用 echarts 的实例作为纹理，此时在地球上的鼠标动作会跟纹理上使用的 echarts 实例有联动。
+It also supports to use an echarts example as a texture directly, in which case mouse actions on Earth will be linked to the echarts instance used on the texture.
-示例：
+Example:
```js
-// 使用地球的纹理图片
+// Use the globe's texture image
baseTexture: 'asset/earth.jpg'
-
-// 使用 echarts 绘制世界地图的实例作为纹理
+// Use the world map example of echarts as a texture.
var canvas = document.createElement('canvas');
var mapChart = echarts.init(canvas, null, {
width: 4096, height: 2048
@@ -40,7 +50,7 @@ mapChart.setOption({
{
type: 'map',
map: 'world',
- // 绘制完整尺寸的 echarts 实例
+ // Draw full size echarts example
top: 0, left: 0,
right: 0, bottom: 0,
boundingCoords: [[-180, 90], [180, -90]]
@@ -54,23 +64,174 @@ baseTexture: mapChart
## heightTexture(string|HTMLImageElement|HTMLCanvasElement)
-地球的高度纹理。高度纹理可以用于配合光照表现地球表面的明暗细节。下面两图分别是使用 `heightTexture` 和未使用 `heightTexuture` 的效果区别。
+The high texture of the globe. High textures can be used to match [Bump Map](https://zh.wikipedia.org/wiki/%E5%87%B9%E5%87%B8%E8%B4%B4%E5%9B%BE) to show the light and dark details of the Earth's surface.
+The following two images show the difference between using `heightTexture` and not using `heightTexuture`.
-
+
-
+
## displacementTexture(string|HTMLImageElement|HTMLCanvasElement)
-地球顶点的置换纹理，默认同 [heightTexture]()
+The displacement texture of the vertices of the globe, the default is the same as a [heightTexture]()
+
+Compared to bump maps, The displacement of the vertex is to directly shift the vertices according to the texture. Valid when [displaymentScale](~globe.displaymentScale) is greater than 0.
+
+## displacementScale(number) = 0
+
+The displacement map of the globe's vertex. The default is 0, which means no displacement.
+The following two images show the effects of setting different `displacementScale`.
+
+
+<div class="twentytwenty-container" style="width: 700px;">
+ <img src="documents/asset/gl/img/displacement-disable.png" width="100%" title="Scale: 0">
+ <img src="documents/asset/gl/img/displacement-enable.png" width="100%" title="Scale: 0.1">
+</div>
+
+## displacementQuality(string) = 'medium'
+
+The quality of the globe's vertex displacement. Support for `'low'`, `'medium'`, `'high'`, `'ultra'` settings.Higher quality can show more ground height detail.
+The following two images show the effects of different `displacementQuality`.
+
+<div class="twentytwenty-container" style="width: 700px;">
+ <img src="documents/asset/gl/img/displacement-low.png" width="100%" title="Low">
+ <img src="documents/asset/gl/img/displacement-ultra.png" width="100%" title="Ultra">
+</div>
+
+
+{{ use: partial-shading-globe(
+ componentType="globe",
+ componentName="地球"
+) }}
+
+{{ use: partial-light-globe(
+ componentType="globe",
+ componentName="地球"
+) }}
+
+{{ use: partial-post-effect(
+ componentType="globe",
+ componentName="地球"
+) }}
+
+{{ use: partial-temporal-super-sampling(
+ componentType="globe",
+ componentName="地球"
+) }}
+
+{{ use: partial-view-control(
+ componentType="globe",
+ componentName="地球",
+ defaultPanSensitivity=0
+) }}
+
+### targetCoord(Array)
+
+Position the longitudes and latitudes.
+Ignore [alpha](~globe.viewControl.alpha) 和 [beta](~globe.viewControl.beta) after the setting.
+
+
+```js
+viewControl: {
+ // locate in BeiJing
+ targetCoord: [116.46, 39.92]
+}
+```
+
+
+## layers(Array)
+
+Configuration of the Earth's Surface Layer.
+You can use this configuration item to add clouds, or to supplement [baseTexture](~globe. baseTexture) to draw the outline of the country, and so on.
+
+### show(boolean) = true
+
+Whether to show this layer.
+
+### type(string) = 'overlay'
+
+Layper type, Optional：
+
++ `'overlay'`
+
+The overlay on the ground surface can be used to display clouds and the like.
+
++ `'blend'`
+
+Mix with [baseTexture](~globe.baseTexture).
+
+### name(string)
+
+The name of the layer. When setting the properties of the layer with setOption, you can use the name to identify the layer that needs to be updated.
+
+```js
+chart.setOption({
+ globe: {
+ layer: [{
+ // Update the texture of the layer named 'cloud'
+ name: 'cloud',
+ texture: 'cloud.png'
+ }]
+ }
+});
+```
+
+### blendTo(string) = 'albedo'
+
+When [type](~globe.layers.type) is `'blend'` is valid .
+
+Optional：
++ `albedo` is mixed to albedo, affected by lighting.
+
++ `emission` is mixed to self-illuminating, unaffected by light.
+
+### intensity(number) = 1
+
+The intensity of the mixture.
+
+### shading(string) = 'lambert'
+
+The coloring effect of the overlay is the same as [globe.shading](~globe.shading), which supports `'color'`, `'lambert'`, `'realistic'`
+
+Valid when [type](globe.layers.type) is `'overlay'`.
+
+### distance(number) = null
+
+The distance from the overlay to the surface of the globe.
+
+Valid when [type](~globe.layers.type) is `'overlay'`.
+
+
+### texture(string|HTMLImageElement|HTMLCanvasElement|EChartsInstance)
+
+The texture of the globe. Support for the string of image paths, images object or Canvas objects.
+
+It also supports to use an echarts example as a texture directly, in which case mouse actions on Earth will be linked to the echarts instance used on the texture.
+
+{{ use: partial-zlevel }}
+
+{{ use: partial-viewport }}
+
+
+{{ target: partial-shading-globe(master=partial-shading) }}
+
+{{ block: shading-compare }}
+Here are the differences between different coloring effects.
+
+
+
+
+{{ /block }}
+
+
+{{ target: partial-light-globe(master=partial-light) }}
-## displacementScale(number)
+{{ block: light-extend }}
+###${prefix|default("#")} time(Date)
+The time of sunshine. The current system time is used by default.
-{{ use: partial-shading }}
+{{ /block }}
-{{ use: partial-light }}
-{{ use: partial-post-effect }}
-{{ use: partial-view-control }}
diff --git a/en/option-gl/component/grid3D.md b/en/option-gl/component/grid3D.md
new file mode 100644
index 0000000..332f16a
--- /dev/null
+++ b/en/option-gl/component/grid3D.md
@@ -0,0 +1,73 @@
+{{ target: component-grid3D }}
+
+# grid3D(Object)
+3D cartesian coordinate system component. It requires [xAxis3D](~xAxis3D), [yAxis3D](~yAxis3D)and [zAxis3D](~zAxis3D) axis components to be used together.
+
+You can draw [3D Lines](~series-line3D), [3D Bar](~series-bar3D), [3D Scatter](~series-scatter3D), [surface](~series-surface) on the 3D Cartesian coordinate system.
+
+You can set the [postEffect](~grid3D.postEffect), [light](~grid3D.light) and other configuration items to improve the display of 3D charts in `grid3D`.
+
+Below is a description of the axis configuration items in grid3D.
+
+
+
+---
+
+**Note：** The [axisLine](~xAxis3D.axisLine), [axisTick](~xAxis3D.axisTick), [axisLabel](~xAxis3D.axisLabel), [splitLine](~xAxis3D.splitLine), [splitArea](~xAxis3D.splitArea), [axisPointer](~xAxis3D.axisPointer) set separately on [xAxis3D](~xAxis3D), [yAxis3D](~yAxis3D), [zAxis3D](~zAxis3D) will cover the corresponding configuration items under [grid3D](~grid3D).
+
+
+## show(boolean)
+Whether to display a 3D cartesian coordinate system component.
+
+
+{{ use: partial-box-size(
+ componentType='grid3D',
+ componentName='3D cartesian coordinate system',
+ defaultBoxWidth = 100,
+ defaultBoxHeight = 100,
+ defaultBoxDepth = 100
+) }}
+
+{{ use: component-axis3D-common(
+ prefix="#",
+ componentType="grid3D",
+ componentName='3D cartesian coordinate system'
+)}}
+
+{{ use: partial-environment(
+ componentType='grid3D',
+ componentName='3D cartesian coordinate system'
+) }}
+
+{{ use: partial-light(
+ componentType='grid3D',
+ componentName='3D cartesian coordinate system',
+ defaultMainLightAlpha=30,
+ defaultMainLightBeta=40
+) }}
+
+{{ use: partial-post-effect(
+ componentType='grid3D',
+ componentName='3D cartesian coordinate system'
+) }}
+
+{{ use: partial-temporal-super-sampling(
+ componentType='grid3D',
+ componentName='3D cartesian coordinate system'
+) }}
+
+{{ use: partial-view-control(
+ componentType='grid3D',
+ componentName='3D cartesian coordinate system',
+ defaultAlpha=20,
+ defaultBeta=40,
+ defaultDistance=200,
+ defaultMinDistance=40,
+ defaultMaxDistance=400
+) }}
+
+
+{{ use: partial-zlevel }}
+
+{{ use: partial-viewport }}
+
diff --git a/en/option-gl/component/mapbox3D.md b/en/option-gl/component/mapbox3D.md
new file mode 100644
index 0000000..d72d72a
--- /dev/null
+++ b/en/option-gl/component/mapbox3D.md
@@ -0,0 +1,83 @@
+
+{{ target: component-mapbox3D }}
+
+# mapbox3D(Object)
+
+A geographic component based on mapbox-gl-js. Support for drawing [3D Scatter](~series-scatter3D), [3D Lines](~series-lines3D), [3D Bar](~series-bar3D), [3D map](~series-map3D) on mapbox maps. You can take advantage of Mapbox's powerful map service and ECharts GL's rich visualization and rendering effects to achieve the visualization you want.
+
+You need to introduce the official sdk of mapbox before using the mapbox component.
+
+```html
+<script src='https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js'></script>
+<link href='https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css' rel='stylesheet' />
+```
+Then get the token provided by mapbox and set it to `mapbox.accessToken`.
+
+
+```js
+mapboxgl.accessToken = 'your token';
+```
+
+Then you can use the mapbox component just like any other component.
+
+```js
+chart.setOption({
+ mapbox: {
+ style: 'mapbox://styles/mapbox/dark-v9'
+ }
+});
+```
+Go to [https://www.mapbox.com/mapbox-gl-js/api/](https://www.mapbox.com/mapbox-gl-js/api/) for more details on `mapbox-gl-js sdk`.
+
+
+## style(string|Object)
+
+Sets the style of the Mapbox map. Same as [https://www.mapbox.com/mapbox-gl-js/style-spec/](https://www.mapbox.com/mapbox-gl-js/style-spec/).
+
+## center(Array)
+
+Sets the longitude and latitude of the center of the map. Longitude and latitude are represented by arrays, for example:
+
+```js
+mapbox3D: {
+ center: [104.114129, 37.550339],
+ zoom: 3
+}
+```
+
+## zoom(number)
+
+Sets the zoom level of the map. See [https://www.mapbox.com/mapbox-gl-js/style-spec/#root-zoom](https://www.mapbox.com/mapbox-gl-js/style-spec/#root-zoom)
+
+## bearing(number) = 0
+
+Sets the bearing angle of the map. See [https://www.mapbox.com/mapbox-gl-js/style-spec/#root-bearing](https://www.mapbox.com/mapbox-gl-js/style-spec/#root-bearing)
+
+## pitch(number) = 0
+Sets the pitch angle of the map. The default is `0` means perpendicular to the surface of the map. The greater value is `60`. See [https://www.mapbox.com/mapbox-gl-js/style-spec/#root-pitch](https://www.mapbox.com/mapbox-gl-js/style-spec/#root-pitch)
+
+## altitudeScale(number) = 1
+
+The zoom of the altitude Scale.
+
+{{ use: partial-shading(
+ componentType='mapbox3D',
+ componentName='mapbox3D'
+) }}
+
+{{ use: partial-light(
+ componentType='mapbox3D',
+ componentName='mapbox3D',
+ defaultMainLightAlpha=40,
+ defaultMainLightBeta=30
+) }}
+
+{{ use: partial-post-effect(
+ componentType='mapbox3D',
+ componentName='mapbox3D'
+) }}
+
+{{ use: partial-temporal-super-sampling(
+ componentType='mapbox3D',
+ componentName='mapbox3D'
+) }}
diff --git a/en/option-gl/component/xAxis3D.md b/en/option-gl/component/xAxis3D.md
new file mode 100644
index 0000000..6a608e9
--- /dev/null
+++ b/en/option-gl/component/xAxis3D.md
@@ -0,0 +1,27 @@
+{{ target: component-xAxis3D }}
+
+# xAxis3D(Object)
+
+The X-axis in a 3D cartesian coordinate system.
+You can use [grid3DIndex](~xAxis3D.grid3DIndex) to index [3D cartesian coordinate system](~grid3D).
+
+The [axisLine](~xAxis3D.axisLine), [axisTick](~xAxis3D.axisTick), [axisLabel](~xAxis3D.axisLabel), [splitLine](~xAxis3D.splitLine), [splitArea](~xAxis3D.splitArea), [axisPointer](~xAxis3D.axisPointer) set separately on [xAxis3D](~xAxis3D) will cover the corresponding configuration items under [grid3D](~grid3D).
+
+## show(boolean)
+
+Whether to display the x-axis.
+
+## name(string) = 'X'
+
+The name of the axis.
+
+{{ use: component-axis3D-axis-common(
+ componentType="xAxis3D",
+ componentName='x axis'
+) }}
+
+{{ use: component-axis3D-common(
+ prefix="#",
+ componentType="xAxis3D",
+ componentName='x axis'
+)}}
\ No newline at end of file
diff --git a/en/option-gl/component/yAxis3D.md b/en/option-gl/component/yAxis3D.md
new file mode 100644
index 0000000..d6e3f98
--- /dev/null
+++ b/en/option-gl/component/yAxis3D.md
@@ -0,0 +1,27 @@
+{{ target: component-yAxis3D }}
+
+# yAxis3D(Object)
+
+The Y-axis in a 3D cartesian coordinate system.
+You can use [grid3DIndex](~yAxis3D.grid3DIndex) to index [3D cartesian coordinate system](~grid3D).
+
+The [axisLine](~yAxis3D.axisLine), [axisTick](~yAxis3D.axisTick), [axisLabel](~yAxis3D.axisLabel), [splitLine](~yAxis3D.splitLine), [splitArea](~yAxis3D.splitArea), [axisPointer](~yAxis3D.axisPointer) set separately on [yAxis3D](~yAxis3D) will cover the corresponding configuration items under [grid3D](~grid3D).
+
+## show(boolean)
+
+Whether to display the y-axis.
+
+## name(string) = 'Y'
+
+The name of the axis.
+
+{{ use: component-axis3D-axis-common(
+ componentType="yAxis3D",
+ componentName='y axis'
+) }}
+
+{{ use: component-axis3D-common(
+ prefix="#",
+ componentType="yAxis3D",
+ componentName='y axis'
+)}}
\ No newline at end of file
diff --git a/en/option-gl/component/zAxis3D.md b/en/option-gl/component/zAxis3D.md
new file mode 100644
index 0000000..26ebe09
--- /dev/null
+++ b/en/option-gl/component/zAxis3D.md
@@ -0,0 +1,27 @@
+{{ target: component-zAxis3D }}
+
+# zAxis3D(Object)
+
+The Z-axis in a 3D cartesian coordinate system.
+You can use [grid3DIndex](~zAxis3D.grid3DIndex) to index [3D cartesian coordinate system](~grid3D).
+
+The [axisLine](~zAxis3D.axisLine), [axisTick](~zAxis3D.axisTick), [axisLabel](~zAxis3D.axisLabel), [splitLine](~zAxis3D.splitLine), [splitArea](~zAxis3D.splitArea), [axisPointer](~zAxis3D.axisPointer) set separately on [zAxis3D](~zAxis3D) will cover the corresponding configuration items under [grid3D](~grid3D).
+
+## show(boolean)
+
+Whether to display the z-axis.
+
+## name(string) = 'Z'
+
+The name of the axis.
+
+{{ use: component-axis3D-axis-common(
+ componentType="zAxis3D",
+ componentName='z axis'
+) }}
+
+{{ use: component-axis3D-common(
+ prefix="#",
+ componentType="zAxis3D",
+ componentName='z axis'
+)}}
\ No newline at end of file
diff --git a/en/option-gl/option-gl.md b/en/option-gl/option-gl.md
index ad2eb8a..5bfaf24 100644
--- a/en/option-gl/option-gl.md
+++ b/en/option-gl/option-gl.md
@@ -1,3 +1,21 @@
{{target: option-gl}}
-{{import: component-globe}}
\ No newline at end of file
+{{import: component-globe}}
+{{import: component-geo3D}}
+{{import: component-mapbox3D}}
+{{import: component-grid3D}}
+{{import: component-xAxis3D}}
+{{import: component-yAxis3D}}
+{{import: component-zAxis3D}}
+
+{{import: series-scatter3D}}
+{{import: series-bar3D}}
+{{import: series-line3D}}
+{{import: series-lines3D}}
+{{import: series-map3D}}
+{{import: series-surface}}
+{{import: series-polygons3D}}
+
+{{import: series-scatterGL}}
+{{import: series-graphGL}}
+{{import: series-flowGL}}
\ No newline at end of file
diff --git a/cn/option-gl/partial/animation.md b/en/option-gl/partial/animation.md
similarity index 57%
copy from cn/option-gl/partial/animation.md
copy to en/option-gl/partial/animation.md
index 031eb18..b7202f6 100644
--- a/cn/option-gl/partial/animation.md
+++ b/en/option-gl/partial/animation.md
@@ -2,26 +2,25 @@
#${prefix|default('#')} animation(boolean) = ${defaultAnimation|default(true)}
-是否开启动画。
+Whether to enable animation.
#${prefix|default('#')} animationDurationUpdate(number) = ${defaultAnimationDurationUpdate|default(500)}
-过渡动画的时长。
-
+The duration time for update the transition animation.
#${prefix|default('#')} animationEasingUpdate(string) = ${defaultAnimationEasingUpdate|default('cubicOut')}
-过渡动画的缓动效果。
+The easing effect for update transition animation.
{{ if: ${animationDelay} }}
#${prefix|default('#')} animationDelayUpdate(number) = 0
-过渡动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
+The delayed to update the transition animation, which supports callback function for different data to have different animation effects.
-如下示例：
+Example：
```js
animationDelayUpdate: function (idx) {
- // 越往后的数据延迟越大
+ // The more backward the data, the greater the delay of the animation
return idx * 100;
}
```
diff --git a/en/option-gl/partial/area-style.md b/en/option-gl/partial/area-style.md
new file mode 100644
index 0000000..d91d084
--- /dev/null
+++ b/en/option-gl/partial/area-style.md
@@ -0,0 +1,19 @@
+{{ target: partial-area-style }}
+
+#${prefix|default('##')} ${colorName|default('color')}(string{{if: ${hasCallback} }}|Function{{/if}})=${defaultColor|default('adaptive')}
+
+The color of the graphics area. {{ if: ${useColorPalatte} }} Color is taken from [option.color Palette](~color) by default. {{/if}}
+
+In addition to color strings, RGBA values represented by arrays are supported, for example:
+
+```js
+// pure white
+[1, 1, 1, 1]
+```
+
+When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.
+
+#${prefix|default('##')} opacity(number) = ${defaultOpacity|default(1)}
+
+The opacity of the graphics area.
+
diff --git a/en/option-gl/partial/blend-mode.md b/en/option-gl/partial/blend-mode.md
new file mode 100644
index 0000000..ea03a82
--- /dev/null
+++ b/en/option-gl/partial/blend-mode.md
@@ -0,0 +1,9 @@
+{{ target: partial-blend-mode }}
+
+#${prefix|default('#')} blendMode(string) = 'source-over'
+
+Sets the type of compositing operation to apply when drawing a new shape.
+
+Currently supporting `'source-over'`, `'lighter'`. The default is `'source-over'` mode is blended by alpha. The `'lighter'` is overlap mode. In this mode, the area where the number of graphics is concentrated can be highlighted by the overlap.
+
+
diff --git a/cn/option-gl/partial/box-size.md b/en/option-gl/partial/box-size.md
similarity index 59%
copy from cn/option-gl/partial/box-size.md
copy to en/option-gl/partial/box-size.md
index 0c562b1..008da80 100644
--- a/cn/option-gl/partial/box-size.md
+++ b/en/option-gl/partial/box-size.md
@@ -2,21 +2,21 @@
#${prefix|default('#')} boxWidth(number) = ${defaultBoxWidth|default(100)}
-${componentName}组件在三维场景中的宽度。配合 [viewControl.distance](~${componentType}.viewControl.distance) 可以得到最合适的展示尺寸。
+${componentName} width in a 3D scene. With [viewControl.distance](~${componentType}.viewControl.distance) you can get the most appropriate display size.
{{ block: boxWidthDescriptionExtra }}
{{ /block }}
#${prefix|default('#')} boxHeight(number) = ${defaultBoxHeight|default(100)}
-${componentName}组件在三维场景中的高度。
+${componentName} height in a 3D scene.
{{ block: boxHeightDescriptionExtra }}
{{ /block }}
#${prefix|default('#')} boxDepth(number) = ${defaultBoxDepth|default(100)}
-${componentName}组件在三维场景中的深度。
+${componentName} depth in a 3D scene.
{{ block: boxDepthDescriptionExtra }}
{{ /block }}
\ No newline at end of file
diff --git a/en/option-gl/partial/environment.md b/en/option-gl/partial/environment.md
new file mode 100644
index 0000000..b6bc8ad
--- /dev/null
+++ b/en/option-gl/partial/environment.md
@@ -0,0 +1,22 @@
+{{ target: partial-environment }}
+
+#${prefix|default("#")} environment(string) = 'auto'
+
+Environment map. Support for solid colors, gradual colors, URL of panoramic texture. The default is `'auto'`, which is used as the environment texture when [light.ambientCubemap.texture](~${componentType}.light.ambientCubemap.texture) is configured. Otherwise, the environment texture is not displayed.
+
+Example:
+```js
+// Configure as a panoramic texture
+environment: 'asset/starfield.jpg'
+// Configured as a solid black background
+environment: '#000'
+// Configured as a background with a vertical gradient
+environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0, color: '#00aaff' // Sky color
+}, {
+ offset: 0.7, color: '#998866' // Ground color
+}, {
+ offset: 1, color: '#998866' // Ground color
+}], false)
+
+```
diff --git a/en/option-gl/partial/formatter.md b/en/option-gl/partial/formatter.md
new file mode 100644
index 0000000..3306a71
--- /dev/null
+++ b/en/option-gl/partial/formatter.md
@@ -0,0 +1,78 @@
+{{ target: partial-formatter-params-structure }}
+```js
+{
+ componentType: 'series',
+ // Series type
+ seriesType: string,
+ // Series index in option.series
+ seriesIndex: number,
+ // Series name
+ seriesName: string,
+ // Data name, or category name
+ name: string,
+ // Data index in input data array
+ dataIndex: number,
+ // Original data as input
+ data: Object,
+ // Value of data. In most series it is the same as data.
+ // But in some series it is some part of the data (e.g., in map, radar)
+ value: number|Array|Object,
+ // encoding info of coordinate system
+ // Key: coord, like ('x' 'y' 'radius' 'angle')
+ // value: Must be an array, not null/undefined. Contain dimension indices, like:
+ // {
+ // x: [2] // values on dimension index 2 are mapped to x axis.
+ // y: [0] // values on dimension index 0 are mapped to y axis.
+ // }
+ encode: Object,
+ // dimension names list
+ dimensionNames: Array<String>,
+ // data dimension index, for example 0 or 1 or 2 ...
+ // Only work in `radar` series.
+ dimensionIndex: number,
+ // Color of data
+ color: string,
+{{ for: ${extra} as ${obj}, ${name} }}{{ if: ${extra}.hasOwnProperty(${name}) }}
+ // ${obj.desc}
+ ${name}: ${obj.type},
+{{ /if }}{{ /for }}
+}
+```
+
+Note: the usage of encode and dimensionNames can be:
+
+If data is:
+```js
+dataset: {
+ source: [
+ ['Matcha Latte', 43.3, 85.8, 93.7],
+ ['Milk Tea', 83.1, 73.4, 55.1],
+ ['Cheese Cocoa', 86.4, 65.2, 82.5],
+ ['Walnut Brownie', 72.4, 53.9, 39.1]
+ ]
+}
+```
+We can get values that corresponding to y axis by:
+```js
+params.value[params.encode.y[0]]
+```
+
+If data is:
+```js
+dataset: {
+ dimensions: ['product', '2015', '2016', '2017'],
+ source: [
+ {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
+ {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
+ {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
+ {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
+ ]
+}
+```
+We can get values that corresponding to y axis by:
+```js
+params.value[params.dimensionNames[params.encode.y[0]]]
+```
+
+
+{{ /target }}
\ No newline at end of file
diff --git a/en/option-gl/partial/icon.md b/en/option-gl/partial/icon.md
new file mode 100644
index 0000000..406c0b2
--- /dev/null
+++ b/en/option-gl/partial/icon.md
@@ -0,0 +1,16 @@
+{{ target: partial-icon }}
+
+Icon types provided by ECharts includes {{ import: partial-icon-buildin}}
+
+{{ use: partial-icon-path }}
+
+
+{{ target: partial-icon-buildin}}
+`'circle'`, `'rect'`, `'roundRect'`, `'triangle'`, `'diamond'`, `'pin'`, `'arrow'`, `'none'`
+
+
+{{ target: partial-icon-path }}
+
+Icons can be set to arbitrary vector path via `'path://'` in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to [SVG PathData](http://www.w3.org/TR/SVG/paths.html#PathData) for more information about the format of the path. You may export vector paths from tools like Adobe
+
+
diff --git a/en/option-gl/partial/item-style.md b/en/option-gl/partial/item-style.md
new file mode 100644
index 0000000..4f5e43f
--- /dev/null
+++ b/en/option-gl/partial/item-style.md
@@ -0,0 +1,18 @@
+{{ target: partial-item-style }}
+
+#${prefix|default('##')} ${colorName|default('color')}(string{{if: ${hasCallback} }}|Function{{/if}})=${defaultColor|default('adaptive')}
+
+The color of the graphic. {{ if: ${useColorPalatte} }} Color is taken from [option.color Palette](~color) by default. {{/if}}
+
+
+```js
+// pure white
+[1, 1, 1, 1]
+```
+
+When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.
+
+
+#${prefix|default('##')} opacity(number) = ${defaultOpacity|default(1)}
+
+The opacity of the graphic.
diff --git a/cn/option-gl/partial/label.md b/en/option-gl/partial/label.md
similarity index 59%
copy from cn/option-gl/partial/label.md
copy to en/option-gl/partial/label.md
index 97b9a71..14d0dbd 100644
--- a/cn/option-gl/partial/label.md
+++ b/en/option-gl/partial/label.md
@@ -3,30 +3,29 @@
#${prefix|default('###')} color(string)=${defaultColor|default('"#fff"')}
-文字的颜色。
+The Color of the text.
#${prefix|default('###')} borderWidth(number)=${defaultBorderWidth|default(0)}
-文字的描边宽度。
+The border width of the text.
#${prefix|default('###')} borderColor(string)=${defaultBorderColor|default('#fff')}
-文字的描边颜色。
-
+The border color of the text.
#${prefix|default('###')} fontFamily(string)='sans-serif'
-文字的字体系列。
+The font family of the text.
#${prefix|default('###')} fontSize(number)=${defaultFontSize|default(12)}
-${name}文字的字体大小。
+${name}The font size of the text.
#${prefix|default('###')} fontWeight(string)=${defaultFontWeight|default('normal')}
-${name}文字字体的粗细。
+${name}The font thick weight of the text.
-可选：
+**Optional:**
+ `'normal'`
+ `'bold'`
+ `'bolder'`
@@ -34,25 +33,24 @@ ${name}文字字体的粗细。
+ 100 | 200 | 300 | 400...
-
-
-
{{ target: partial-label }}
#${prefix|default('##')} show(boolean) = ${defaultShow|default(false)}
-是否显示标签。
+Whether to show the label.
#${prefix|default('##')} distance(number) = ${defaultDistance}
-标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。
+Distance to the host graphic element.
+
+The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.
{{ if: ${hasPosition} }}
#${prefix|default('##')} position(string) = ${defaultPosition|default('top')}
-标签的位置。
+The location of the label.
-**可选：**
+**Optional:**
+ 'top'
+ 'left'
@@ -63,29 +61,33 @@ ${name}文字字体的粗细。
#${prefix|default('##')} formatter(Function|string)
-标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 `\n` 换行。
+The formatter of the label content, which supports the string template and the callback function. In either form, `\n` is supported to represent a new line.
+
+**String template:**
-**字符串模板**
-模板变量有 `{a}`、`{b}`、`{c}`，分别表示系列名，数据名，数据值。
+The model variation includes:
++ `{a}`: series name.
++ `{b}`: the name of a data item.
++ `{c}`: the value of a data item.
-**示例：**
+**Example:**
```js
formatter: '{b}: {c}'
```
-**回调函数**
-
-回调函数格式：
+**Callback function:**
+ Callback function is in form of:
```js
(params: Object|Array) => string
```
-参数 `params` 是 formatter 需要的单个数据集。格式如下：
+The `params` is the single data set needed by formatter, which is formed as:
+
{{ use: partial-formatter-params-structure() }}
#${prefix|default('##')} textStyle(Object)
-标签的字体样式。
+The font style of the label.
{{ use:partial-text-style(
prefix=${prefix|default('##')} + '#',
diff --git a/en/option-gl/partial/light.md b/en/option-gl/partial/light.md
new file mode 100644
index 0000000..279d9c7
--- /dev/null
+++ b/en/option-gl/partial/light.md
@@ -0,0 +1,104 @@
+{{ target: partial-light }}
+
+#${prefix|default("#")} light(Object)
+
+Light related settings. Invalid when [shading](~${componentType}.shading) is 'color'.
+
+The lighting settings affect the components and all the charts on the component's coordinate system.
+
+A reasonable lighting setting can make the brightness and darkness of the whole scene richer and more layered.
+
+##${prefix|default("#")} main(Object)
+
+The setting of the main light source of the scene. In the [globe](~globe) component is the sun.
+
+###${prefix|default("#")} color(string) = ${defaultMainLightColor|default('#fff')}
+
+The color of the main light source.
+
+
+###${prefix|default("#")} intensity(number) = ${defaultMainLightIntensity|default(1)}
+
+The intensity of the main light source.
+
+###${prefix|default("#")} shadow(boolean) = false
+
+Whether the main light source displays a shadow. The default is off.
+
+Turning on the shadows can bring more realistic and layered lighting to the scene. But it also increases the operating overhead of the program.
+
+The following two images show the difference between turning on the shadow and turning off the shadow.
+
+<div class="twentytwenty-container" style="width: 700px;">
+ <img src="documents/asset/gl/img/geo-shadow.png" width="100%" title="Shadow">
+ <img src="documents/asset/gl/img/geo-no-shadow.png" width="100%" title="No Shadow">
+</div>
+
+###${prefix|default("#")} shadowQuality(string) = 'medium'
+
+The quality of the shadow. You can choose `'low'`, `'medium'`, `'high'`, `'ultra'`
+
+The following two images shows the difference between low quality and high quality shadows.
+
+<div class="twentytwenty-container" style="width: 700px;">
+ <img src="documents/asset/gl/img/geo-shadow-low.png" width="100%" title="Low">
+ <img src="documents/asset/gl/img/geo-shadow-high.png" width="100%" title="High">
+</div>
+
+###${prefix|default("#")} alpha(number) = ${defaultMainLightAlpha|default(0)}
+
+The main light source is around the x-axis, which is the angle of up-down rotation. Control the direction of the light with [beta](~${componentType}.light.main.beta).
+
+As the following image show:
+
+
+
+The [globe](~globe) component can control the time of sunlight by [time](~globe.light.main.time).
+
+###${prefix|default("#")} beta(number) = ${defaultMainLightAlpha|default(0)}
+
+The main light source is around the y-axis, which is the angle of the left-right rotation.
+
+
+{{ block: light-extend }}
+{{ /block }}
+
+##${prefix|default("#")} ambient(Object)
+
+Global ambient light settings.
+
+###${prefix|default("#")} color(string) = ${defaultAmbientLightColor|default('#fff')}
+
+The color of ambient light.
+
+###${prefix|default("#")} intensity(number) = ${defaultAmbientLightIntensity|default(0.2)}
+
+The intensity of ambient light.
+
+##${prefix|default("#")} ambientCubemap(Object)
+
+The ambientCubemap uses texture as the source of ambient light, which provides diffuse and specular for objects. The diffuse and specular can be set separately by [diffuseIntensity](~${componentType}.light.ambientCubemap.diffuseIntensity) and [specularIntensity](~${componentType}.light.ambientCubemap.specularIntensity).
+
+
+###${prefix|default("#")} texture(string)
+
+The URL of the ambient cubemap supports HDR images in the `.hdr` format. You can obtained the resources for `.hdr` from http://www.hdrlabs.com/sibl/archive.html and other websites.
+
+Example：
+
+```js
+ambientCubemap: {
+ texture: 'pisa.hdr',
+ // The exposure value used when analytic hdr
+ exposure: 1.0
+}
+```
+
+###${prefix|default("#")} diffuseIntensity(number) = ${defaultAmbientCubemapLightDiffuseIntensity|default(0.5)}
+
+The intensity of diffuse.
+
+###${prefix|default("#")} specularIntensity(number) = ${defaultAmbientCubemapLightSpecularIntensity|default(0.5)}
+
+The intensity of specular.
+
diff --git a/en/option-gl/partial/line-style.md b/en/option-gl/partial/line-style.md
new file mode 100644
index 0000000..6e438d8
--- /dev/null
+++ b/en/option-gl/partial/line-style.md
@@ -0,0 +1,23 @@
+{{ target: partial-line-style }}
+
+#${prefix|default('##')} ${colorName|default('color')}(string{{if: ${hasCallback} }}|Function{{/if}})=${defaultColor|default('adaptive')}
+
+The color of the line. {{ if: ${useColorPalatte} }} Color is taken from [option.color Palette](~color) by default. {{/if}}
+
+In addition to color strings, RGBA values represented by arrays are supported, for example:
+
+
+```js
+// pure white
+[1, 1, 1, 1]
+```
+
+When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.
+
+#${prefix|default('##')} opacity(number) = ${defaultOpacity|default(1)}
+
+The opacity of the line.
+
+#${prefix|default('##')} width(number) = ${defaultWidth|default(1)}
+
+The width of the line.
diff --git a/en/option-gl/partial/post-effect.md b/en/option-gl/partial/post-effect.md
new file mode 100644
index 0000000..96e2d52
--- /dev/null
+++ b/en/option-gl/partial/post-effect.md
@@ -0,0 +1,187 @@
+{{ target: partial-post-effect }}
+
+#${prefix|default('#')} postEffect(Object)
+
+Post-processing effects related configuration. It can add effects such as highlights, depth of field, screen space ambient occlusion (SSAO), toning to the picture. And it can make the whole picture more textured.
+
+The following are the differences between closing `postEffect` and opening `postEffect`.
+
+<div class="twentytwenty-container" style="width: 700px;">
+ <img src="documents/asset/gl/img/globe-posteffect-disable.png" width="100%" title="Disable">
+ <img src="documents/asset/gl/img/globe-posteffect-enable.png" width="100%" title="Enable">
+</div>
+
+Note that when postEffect is enable, [temporalSuperSampling](~${componentType}.temporalSuperSampling) is enable by default. After the picture is still, the picture will continue to be enhanced, including anti-aliasing, depth of field, SSAO, shadows, etc.
+
+##${prefix|default('#')} enable(boolean) = false
+
+Whether to enable post-processing effects. Not enabled by default.
+
+##${prefix|default('#')} bloom(Object)
+
+Bloom is used to reproducing the effects that occur in real cameras when taking pictures in a bright environment.
+Because traditional RGB can only represent colors in the range of '0 - 255', so we need to use the bloom effect simulates fringes of light extending from the borders of bright areas, creating the illusion of a bright light overwhelming the camera. As shown below：
+
+
+
+###${prefix|default('#')} enable(boolean) = false
+
+Whether to enable the bloom effect.
+
+###${prefix|default('#')} bloomIntensity(number) = 0.1
+
+The intensity of the bloom. The default is 0.1.
+
+##${prefix|default('#')} depthOfField(Object)
+
+Depth of Field is a post-processing effect that simulates the focus properties of a camera. The area of focus is clear, and the area away from the focus is gradually blurred.
+
+The depth of field effect allows the observer to focus on the area of focus and make the picture feel stronger. Large depth of field can also create a macro model effect.
+
+The following are the differences between turning off and turning on the depth of field effect.
+
+<div class="twentytwenty-container" style="width: 700px;">
+ <img src="documents/asset/gl/img/geo-no-dof.png" width="100%" title="Disable">
+ <img src="documents/asset/gl/img/geo-dof.png" width="100%" title="Enable">
+</div>
+
+###${prefix|default('#')} enable(boolean) = false
+
+Whether to enable the depth of field.
+
+###${prefix|default('#')} focalDistance(boolean) = 50
+
+The initial focus distance. The user can click on the area to automatically focus.
+
+###${prefix|default('#')} focalRange(boolean) = 20
+
+The size of the in-focus area. The objects in this range are completely clear and there is no blurring.
+
+
+###${prefix|default('#')} fstop(number) = 2.8
+
+[F value] of the lens (https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94), the smaller the value, the shallower the depth of field.
+
+###${prefix|default('#')} blurRadius(number) = 10
+
+Blur radius outside the focus.
+
+The difference blur effect between the different radius.
+
+<div class="twentytwenty-container" style="width: 700px;">
+ <img src="documents/asset/gl/img/geo-dof-small.png" width="100%" title="blurSize: 3">
+ <img src="documents/asset/gl/img/geo-dof-large.png" width="100%" title="blurSize: 10">
+</div>
+
+##${prefix|default('#')} screenSpaceAmbientOcclusion(Object)
+
+
+The ambient occlusion post-processing effect darkens the corners, holes, crevices, and areas where most light can`t reach. It is a supplement to the traditional shadow map, which makes the whole scene more natural and layered.
+
+Below is a comparison of the effects of no SSAO and SSAO:
+
+<div class="twentytwenty-container" style="width: 700px;">
+ <img src="documents/asset/gl/img/geo-no-ssao.png" width="100%" title="No SSAO">
+ <img src="documents/asset/gl/img/geo-ssao.png" width="100%" title="SSAO">
+</div>
+
+##${prefix|default('#')} SSAO(Object)
+
+Same as [screenSpaceAmbientOcclusion](~${componentType}.postEffect.screenSpaceAmbientOcclusion)
+
+
+###${prefix|default('#')} enable(boolean) = false
+
+Whether to enable SSAO (screen space ambient occlusion). Not enabled by default.
+
+###${prefix|default('#')} quality(string) = 'medium'
+
+The quality of SSAO (screen space ambient occlusion). Supporting`'low'`, `'medium'`, `'high'`, `'ultra'`
+
+###${prefix|default('#')} radius(number) = 2
+
+The radius of the SSAO (screen space ambient occlusion). The larger the radius, the more natural the effect, but you need to set a higher `'quality'`.
+
+The following example is the difference between a smaller and larger radius:
+
+<div class="twentytwenty-container" style="width: 700px;">
+ <img src="documents/asset/gl/img/geo-ssao-small-radius.png" width="100%" title="Radius: 1">
+ <img src="documents/asset/gl/img/geo-ssao-large-radius.png" width="100%" title="Radius: 10">
+</div>
+
+###${prefix|default('#')} intensity(number) = 1
+
+The intensity of SSAO (screen space ambient occlusion). The larger the value, the darker the color.
+
+
+##${prefix|default('#')} colorCorrection(Object)
+
+Color correction and adjustment. Similar to Color Adjustments in Photoshop.
+
+The same scene in the figure below is adjusted to the difference between the cool color system and the warm color system.
+
+<div class="twentytwenty-container" style="width: 700px;">
+ <img src="documents/asset/gl/img/buildings-cold.jpg" width="100%" title="Cold">
+ <img src="documents/asset/gl/img/buildings-warm.jpg" width="100%" title="Warm">
+</div>
+
+
+###${prefix|default('#')} enable(boolean) = true
+
+Whether to enable the color correction.
+
+###${prefix|default('#')} lookupTexture(string|HTMLImageElement|HTMLCanvasElement)
+
+Color correction lookup texture, recommended.
+
+The color correction lookup texture is a texture image like the one below.
+
+
+
+This is the basic lookup texture image that you can use directly.
+To adjust the color of the scene to the effect you want, you can take a screenshot of the scene and adjust the color to the desired effect in image processing software such as Photoshop. Then apply the same adjustment to the image of the lookup texture above.
+
+For example, after turning into a cool tone, the image of the lookup texture will look like this:
+
+
+
+Then the texture image is used as the value of the configuration item, and you can get the same effect in Photoshop.
+
+Of course, if you just want to get a screenshot, you don't have to do it anymore, but if you want to easily adjust to the ideal color in real-time interactive works, this is very useful.
+
+###${prefix|default('#')} exposure(number) = 0
+
+The exposure of the image.
+
+###${prefix|default('#')} brightness(number) = 0
+
+The brightness of the image.
+
+###${prefix|default('#')} contrast(number) = 1
+
+The contrast of the image.
+
+###${prefix|default('#')} saturation(number) = 1
+
+The saturation of the image.
+
+
+
+##${prefix|default('#')} FXAA(Object)
+
+After opening [postEffect](~${componentType}.postEffect), WebGL's default MSAA (Multi Sampling Anti Aliasing) will not work. At this time, FXAA (Fast Approximate Anti-Aliasing) can solve the anti-aliasing problem quickly and easily. FXAA blurs the edge of the scene to solve the problem of aliasing. It works well on some scenes, but in echarts-gl, you need to ensure that the edges of many texts and lines are sharp and clear, so FXAA is not suitable. At this point we can use supersampling [...]
+
+```js
+var chart = echarts.init(dom, null, {
+ devicePixelRatio: 2
+})
+```
+
+However, setting a higher `devicePixelRatio` has high requirements for computer performance, so more often we recommend using [temporalSuperSampling](~${componentType}.temporalSuperSampling) in echarts-gl. After the picture is still, it will continue to sample multiple times and taken at several instances inside the pixel and an average color value is calculated.,thus achieving anti-aliasing effect.
+
+###${prefix|default('#')} enable(boolean) = false
+
+Whether to enable FXAA. Not enabled by default.
+
+
+
diff --git a/en/option-gl/partial/series-name.md b/en/option-gl/partial/series-name.md
new file mode 100644
index 0000000..33b0400
--- /dev/null
+++ b/en/option-gl/partial/series-name.md
@@ -0,0 +1,3 @@
+{{ target: partial-series-name }}
+## name(string)
+Series name used for displaying in [tooltip](https://echarts.apache.org/zh/option.html#tooltip) and filtering with [legend](https://echarts.apache.org/zh/option.html#legend), or updating data and configuration with `setOption`.
diff --git a/en/option-gl/partial/shading.md b/en/option-gl/partial/shading.md
new file mode 100644
index 0000000..7f820f3
--- /dev/null
+++ b/en/option-gl/partial/shading.md
@@ -0,0 +1,98 @@
+{{ target: partial-material-texture }}
+
+#${prefix|default("##")} detailTexture(string|HTMLImageElement|HTMLCanvasElement)
+
+The texture map of the material detail.
+
+#${prefix|default("##")} textureTiling(number) = 1
+
+Tiles the texture map of the material detail. The default is `1`, which means that the stretch is filled. When greater than `1`, the number indicates how many times the texture is tiled.
+
+**Note:** The use of tiling requires the `detail texture` height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.
+
+#${prefix|default("##")} textureOffset(number) = 0
+
+The displacement of the texture detail texture.
+
+{{ target: partial-shading }}
+
+#${prefix|default("#")} shading(string)
+
+The coloring effect of 3D graphics in ${componentName}. The following three coloring methods are supported in echarts-gl:
+
++ `'color'`
+Only display colors, not affected by other factors such as lighting.
+
++ `'lambert'`
+Through the classic [lambert] coloring, can express the light and dark that the light shows.
+
++ `'realistic'`
+Realistic rendering, combined with [light.ambientCubemap](~globe.light.ambientCubemap) and [postEffect](~globe.postEffect), can improve the quality and texture of the display. [Physical Based Rendering (PBR)] (https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/) is used in ECharts GL to represent realistic materials.
+
+{{ block: shading-compare }}
+{{ /block }}
+
+#${prefix|default("#")} realisticMaterial(Object)
+
+The configuration item of the realistic material is valid when [shading](~${componentType}.shading) is `'realistic'`.
+
+{{ use: partial-material-texture(prefix=${prefix|default("#")} + '#') }}
+
+##${prefix|default("#")} roughness(number|string|HTMLImageElement|HTMLCanvasElement) = 0.5
+
+The `roughness` attribute is used to indicate the roughness of the material, `0` is completely smooth, `1` is completely rough, and the middle value is between the two.
+
+{{ block: roughness-compare }}
+The following images show the effect of `roughness` in `globe](~globe) `0.2` (smooth) and `0.8` (rough).
+
+
+
+{{ /block }}
+
+When you want to express more complex materials. You can set `roughness` directly to the texture that stores the roughness with each pixel as follows.
+
+
+
+The more white the color in the texture, the larger the value and the rougher it is. You can get texture resources of different materials from resource websites such as [http://freepbr.com/] (http://freepbr.com/). You can also generate it yourself using other tools.
+
+##${prefix|default("#")} metalness(number|string|HTMLImageElement|HTMLCanvasElement) = 0
+
+The `metalness` attribute is used to indicate whether the material is metal or non-metal, `0` is non-metallic, `1` is metal, and the middle value is between the two. Usually set to `0` and `1` to meet most of the scenes.
+
+{{ block: metalness-compare }}
+The picture below show the difference between `metal' and '0' in [globe](~globe).
+
+
+
+{{ /block }}
+
+As with [roughness](~${componentType}.realisticMaterial.roughness) you can set `metalness` directly to the metal texture.
+
+##${prefix|default("#")} roughnessAdjust(number) = 0.5
+
+Roughness adjustment is useful when using roughness map. The overall roughness of the texture can be adjusted. The default is `0.5`, `0` is completely smooth, `1` is completely rough.
+
+##${prefix|default("#")} metalnessAdjust(number) = 0.5
+
+Metalness adjustment is useful when using metalness maps. The overall metallicity of the texture can be adjusted. The default is `0.5`, `0` is non-metal, `1` is metal.
+
+##${prefix|default("#")} normalTexture(string|HTMLImageElement|HTMLCanvasElement)
+
+Normal map of material details.
+
+Using normal maps, you can still display rich shades of detail on the surface of the object with fewer vertices.
+
+
+#${prefix|default("#")} lambertMaterial(Object)
+
+The configuration item of the lambert material is valid when [shading](~${componentType}.shading) is `'lambert'`.
+
+
+{{ use: partial-material-texture(prefix=${prefix|default("#")} + '#') }}
+
+#${prefix|default("#")} colorMaterial(Object)
+
+The color material related configuration item is valid when [shading](~${componentType}.shading) is `'color'`.
+
+{{ use: partial-material-texture(prefix=${prefix|default("#")} + '#') }}
+
diff --git a/en/option-gl/partial/symbol.md b/en/option-gl/partial/symbol.md
new file mode 100644
index 0000000..4ad130f
--- /dev/null
+++ b/en/option-gl/partial/symbol.md
@@ -0,0 +1,17 @@
+{{ target: partial-symbol }}
+
+#${prefix|default('#')} symbol(string) = 'circle'
+The shape of the scatter. The default is a circle.
+
+{{ use: partial-icon }}
+
+#${prefix|default('#')} symbolSize(number|Array|Function) = ${defaultSymbolSize|default(10)}
+
+${name} symbol size. It can be set to single numbers like `10`, or use an array to represent width and height. For example, `[20, 10]` means symbol width is `20`, and height is`10`.
+
+If size of symbols needs to be different, you can set with callback function in the following format:
+
+```js
+(value: Array|number, params: Object) => number|Array
+```
+The first parameter `value` is the value in [data](~series-${seriesType}.data), and the second parameter `params` is the rest parameters of data item.
diff --git a/en/option-gl/partial/temporal-super-sampling.md b/en/option-gl/partial/temporal-super-sampling.md
new file mode 100644
index 0000000..4411f05
--- /dev/null
+++ b/en/option-gl/partial/temporal-super-sampling.md
@@ -0,0 +1,19 @@
+{{ target: partial-temporal-super-sampling }}
+
+#${prefix|default('#')} temporalSuperSampling(Object)
+
+Temporal supersampling. After opening [postEffect](~${componentType}.postEffect), WebGL's default MSAA (MultiSampling Anti-Aliasing) will not work, so we need to solve the problem of sampling.
+
+Temporal supersampling is an anti-aliasing method. After the picture is still, it will continue to sample multiple times and taken at several instances inside the pixel and an average color value is calculated, thus achieving anti-aliasing effect.
+And in this process, ECharts-gl also progressively enhances some of the effects in [postEffect](~${componentType}.postEffect) that require sampled guarantees. For example [SSAO](~${componentType}.postEffect.SSAO), [Depth of Field](~${componentType}.postEffect.depthOfField), and shadow.
+
+The following is the difference between not opening `temporalSuperSampling` and opening `temporalSuperSampling`.
+
+<div class="twentytwenty-container" style="width: 800px;">
+ <img src="documents/asset/gl/img/surface-no-taa.png" width="100%" title="No AA">
+ <img src="documents/asset/gl/img/surface-taa.png" width="100%" title="AA">
+</div>
+
+##${prefix|default('#')} enable(boolean) = 'auto'
+
+Whether to enable temporal supersampling. By default, temporal supersampling is also turned on synchronously when [postEffect] (~${componentType}.postEffect) is turned on.
diff --git a/en/option-gl/partial/view-control.md b/en/option-gl/partial/view-control.md
new file mode 100644
index 0000000..1f2a45b
--- /dev/null
+++ b/en/option-gl/partial/view-control.md
@@ -0,0 +1,155 @@
+{{ target: partial-view-control }}
+
+#${prefix|default('#')} viewControl(Object)
+
+`viewControl` is used for mouse rotation, zooming, and other perspective control.
+
+
+##${prefix|default('#')} projection(string) = ${defaultProjection|default('perspective')}
+
+The way of projection, the default is `'perspective'` projection, also supports setting to `'orthogonal'` projection.
+
+
+##${prefix|default('#')} autoRotate(boolean) = ${defaultAutoRotate|default(false)}
+
+Whether to enable the angle of view to automatically rotate around the object.
+
+##${prefix|default('#')} autoRotateDirection(string) = ${defaultAutoRotateDirection|default('cw')}
+
+The direction in which the object auto rotates. The default is `'cw'` means clockwise from top to bottom, and can also use `'ccw'` means counterclockwise from top to bottom.
+
+##${prefix|default('#')} autoRotateSpeed(number) = ${defaultAutoRotateSpeed|default(10)}
+
+The speed at which the object auto rotates. The unit is `angle/second`, the default is `10`, which is a turn of `36` seconds.
+
+
+##${prefix|default('#')} autoRotateAfterStill(number) = ${defaultAutoRotateAfterStill|default(3)}
+
+The time interval for automatic rotation to resume after the mouse is still. Valid after opening [autoRotate](~${componentType}.viewControl.autoRotate).
+
+
+##${prefix|default('#')} damping(number) = ${defaultDamping|default(0.8)}
+
+The damping when the mouse is rotated, zoomed, etc.
+When it is greater than 0, the angle of view will continue to move (rotate and zoom) due to certain inertia after the mouse is still.
+
+
+
+##${prefix|default('#')} rotateSensitivity(number|Array) = ${defaultRotateSensitivity|default(1)}.
+
+The sensitivity of the rotation operation. The greater the value, the more sensitive. Supports the use of arrays to set the horizontal and vertical rotation sensitivity separately.
+
+
+The default is `${defaultRotateSensitivity | default(1)}`.
+
+Cannot be rotated after setting to `0`.
+
+```js
+// can't rotate
+rotateSensitivity: 0
+// can only be rotated horizontally
+rotateSensitivity: [1, 0]
+// can only rotate vertically
+rotateSensitivity: [0, 1]
+```
+
+##${prefix|default('#')} zoomSensitivity(number) = ${defaultZoomSensitivity|default(1)}
+
+The sensitivity of the zoom operation, the larger the value, the more sensitive. The default is `${defaultRotateSensitivity | default(1)}`.
+
+Can`t be scaled after setting to `0`.
+
+##${prefix|default('#')} panSensitivity(number) = ${defaultPanSensitivity|default(1)}
+
+The sensitivity of the panning operation, the greater the value, the more sensitive. Supports the use of arrays to set the horizontal and vertical translation sensitivity.
+
+The default is `${defaultRotateSensitivity | default(1)}`.
+
+Cannot pan after setting to `0`.
+
+##${prefix|default('#')} panMouseButton(string) = ${defaultPanMouseButton|default('left')}
+
+The mouse button used for panning operation supports:
+
++ `'left'` left mouse button (default)
+
++ `'middle'` middle mouse button
+
++ `'right'` right mouse button
+
+Note: If set to the right mouse button, the default context menu will be blocked.
+
+##${prefix|default('#')} rotateMouseButton(string) = ${defaultRotateMouseButton|default('middle')}
+
+The mouse button used for the rotation operation supports:
+
++ `'left'` left mouse button
+
++ `'middle'` middle mouse button (default)
+
++ `'right'` right mouse button
+
+Note: If set to the right mouse button, the default context menu will be blocked.
+
+##${prefix|default('#')} distance(number) = ${defaultDistance|default(150)}
+
+The distance of the default perspective from the subject. For [globe](~globe), the distance from the Earth's surface is the distance from the center origin for other components such as [grid3D](~grid3D) and [geo3D](~geo3D). Valid when [projection](~${componentType}.viewControl.projection) is `'perspective'`.
+
+##${prefix|default('#')} minDistance(number) = ${defaultMinDistance|default(40)}
+
+The angle of view is controlled by the mouse to bring the minimum distance to the subject. Valid when [projection](~${componentType}.viewControl.projection) is `'perspective'`.
+
+##${prefix|default('#')} maxDistance(number) = ${defaultMaxDistance|default(400)}
+
+The angle of view can be extended to the maximum distance of the subject by mouse control. Valid when [projection](~${componentType}.viewControl.projection) is `'perspective'`.
+
+##${prefix|default('#')} orthographicSize(number) = ${defaultDistance|default(150)}
+
+The size of the orthogonal projection. Valid when [projection](~${componentType}.viewControl.projection) is `'orthographic'`.
+
+
+##${prefix|default('#')} maxOrthographicSize(number) = ${defaultMinDistance|default(20)}
+
+The maximum value of the orthogonal projection scaling. Valid when [projection](~${componentType}.viewControl.projection) is `'orthographic'`.
+
+##${prefix|default('#')} minOrthographicSize(number) = ${defaultMaxDistance|default(400)}
+
+The minimum value of the orthogonal projection scaling. Valid when [projection](~${componentType}.viewControl.projection) is `'orthographic'`
+
+##${prefix|default('#')} alpha(number) = ${defaultAlpha|default(0)}
+
+The angle of view is around the x-axis, which is the angle of rotation up and down. With [beta](~${componentType}.light.main.beta) you can control the direction of the perspective.
+
+As shown below：
+
+
+
+##${prefix|default('#')} beta(number) = ${defaultBeta|default(0)}
+
+The angle of view is around the y-axis, which is the angle of rotation from left to right.
+
+##${prefix|default('#')} center(Array) = ${defaultCenter}
+
+At the center of the angle of view, the rotation will also rotate around this center point. The default is `[0,0,0]`.
+
+##${prefix|default('#')} minAlpha(number) = ${defaultMinAlpha|default(-90)}
+
+The minimum alpha value to rotate up and down. That is, the angle of view can be rotated to reach the uppermost angle.
+
+##${prefix|default('#')} maxAlpha(number) = ${defaultMaxAlpha|default(90)}
+
+The maximum alpha value to rotate up and down. That is, the angle of view can be rotated to the lowest angle.
+
+##${prefix|default('#')} minBeta(number) = ${defaultMinBeta|default(-Infinity)}
+
+The minimum beta value to rotate left and right. That is, the angle of view can be rotated to the leftmost angle.
+
+##${prefix|default('#')} maxBeta(number) = ${defaultMaxBeta|default(Infinity)}
+
+The maximum beta value to rotate left and right rotation. That is, the angle of view can be rotated to the rightmost angle.
+
+{{ use: partial-animation(
+ prefix="##",
+ defaultAnimationEasingUpdate="cubicInOut",
+ defaultAnimationDurationUpdate=1000
+) }}
diff --git a/en/option/partial/rect-layout.md b/en/option-gl/partial/viewport.md
similarity index 57%
copy from en/option/partial/rect-layout.md
copy to en/option-gl/partial/viewport.md
index 9f961d3..1490ad1 100644
--- a/en/option/partial/rect-layout.md
+++ b/en/option-gl/partial/viewport.md
@@ -1,41 +1,43 @@
-{{target: partial-rect-layout}}
-
-{{if: !${noZ} }}
-{{ use: partial-z-zlevel(
- prefix=${prefix},
- defaultZLevel=${defaultZLevel},
- defaultZ=${defaultZ}
-) }}
-{{/if}}
-
-#${prefix|default("#")} left(string|number) = ${defaultLeft|default("'auto'")}
-
-Distance between ${componentName} component and the left side of the container.
-
-`left` value can be instant pixel value like `20`; it can also be percentage value relative to container width like `'20%'`; and it can also be `'left'`, `'center'`, or `'right'`.
-
-If the `left` value is set to be `'left'`, `'center'`, or `'right'`, then the component will be aligned automatically based on position.
-
-#${prefix|default("#")} top(string|number) = ${defaultTop|default("'auto'")}
-
-Distance between ${componentName} component and the top side of the container.
-
-`top` value can be instant pixel value like `20`; it can also be percentage value relative to container width like `'20%'`; and it can also be `'top'`, `'middle'`, or `'bottom'`.
-
-If the `left` value is set to be `'top'`, `'middle'`, or `'bottom'`, then the component will be aligned automatically based on position.
-
-#${prefix|default("#")} right(string|number) = ${defaultRight|default("'auto'")}
-
-Distance between ${componentName} component and the right side of the container.
-
-`right` value can be instant pixel value like `20`; it can also be percentage value relative to container width like `'20%'`.
-
-{{ if: !${defaultRight} }}Adaptive by default.{{ /if }}
-
-#${prefix|default("#")} bottom(string|number) = ${defaultBottom|default("'auto'")}
-
-Distance between ${componentName} component and the bottom side of the container.
-
-`bottom` value can be instant pixel value like `20`; it can also be percentage value relative to container width like `'20%'`.
-
-{{ if: !${defaultBottom} }}Adaptive by default.{{ /if }}
+{{ target: partial-viewport }}
+
+#${prefix|default("#")} left(string|number) = ${defaultLeft|default('auto')}
+
+Distance between ${componentName} component and the left side of the container.
+
+`left` value can be instant pixel value like `20`; it can also be a percentage value relative to container width like `'20%'`; and it can also be `'left'`, `'center'`, or `'right'`.
+
+If the `left` value is set to be `'left'`, `'center'`, or `'right'`, then the component will be aligned automatically based on position.
+
+#${prefix|default("#")} top(string|number) = ${defaultTop|default('auto')}
+
+Distance between ${componentName} component and the top side of the container.
+
+`top` value can be instant pixel value like `20`; it can also be a percentage value relative to container width like `'20%'`; and it can also be `'top'`, `'middle'`, or `'bottom'`.
+
+If the `left` value is set to be `'top'`, `'middle'`, or `'bottom'`, then the component will be aligned automatically based on position.
+
+#${prefix|default("#")} right(string|number) = ${defaultRight|default('auto')}
+
+Distance between ${componentName} component and the right side of the container.
+
+`right` value can be instant pixel value like `20`; it can also be a percentage value relative to container width like `'20%'`.
+
+{{ if: !${defaultRight} }} Adaptive by default.{{ /if }}
+
+#${prefix|default("#")} bottom(string|number) = ${defaultBottom|default('auto')}
+
+Distance between ${componentName} component and the bottom side of the container.
+
+`bottom` value can be instant pixel value like `20`; it can also be a percentage value relative to container width like `'20%'`.
+
+{{ if: !${defaultBottom} }} Adaptive by default.{{ /if }}
+
+
+#${prefix|default("#")} width(string|number) = ${defaultWidth|default('auto')}
+
+${componentName} The width of the view of the component.
+
+#${prefix|default("#")} height(string|number) = ${defaultHeight|default('auto')}
+
+${componentName} The height of the view of the component.
+
diff --git a/en/option-gl/partial/zlevel.md b/en/option-gl/partial/zlevel.md
new file mode 100644
index 0000000..571ae29
--- /dev/null
+++ b/en/option-gl/partial/zlevel.md
@@ -0,0 +1,12 @@
+{{target: partial-zlevel}}
+
+#${prefix|default("#")} zlevel(number) = ${defaultZLevel|default(-10)}
+
+The layer in which the component is located.
+
+`zlevel` is used to make layers with Canvas. Graphical elements with different `zlevel` values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate `zlevel`. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid the crash.
+
+Canvases with bigger `zlevel` will be placed on Canvases with smaller `zlevel`.
+
+**Note:** The layers of the components in echarts-gl need to be separated from the layers of the components in echarts. The same `zlevel` cannot be used for both WebGL and Canvas drawing at the same time.
+
diff --git a/cn/option-gl/series/bar3D.md b/en/option-gl/series/bar3D.md
similarity index 52%
copy from cn/option-gl/series/bar3D.md
copy to en/option-gl/series/bar3D.md
index 8f2a425..476e130 100644
--- a/cn/option-gl/series/bar3D.md
+++ b/en/option-gl/series/bar3D.md
@@ -2,9 +2,9 @@
# series.bar3D(Object)
-三维柱状图。可以用于[三维直角坐标系 grid3D](~grid3D)，[三维地理坐标系 geo3D](~geo3D)，[地球 globe](~globe)，通过高度，颜色等属性展示数据。
+3D bar. It can be used to display data in [grid3D](~grid3D), [ geo3D](~geo3D), [globe](~globe) using attributes such as size 、color and so on.
-下图就是在 [geo3D](~geo3D) 上通过三维柱状图展示世界的人口密度数据。
+The figure below shows the population density data of the world through a 3D bar chart on [geo3D] (~geo3D).
@@ -21,9 +21,11 @@
## bevelSize(number) = 0
-柱子的倒角尺寸。支持设置为从 0 到 1 的值。默认为 0，即没有倒角。
-下面是无倒角和有倒角的区别。
+The size of the bevel.
+Support for setting values from 0 to 1. The default is 0, which means there is no bevel.
+
+Below are the differences between beveling and no beveling.
<div class="twentytwenty-container" style="width: 700px;">
<img src="documents/asset/gl/img/bar3D-no-bevel.png" width="100%" title="bevelSize: 0">
@@ -32,19 +34,20 @@
## bevelSmoothness(number) = 2
-柱子倒角的光滑/圆润度，数值越大越光滑/圆润。
+The smoothness of the bevel, the larger the value, the smoother.
## stack(string)
-柱状图堆叠，相同 `stack` 值的柱状图系列数据会有叠加。注意不同系列需要叠加的数据项在数组中的索引必须是一样的。
+Stacking of bar chart. On the same category axis, the series with the same `stack` name would be put on top of each other. Note that the data items that need to be stack in different series must have the same index in the array.
+
## minHeight(number) = 0
-最小柱子高度。
+The minimum width of the bar.
## itemStyle(Object)
-柱子的样式，包括颜色和不透明度。
+The style of the bar, including color and opacity.
{{ use: partial-item-style(
useColorPalette=true,
@@ -52,7 +55,7 @@
) }}
## label(Object)
-柱子的标签配置。
+Configure the label of the bar.
{{ use: partial-label(
defaultDistance=2,
defaultTextFontSize=20,
@@ -61,7 +64,7 @@
) }}
## emphasis(Object)
-柱子高亮状态的标签和样式配置。
+Configure labels and styles for bar highlighting.
### itemStyle(Object)
{{ use: partial-item-style(
@@ -80,39 +83,38 @@
## data(Array)
-三维柱状图数据数组。数组每一项为一个数据。通常这个数据是用数组存储数据的每个属性/维度。例如下面：
+A data array of 3D bar. Each item of the array is a piece of data. Usually this data is an array to store each attribute/dimension of the data. For example below:
```js
data: [
[[12, 14, 10], [34, 50, 15], [56, 30, 20], [10, 15, 12], [23, 10, 14]]
]
```
+For each item in the array:
-对于数组中的每一项：
-
-1. 在 [grid3D](~grid3D) 中，每一项的前三个值分别是`x`, `y`, `z`。
-2. 在 [geo3D](~geo3D) 以及 [globe](globe) 中，每一项的前两个值分别是经纬度 `lng`, `lat`，第三个值表示数值大小，例如人口的大小。这个值会被映射到 [minHeight](~series-bar3D.minHeight) ~ [maxHeight](~series-bar3D.maxHeight) 的范围。
+1. In [grid3D] (~grid3D), the first three values of each item are `x`, `y`, `z`.
+2. In [geo3D](~geo3D) and [globe](~globe), the first two values of each item are longitude `lng`, latitude `lat`, and the third value indicates the size of the value, such as the number of people. This value will be mapped to the range of [minHeight](~series-bar3D.minHeight) ~ [maxHeight](~series-bar3D.maxHeight).
-除了默认给坐标系使用的三个值，每一项还可以加入任意多个值，用于给 [visualMap](~visualMap) 组件映射到颜色等其它图形属性。
+In addition to the three values used by default for the coordinate system, each item can be added with any number of values for mapping the [visualMap](~visualMap) component to other graphical properties such as color.
{{ use: common-data-option-desc() }}
### name(string)
-数据项名称。
+The name of data item.
### value(Array)
-数据项值。
+Data value.
### itemStyle(Object)
-单个数据项的样式设置。
+The style setting of a single data item.
{{ use: partial-item-style(
prefix="###"
) }}
### label(Object)
-单个数据项的标签设置。
+The label setting of a single data item.
{{ use: partial-label(
prefix="###",
defaultDistance=2,
@@ -122,7 +124,7 @@ data: [
) }}
### emphasis(Object)
-单个数据项高亮状态的标签和样式配置。
+Configure labels and styles for a sigle data item highlighting.
#### itemStyle(Object)
{{ use: partial-item-style(
@@ -142,7 +144,7 @@ data: [
{{ use: partial-shading(
componentType='series-bar3D',
- componentName='三维柱状图'
+ componentName='3D Bar'
) }}
diff --git a/en/option-gl/series/common-coordinate-system.md b/en/option-gl/series/common-coordinate-system.md
new file mode 100644
index 0000000..24a9486
--- /dev/null
+++ b/en/option-gl/series/common-coordinate-system.md
@@ -0,0 +1,61 @@
+{{ target: series-common-coordinate-system }}
+
+## coordinateSystem(string) = ${defaultCoordinateSystem}
+
+The coordinate used in the series, whose options are:
+
+{{if: ${none} }}
++ `null`
+
+ No coordinate.
+{{/if}}
+
+{{if: ${cartesian3D} }}
+
++ `'cartesian3D'`
+
+ Use a 3D rectangular coordinate (also known as Cartesian coordinate), with [xAxisIndex](~series-${seriesType}.xAxisIndex) and [yAxisIndex](~series-${seriesType}.yAxisIndex) to assign the corresponding axis component.
+{{/if}}
+
+{{if: ${geo3D} }}
+
++ `'geo3D'`
+ Use 3D geographic coordinate, with [geoIndex](~series-${seriesType}.geoIndex) to assign the corresponding 3D geographic coordinate components.
+
+{{/if}}
+
+{{if: ${globe} }}
+
++ `'globe'`
+
+ Use 3D globe coordinate, with [globeIndex](~series-${seriesType}.globeIndex) to assign the corresponding 3D globe coordinate components.
+
+{{/if}}
+
+
+{{if: ${cartesian3D} }}
+## grid3DIndex(number) = 0
+
+Use the index of the [grid3D](~grid3D) component. The first [grid3D](~grid3D) component is used by default.
+
+{{/if}}
+
+
+
+{{if: ${geo3D} }}
+## geo3DIndex(number) = 0
+
+The index of the [geo3D](~geo3D) component used by the axis.The first [grid3D](~grid3D) component is used by default.
+
+
+{{/if}}
+
+
+
+{{if: ${globe} }}
+## globeIndex(number) = 0
+
+The index of the [globe](~globe) component used by the axis.The first [globe](~globe) component is used by default.
+
+
+{{/if}}
diff --git a/en/option-gl/series/common-data.md b/en/option-gl/series/common-data.md
new file mode 100644
index 0000000..af8f251
--- /dev/null
+++ b/en/option-gl/series/common-data.md
@@ -0,0 +1,29 @@
+{{ target: common-data-option-desc }}
+
+More likely, we need to assign name to each data item, in which case each item should be an object:
+
+```js
+[{
+ // name of date item
+ name: 'data1',
+ // value of date item is 8
+ value: [12, 14, 10]
+}, {
+ name: 'data2',
+ value: 20
+}]
+```
+Each data item can be further customized:
+
+```js
+[{
+ name: 'data1',
+ value: [12, 14, 10]
+}, {
+ // name of data item
+ name: 'data2',
+ value : [34, 50, 15],
+ // user-defined special itemStyle that only useful for this data item
+ itemStyle:{}
+}]
+```
\ No newline at end of file
diff --git a/en/option-gl/series/flowGL.md b/en/option-gl/series/flowGL.md
new file mode 100644
index 0000000..5a44b1d
--- /dev/null
+++ b/en/option-gl/series/flowGL.md
@@ -0,0 +1,85 @@
+{{ target: series-flowGL }}
+
+# series.flowGL(Object)
+
+The `flowGL` component visualizes the traces of the vector field through the particle effects implemented by WebGL.
+
+The figure below shows the effect of the global wind field visualized by `flowGL`.
+
+
+
+## type(string) = 'flowGL'
+
+## particleDensity(number) = 128
+
+The density of the particles. The actual number of particles is the square of the set number. The higher the particle density, the better the trace effect, but the greater the performance overhead. In addition to this property, you can get a clearer and more consistent trace using [particleType](~series-flowGL.particleType).
+
+## particleType(string) = 'point'
+
+The type of particle. The default is `'point'`, which can be set to `'line'`. Line-type particles connect the position of the last motion to the position of the current motion with a line, which makes the trajectory more consistent.
+
+The following are the differences between the types of ``point'` and `'line'`.
+
+<div class="twentytwenty-container" style="width: 700px;">
+ <img src="documents/asset/gl/img/flowGL-point.jpg" width="100%" title="Point">
+ <img src="documents/asset/gl/img/flowGL-line.jpg" width="100%" title="Line">
+</div>
+
+## particleSize(number) = 1
+
+The size of the particle. If [particleType](~series-flowGL.particleType) is `'line'`, will be expressed as a line width.
+
+## particleSpeed(number) = 1
+
+The speed of the particle, the default is 1. Note that when [particleType](~series-flowGL.particleType) is `'point'`, the excessive speed will make the entire track become intermittent.
+
+## particleTrail(number) = 2
+
+The length of the track of the particle. The larger the value, the longer the track.
+
+## supersampling(number) = 1
+
+The oversampling ratio of the picture, using the '4' supersampling can effectively improve the sharpness of the picture and reduce the picture sawtooth. However, because there is a need to process more pixels, there is a higher performance requirement.
+
+The following are the differences between no oversampling and a supersampling value of 4.
+
+<div class="twentytwenty-container" style="width: 700px;">
+ <img src="documents/asset/gl/img/flowGL-noss.jpg" width="100%" title="No supersampling">
+ <img src="documents/asset/gl/img/flowGL-ss.jpg" width="100%" title="Supersampling=4">
+</div>
+
+## gridWidth(number|string) = 'auto'
+
+The number of grid widths of the incoming grid data. `flowGL` will create a floating-point texture of the stored vector field based on this value and [gridHeight](~series-flowGL.gridHeight) for the particle's trajectory calculation.
+
+## gridHeight(number|string) = 'auto'
+
+The number of grid heights of incoming grid data.
+
+## data(Array)
+
+The data of the vector field, including the position of the vector and the direction of the vector (including the size). `flowGL` has no mandatory requirements for the order in which data is stored. You can even pass in sparse vector data.
+
+Example:
+
+```js
+data: [
+ // Each data item contains four values representing the lng, lat of the position and the speed sLng, sLat on the corresponding dimension.
+ // If it is in a Cartesian coordinate system, it is the position x, y and the speed in the corresponding dimension sx, sy
+ [0, 0, 1, 1], [1, 0, 1, 1],
+ [0, 1, 1, 1], [1, 1, 1, 1]
+];
+```
+The default `flowGL` will automatically calculate [gridWidth](~series-flowGL.gridWidth) and [gridHeight](~series-flowGL.gridHeight) based on the regular grid data. But because flowGL also supports relatively sparse data formats, you can also specify these two values manually.
+
+## itemStyle(Object)
+
+The style of the vector field trace.
+
+### color(string) = '#fff'
+
+The color of the vector field trace. More is to encode the size of the vector through the `visualMap` component as demonstrated in the figure above.
+
+### opacity(number) = 0.8
+
+Transparency of vector field traces.
\ No newline at end of file
diff --git a/en/option-gl/series/graphGL.md b/en/option-gl/series/graphGL.md
new file mode 100644
index 0000000..9b1df85
--- /dev/null
+++ b/en/option-gl/series/graphGL.md
@@ -0,0 +1,174 @@
+{{ target: series-graphGL }}
+
+# series.graphGL(Object)
+
+Uses WebGL to drawn the relational chart, support the layout and rendering of large-scale network/relational data.
+
+## type(string) = 'graphGL'
+
+{{ use: partial-series-name() }}
+
+## layout(string) = 'forceAtlas2'
+
+The continuous graph layout algorithm supports the [forceAtlas2](https://github.com/gephi/gephi/wiki/Force-Atlas-2) algorithm layout using gephi.
+
+## forceAtlas2(Object)
+
+[forceAtlas2](https://github.com/gephi/gephi/wiki/Force-Atlas-2) a continuous graph layout algorithm.
+
+The algorithm has efficient layout efficiency and stable layout results for large-scale network data.
+
+Support for configuring GPU or CPU layout via [forceAtlas2.GPU](~series-graphGL.forceAtlas2.GPU).
+
+The advantage of the CPU is that it is compatible, and the GPU implementation has dozens or even hundreds of performance advantages in high-end graphics cards.
+
+Below is a performance comparison of the iteration of a layout of a 2w node (nearly 5w edges) on a GTX1070 and an i7 4GHz computer.
+
+
+
+### GPU(boolean) = true
+
+Whether to enable GPU layout.
+
+### steps(number) = 1
+
+The number of iterations of an update. Because the force-guided algorithm usually draws the results of each iteration, but because the drawing time tends to be greater than the layout time, the layout efficiency will be reduced. At this time, we can set a larger `steps` parameter to ensure the layout and Draw time equalization and speed up the layout.
+
+### stopThreshold(number) = 1
+
+Stops the threshold of the layout and stops the layout when the global velocity factor of the layout is less than this threshold. Set to 0 to never stop.
+
+### barnesHutOptimize(boolean)
+
+Whether to enable [Barnes Hut] (https://en.wikipedia.org/wiki/Barnes%E2%80%93Hut_simulation) optimization, valid when [forceAtlas2.GPU](~series-graphGL.forceAtlas2.GPU) is false.
+
+The default is on when the number of nodes > 1000.
+
+### repulsionByDegree(number) = true
+
+Whether to calculate the repulsion factor of the node according to the degree of nodes, it is recommended to turn it on.
+
+### linLogMode(boolean) = false
+
+Whether it is the `lin-log` mode. The `lin-log` mode makes the nodes of the cluster more compact.
+
+### gravity(number) = 1.0
+
+The gravity that the node is subjected to. This force will make the nodes close to the center.
+
+### gravityCenter(Array)
+
+The position of the gravity center. By default, is the middle point of the initial position.
+
+### scaling(number)
+
+The scaling factor of the layout. The larger the value, the greater the repulsive force between the nodes.
+
+### edgeWeightInfluence(number) = 1.0
+
+The influence factor of the edge weight. The larger the value, the greater the effect of edge weight on gravity.
+
+Note: This factor is exponential, so it is invalid when the edge weights are `0` and `1`.
+
+### edgeWeight(Array|number) = [1, 4]
+
+The weight distribution of the edges. Mapped from [links.value](~series-graphGL.links.value).
+
+Support is set to a single number, which is the uniform weight value.
+
+### nodeWeight(Array|number) = [1, 4]
+
+The weight distribution of the nodes. Mapped from [nodes.value](~series-graphGL.nodes.value).
+
+Support is set to a single number, which is the uniform weight value.
+
+### preventOverlap(boolean) = false
+
+Whether to prevent the nodes from overlapping.
+
+{{ use: partial-symbol(
+ defaultSymbolSize=5
+) }}
+
+## itemStyle(Object)
+
+The style settings for the node.
+
+{{ use: partial-item-style-scatter3D(
+ prefix="##",
+ defaultOpacity=1,
+ hasCallback = ${hasCallback},
+ useColorPalette = ${useColorPalette}
+)}}
+
+## lineStyle(Object)
+
+The style setting of the relationship line.
+
+{{ use: partial-line-style(
+ prefix="##",
+ defaultColor="#aaa"
+) }}
+
+
+
+## data(Array)
+
+The data set of the node.
+
+The data format is the same as [graph.data](http://echarts.baidu.com/option.html#series-graph.data)
+
+### name(string)
+
+The name of the data item.
+
+### value(number|Array)
+
+Data item value.
+
+### itemStyle(Object)
+
+The style of a single node.
+
+{{ use: partial-item-style-scatter3D(
+ prefix="###",
+ defaultOpacity=1
+) }}
+
+
+## nodes(Array)
+
+Same as [graphGL.data](~series-graphGL.data).
+
+## links(Array)
+
+Relational data between nodes.
+The data format is the same as [graph.links](http://echarts.baidu.com/option.html#series-graph.links)
+
+### source(string)
+
+A string of source node names for edges also supports the use of numbers to represent the index of the source node.
+
+### target(string)
+
+A string of the target node name for the edge, which also supports the use of numbers to represent the index of the source node.
+
+### value(number)
+
+The value of the edge.
+
+### lineStyle(Object)
+
+The style of a single edge.
+
+{{ use: partial-line-style(
+ prefix="###",
+ defaultColor="#aaa"
+) }}
+
+## edges(Array)
+
+Same as [graphGL.links](~series-graphGL.links)
+
+
+{{ use: partial-zlevel(defaultZLevel=10) }}
\ No newline at end of file
diff --git a/en/option-gl/series/line3D.md b/en/option-gl/series/line3D.md
new file mode 100644
index 0000000..68c8d0e
--- /dev/null
+++ b/en/option-gl/series/line3D.md
@@ -0,0 +1,65 @@
+{{ target: series-line3D }}
+
+# series.line3D(Object)
+
+3D Line. Can be used for [grid3D] (~grid3D)
+
+
+
+## type(string) = 'line3D'
+
+{{ use: partial-series-name() }}
+
+{{ use: series-common-coordinate-system(
+ defaultCoordinateSystem='cartesian3D',
+ cartesian3D=true
+) }}
+
+## lineStyle(Object)
+
+The style of the lines.
+
+{{ use: partial-line-style(
+ defaultWidth = 2
+) }}
+
+### lineStyle(Object)
+
+{{ use: partial-line-style(
+ prefix = '###',
+ defaultWidth = 2
+) }}
+
+## data(Array)
+
+A data array. Each item of the array is a piece of data. Usually this data is an array to store each attribute/dimension of the data. For example below:
+
+```js
+data: [
+ [[12, 14, 10], [34, 50, 15], [56, 30, 20], [10, 15, 12], [23, 10, 14]]
+]
+```
+
+The first three values of each item in the array are `x`, `y`, `z`. In addition to these three values, you can add other values to the [visualMap](~visualMap) component to map to other graphical properties such as colors.
+
+{{ use: common-data-option-desc() }}
+
+### name(string)
+The name of data item.
+
+### value(Array)
+Data value.
+
+### itemStyle(Object)
+The style setting of a single data item.
+
+{{ use: partial-line-style(
+ prefix="###"
+) }}
+
+
+{{ use: partial-zlevel }}
+
+{{ use: partial-silent }}
+
+{{ use: partial-animation }}
\ No newline at end of file
diff --git a/en/option-gl/series/lines3D.md b/en/option-gl/series/lines3D.md
new file mode 100644
index 0000000..b503220
--- /dev/null
+++ b/en/option-gl/series/lines3D.md
@@ -0,0 +1,122 @@
+{{ target: series-lines3D }}
+
+# series.lines3D(Object)
+3D lines. Like the 2D [lines] (https://echarts.apache.org/zh/option.html#series-line), it is used to represent the line data from the start point to the end point. More is used in geographic visualization.
+
+Below is an example of a visual airplane flight using [lines3D](~series-lines3D) on [globe](~globe).
+
+
+
+## type(string) = 'lines3D'
+
+{{ use: partial-series-name() }}
+
+{{ use: series-common-coordinate-system(
+ geo3D=true,
+ globe=true
+ ) }}
+
+## polyline(boolean) = false
+If draw as a polyline.
+
+Default to be `false`. Can only draw a two end straight line.
+
+If it is set true, [data.coords](~series-lines.data.coords) can have more than two coords to draw a polyline. It is useful when visualizing GPS track data.
+
+## effect(Object)
+
+The setting about the special effects of lines.
+
+### show(boolean) = false
+Whether to show special effect. It is not displayed by default.
+
+### period(number) = 4
+
+The duration of the special effect, which unit is second.
+
+### constantSpeed(number) = null
+
+Whether the moving animation of the trail of special effect has a constant speed, which unit is dimensioned in 3D space. The [period](~series-lines.effect.period) will be ignored when it is set to a non-null value.
+
+### trailWidth(number) = 4
+
+The width of the trail of special effects.
+
+### trailLength(number) = 0.1
+
+The length of trail of special effect. The values from 0 to 1 could be set. Is the percentage of the length of the line.
+
+
+### trailColor(string)
+
+The color of the trail, which default is the same as the line color.
+
+### trailOpacity(number)
+
+The opacity of the trail, which default is the same as line opacity.
+
+
+## lineStyle(Object)
+
+The line style of the lines.
+
+{{ use: partial-line-style(
+ prefix="##",
+ useColorPalatte=true,
+ defaultOpacity=0.5
+) }}
+
+## data(Array)
+
+A data array of 3D lines.
+Usually, each item of data can be a set of coordinates containing the start point and end point.
+
+More than two coordinates can be supported when [polyline](~series-lines3D.polyline) is set to `true`.
+as follows:
+
+```js
+data: [
+ [
+ [120, 66, 1], // latitude, longitude and altitude coordinates of the start point
+ [122, 67, 2] // latitude, longitude and altitude coordinates of the end point
+ ]
+]
+```
+Sometimes you need to configure the name of the data item or a separate style. You need to write the latitude and longitude coordinates to the coords property, as follows:
+
+```js
+data: [
+ {
+ coords: [ [120, 66], [122, 67] ],
+ // The value of data
+ value: 10,
+ // The name of data
+ name: 'foo',
+ // The style of line
+ lineStyle: {}
+ }
+]
+```
+
+### coords(Array)
+
+An array of two or more latitude and longitude coordinates. When [polyline](~series-lines3D.polyline) is set to `true`, support more than two coordinates.
+
+### value(Array|number)
+
+The value of data.
+
+### lineStyle(Object)
+
+Style setting for single data (single line).
+
+{{ use: partial-line-style(
+ prefix="###"
+) }}
+
+
+{{ use: partial-blend-mode() }}
+
+{{ use: partial-zlevel }}
+
+{{ use: partial-silent }}
\ No newline at end of file
diff --git a/en/option-gl/series/map3D.md b/en/option-gl/series/map3D.md
new file mode 100644
index 0000000..3efe1ff
--- /dev/null
+++ b/en/option-gl/series/map3D.md
@@ -0,0 +1,21 @@
+{{ target: series-map3D }}
+
+# series.map3D(Object)
+
+**3D map**
+
+3D maps are mainly used for visualizing geographic area data. With the [visualMap] (http://echarts.baidu.com/option.html#visualMap) component, it can be used to display data such as population distribution density in different regions.
+
+Compared to 2D maps, 3D maps can set different heights for each area. This height can be used to display data and to display the height of the building in the building data.
+
+## type(string) = 'map3D'
+
+
+{{ use: partial-series-name() }}
+
+
+{{ use: component-geo3D-common(
+ componentType="series-map3D",
+ inMap=true,
+ componentName="三维地图"
+) }}
\ No newline at end of file
diff --git a/en/option-gl/series/polygons3D.md b/en/option-gl/series/polygons3D.md
new file mode 100644
index 0000000..c034774
--- /dev/null
+++ b/en/option-gl/series/polygons3D.md
@@ -0,0 +1,65 @@
+{{ target: series-polygons3D }}
+
+# series.polygons3D(Object)
+
+`polygons3D` is used to visualize polygon data with high information on the map, which is often used for drawing of buildings.
+The picture below shows the nearly 50w number of New York buildings drawn with `polygons3D`.
+
+
+
+## type(string) = 'polygons3D'
+
+## multiPolygon(boolean) = true
+Whether a data contains multiple polygons.
+
+## itemStyle(Object)
+Graphic styles, including color, transparency, strokes, and etc.
+
+{{ use: partial-item-style(
+ prefix="##",
+ hasCallback=true,
+ useColorPalette=true
+) }}
+
+## emphasis(Object)
+
+Mouse hover Highlights the style of graphics and labels.
+
+
+### itemStyle(Object)
+
+{{ use: partial-item-style(
+ prefix="###"
+) }}
+
+## data(Object)
+A list of data for the polygon.
+
+
+```js
+data: [{
+ // A square
+ coords: [[0, 0], [100, 0], [100, 100], [0, 100]],
+ // Height
+ height: 3
+}, {
+ // A triangle
+ coords: [[50, 0], [100, 100], [0, 100]],
+ // Height
+ height: 5
+}]
+```
+
+### coords(Array)
+
+A list of coordinates of the polygon. If [multiPolygon](~series-polygons3D.multiPolygon) is set to true, it is an array containing multiple polygons.
+
+
+## progressiveThreshold(number) = 1000
+
+
+Enable progressive rendering thresholds, progressive rendering can be loading the screen without blocking.
+
+## progressive(number) = 1000
+
+Progressively render the amount of data per render.
diff --git a/cn/option-gl/series/scatter3D.md b/en/option-gl/series/scatter3D.md
similarity index 61%
copy from cn/option-gl/series/scatter3D.md
copy to en/option-gl/series/scatter3D.md
index 5cd155d..a0b8b10 100644
--- a/cn/option-gl/series/scatter3D.md
+++ b/en/option-gl/series/scatter3D.md
@@ -2,9 +2,9 @@
# series.scatter3D(Object)
-三维散点/气泡图。可以用于[三维直角坐标系 grid3D](~grid3D)，[三维地理坐标系 geo3D](~geo3D)，[地球 globe](~globe)，通过大小，颜色等属性展示数据。
+3D scatter chart. It can be used to display data in [grid3D](~grid3D), [ geo3D](~geo3D), [globe](~globe) using attributes such as size、color and so on.
-下图示一个三维的 simplex noise 用气泡图绘制出来的例子。
+This example is a 3D simplex noise drawn with a bubble chart.
@@ -22,7 +22,7 @@
## itemStyle(Object)
-散点图颜色描边等样式。
+Sets the style of scatter such as colors, strokes, etc.
{{ use: partial-item-style-scatter3D(
prefix="##"
@@ -30,7 +30,7 @@
## label(Object)
-标签样式
+Sets the style of label.
{{ use: partial-label-scatter3D(
prefix='##',
@@ -39,7 +39,7 @@
## emphasis(Object)
-图形和标签高亮的样式。
+Graphics and labels are highlighted.
### itemStyle(Object)
{{ use: partial-item-style-scatter3D(
@@ -53,20 +53,19 @@
## data(Array)
-三维散点图数据数组。数组每一项为一个数据。通常这个数据是用数组存储数据的每个属性/维度。例如下面：
-
+The data array of scatter3D. Each item in the array is a piece of data. Usually, this data stores each attribute/dimension of the data in an array. As Follows:
```js
data: [
[[12, 14, 10], [34, 50, 15], [56, 30, 20], [10, 15, 12], [23, 10, 14]]
]
```
-对于数组中的每一项：
+For each item in the array：
-1. 在 [grid3D](~grid3D) 中，每一项的前三个值分别是`x`, `y`, `z`。
-2. 在 [geo3D](~geo3D) 以及 [globe](globe) 中，每一项的前两个值分别是经纬度 `lng`, `lat`。
+1. In [grid3D](~grid3D) ,the first three values of each item are`x`, `y`, `z`.
+2. In [geo3D](~geo3D) and [globe](globe) ,the first two values of each item are longitude `lng`, latitude `lat`,
-除了默认给坐标系使用的值，每一项还可以加入任意多个值，用于给 [visualMap](~visualMap) 组件映射到颜色等其它图形属性。
+In addition to the default values for the coordinates, each item can be added with any number of values to [visualMap](~visualMap) the component for any other graphical property, such as color, etc.
{{ use: common-data-option-desc() }}
@@ -91,10 +90,10 @@ data: [
) }}
#${prefix|default('##')} borderWidth(number)=0
-图形描边宽度。
+Sets the width of the border.
#${prefix|default('##')} borderColor(string)='#fff'
-图形描边颜色。
+Sets the color of the border.
{{ target: partial-label-scatter3D }}
diff --git a/en/option-gl/series/scatterGL.md b/en/option-gl/series/scatterGL.md
new file mode 100644
index 0000000..2573b35
--- /dev/null
+++ b/en/option-gl/series/scatterGL.md
@@ -0,0 +1,66 @@
+{{ target: series-scatterGL }}
+
+# series.scatterGL(Object)
+
+A 2D scatter/bubble plot drawn using WebGL.
+
+It is used in the same way as [scatter](http://echarts.baidu.com/option.html#series-scatter).
+
+## type(string) = 'scatterGL'
+
+{{ use: partial-series-name() }}
+
+## coordinateSystem(string) = 'cartesian2d'
+
+The coordinate system used.
+
+Same as [scatter.coordinateSystem](http://echarts.baidu.com/option.html#series-scatter.coordinateSystem)
+
+{{ use: partial-symbol() }}
+
+## itemStyle(Object)
+
+Sets the style of scatter
+
+{{ use: partial-item-style-scatter3D(
+ prefix="##",
+ defaultOpacity=0.8,
+ hasCallback = ${hasCallback},
+ useColorPalette = ${useColorPalette}
+)}}
+
+## data(Array)
+
+The data array of scatter.
+
+The data format is the same as [scatter.data](http://echarts.baidu.com/option.html#series-scatter.data)
+
+### name(string)
+
+The name of the data item.
+
+### value(number|Array)
+
+Data item value
+
+### itemStyle(Object)
+
+The style of a single data graphic.
+
+{{ use: partial-item-style-scatter3D(
+ prefix="###",
+ defaultOpacity=0.8
+) }}
+
+{{ use: partial-blend-mode() }}
+
+{{ use: partial-zlevel(defaultZLevel=10) }}
+
+
+## progressiveThreshold(number) = 1e5
+
+Enable progressive rendering thresholds, progressive rendering can be loading the screen without blocking.
+
+## progressive(number) = 1e5
+
+Progressively render the amount of data per render.
\ No newline at end of file
diff --git a/en/option-gl/series/series.md b/en/option-gl/series/series.md
new file mode 100644
index 0000000..9d5276c
--- /dev/null
+++ b/en/option-gl/series/series.md
@@ -0,0 +1,9 @@
+#series
+Series list. Each series decides its diagram type through `type`.
+
+ECharts-gl adds a rich 3D visualization type.
+Including [3D bar] (~series.bar3D), [3D scatter] (~series.scatter3D), [3D lines] (~series.lines3D), [surface] (~series. Surface),
+Most visualization types can be used in a variety of coordinate system components, and are well integrated with the original echarts legend, tooltip, and other interactive components.
+
+At the same time, more functional enhancements have been made to the original 2D chart. For example, for scatter chart and diagrams of large amounts of data, you can use [scatterGL](~series.scatterGL), [graphGL](~series.graphGL) provided in echarts-gl to speed up drawing and operations.
+
diff --git a/en/option-gl/series/silent.md b/en/option-gl/series/silent.md
new file mode 100644
index 0000000..13abf6d
--- /dev/null
+++ b/en/option-gl/series/silent.md
@@ -0,0 +1,4 @@
+{{ target: partial-silent }}
+${prefix|default('#')}# silent(boolean) = false
+
+Whether the graph doesn`t respond and triggers a mouse event. The default is false, which is to respond to and trigger mouse events.
\ No newline at end of file
diff --git a/cn/option-gl/series/surface.md b/en/option-gl/series/surface.md
similarity index 51%
copy from cn/option-gl/series/surface.md
copy to en/option-gl/series/surface.md
index 8309d38..882dabe 100644
--- a/cn/option-gl/series/surface.md
+++ b/en/option-gl/series/surface.md
@@ -2,9 +2,9 @@
# series.surface(Object)
-曲面图。支持通过 [parametric](~series-surface.parametric) 绘制[参数曲面](https://en.wikipedia.org/wiki/Parametric_surface)。
+Surface. Support to drawn the [Parameter surface] (https://en.wikipedia.org/wiki/Parametric_surface) by [parametric](~series-surface.parametric).
-下图就是一个配置成金属材质的类似一个金属零件的参数曲面。
+The figure below is a parametric surface similar to a metal part configured as a metal material.
@@ -19,19 +19,20 @@
## parametric(boolean) = false
-是否为参数曲面。
+Whether it is a parametric surface.
## wireframe(Object)
-曲面图的网格线。
+The wireframe of the surface.
### show(boolean) = true
-是否显示网格线。默认显示。
+Whether to display wireframe. Default is Display.
+
### lineStyle(Object)
-网格线的样式。
+The style of the wireframe.
{{ use: partial-line-style(
prefix="###",
@@ -41,7 +42,7 @@
## equation(Object)
-曲面的函数表达式。如果需要展示的是函数曲面，可以不设置 [data](~series-surface.data)，通过 [equation](~series-surface.equation) 去声明函数表达式。例如通过下面这个函数可以模拟波纹效果。
+The function expression of the surface. If you need to display a function surface, you can set the function expression by [equation](~series-surface.equation) without setting [data](~series-surface.data). For example, the ripple effect can be simulated by the following function.
```js
equation: {
@@ -62,33 +63,33 @@ equation: {
```
### x(Object)
-自变量 x。
+Independent variable x.
#### step(number)
-x 的步长。
+The step size of x.
#### min(number)
-x 的最小值。
+The minimum value of x.
#### max(number)
-x 的最大值。
+The maximum value of x.
### y(Object)
-自变量 y。
+The independent variable y.
#### step(number)
-y 的步长。
+The step size of x.
#### min(number)
-y 的最小值。
+The minimum value of y.
#### max(number)
-y 的最大值。
+The maximum value of y.
### z(Function)
-因变量 z。
+The dependent variable z.
-z 为关于 [x](~series-surface.equation.x), [y](~series-surface.equation.y) 的函数。
+z is a function for [x](~series-surface.equation.x), [y](~series-surface.equation.y).
```js
(x: number, y: number) => number
@@ -96,10 +97,11 @@ z 为关于 [x](~series-surface.equation.x), [y](~series-surface.equation.y) 的
## parametricEquation(Object)
-曲面的[参数方程](https://zh.wikipedia.org/wiki/%E5%8F%83%E6%95%B8%E6%96%B9%E7%A8%8B)。在不设置 [data](~series-surface.data)，可以通过 [parametricEquation](~series-surface.equation) 去声明参数参数方程。在 [parametric](~series-surface) 为`true`时有效。
+The [parameter equation] of the surface (https://zh.wikipedia.org/wiki/%E5%8F%83%E6%95%B8%E6%96%B9%E7%A8%8B). When [data](~series-surface.data) is not set, the parameter parameter equation can be declared by [parametricEquation](~series-surface.equation). Valid when [parametric](~series-surface) is `true`.
+
+The parametric equations is [x](~series-surface.parametricEquation.x), [y](~series-surface.parametricEquation.y), [z](~series-surface.parametricEquation.z) about the equations of the parameters [u](~series-surface.parametricEquation.u), [v](~series-surface.parametricEquation.v).
-参数方程是 [x](~series-surface.parametricEquation.x), [y](~series-surface.parametricEquation.y), [z](~series-surface.parametricEquation.z) 关于参数 [u](~series-surface.parametricEquation.u)，[v](~series-surface.parametricEquation.v) 的方程。
-下面的参数方程就是绘制前面图中类似一个金属零件的参数曲面的。
+The following parametric equation is to plot the parametric surface of a similar metal part in the previous figure:
```js
var aa = 0.4;
@@ -133,32 +135,32 @@ parametricEquation: {
```
### u(Object)
-自变量 u。
+The argument u.
#### step(number)
-u 的步长。
+The step size of u.
#### min(number)
-u 的最小值。
+The minimum value of u.
#### max(number)
-u 的最大值。
+The maximum value of u.
### v(Object)
-自变量 v。
+Independent variable v.
#### step(number)
-v 的步长。
+The step size of v.
#### min(number)
-v 的最小值。
+The minimum value of v.
#### max(number)
-v 的最大值。
+The maximum value of v.
### x(Function)
-x 为关于 [u](~series-surface.equation.u), [v](~series-surface.equation.v) 的函数。
+x is a function for [u](~series-surface.equation.u), [v](~series-surface.equation.v).
```js
(u: number, v: number) => number
@@ -166,7 +168,7 @@ x 为关于 [u](~series-surface.equation.u), [v](~series-surface.equation.v) 的
### y(Function)
-x 为关于 [u](~series-surface.equation.u), [v](~series-surface.equation.v) 的函数。
+y is a function for [u](~series-surface.equation.u), [v](~series-surface.equation.v).
```js
(u: number, v: number) => number
@@ -174,7 +176,7 @@ x 为关于 [u](~series-surface.equation.u), [v](~series-surface.equation.v) 的
### z(Function)
-x 为关于 [u](~series-surface.equation.u), [v](~series-surface.equation.v) 的函数。
+z is a function for [u](~series-surface.equation.u), [v](~series-surface.equation.v).
```js
(u: number, v: number) => number
@@ -183,22 +185,22 @@ x 为关于 [u](~series-surface.equation.u), [v](~series-surface.equation.v) 的
## itemStyle(Object)
-曲面的颜色和不透明度等样式。
+The color, opacity, and other styles of the surface.
{{ use: partial-item-style(
componentType='series-surface',
- componentName='曲面图'
+ componentName='surface'
) }}
## data(Array)
-曲面图的数据数组。
+The data array of the surface.
-数据是线性存储的数组，包含`X 顶点数`x`Y 顶点数`个数据。一个 5 x 5 的曲面共有 25 个顶点，数据在数组中的索引如下
+The data is an array of linear stores containing multiply `X vertices ` by `Y vertices` data. A 5 x 5 surface has a total of 25 vertices, and the index of the data in the array is as follows
-上图使用的数据：
+The data used in the above figure:
```js
data: [
@@ -210,17 +212,17 @@ data: [
]
```
-每一项分别为 `x`, `y`, `z`。
+Each item is `x`, `y`, `z`.
-对于参数方程来说，每一项需要存储五个数据，分别是 `x`, `y`, `z` 和参数 `u`, `v`。而数据的索引按照`u`, `v` 的顺序。例如下面的数据：
+For the parametric equation, each item needs to store five data, namely `x`, `y`, `z` and the parameters `u`, `v`. The index of the data is in the order of `u`, `v`. For example the following data:
```js
data: [
- // v 为 0，u 从 -3.14 到 3.13
+ // v is 0, u is from -3.14 to 3.13
[0,0,1,-3.14,0],[0,0,1,-1.57,0],[0,0,1,0,0],[0,0,1,1.57,0],[0,0,1,3.14,0],
- // v 为 1.57，u 从 -3.14 到 3.13
+ // v is 1.57, u is from -3.14 to 3.13
[0,-1,0,-3.14,1.57],[-1,0,0,-1.57,1.57],[0,1,0,0,1.57],[1,0,0,1.57,1.57],[0,-1,0,3.14,1.57],
- // v 为 3.14，u 从 -3.14 到 3.13
+ // v is 3.14, u is from -3.14 to 3.13
[0,0,-1,-3.14,3.14],[0,0,-1,-1.57,3.14],[0,0,-1,0,3.14],[0,0,-1,1.57,3.14],[0,0,-1,3.14,3.14]]
]
```
@@ -228,13 +230,13 @@ data: [
{{ use: common-data-option-desc() }}
### name(string)
-数据项名称。
+The name of the data item.
### value(Array)
-数据项值。
+Data item value.
### itemStyle(Object)
-单个数据项的样式设置。
+The style setting for a single data item.
{{ use: partial-item-style(
prefix="###"
@@ -242,7 +244,7 @@ data: [
{{ use: partial-shading(
componentType='series-surface',
- componentName='曲面图'
+ componentName='surface'
) }}
{{ use: partial-zlevel }}
diff --git a/en/option/component/aria.md b/en/option/component/aria.md
index 54e6ecb..7b5e952 100644
--- a/en/option/component/aria.md
+++ b/en/option/component/aria.md
@@ -16,19 +16,19 @@ option = {
show: true
},
title: {
- text: '某站点用户访问来源',
+ text: 'Source of user access to a site',
x: 'center'
},
series: [
{
- name: '访问来源',
+ Name: 'access source',
type: 'pie',
data: [
- { value: 335, name: '直接访问' },
- { value: 310, name: '邮件营销' },
- { value: 234, name: '联盟广告' },
- { value: 135, name: '视频广告' },
- { value: 1548, name: '搜索引擎' }
+ { value: 335, name: 'direct access' },
+ { value: 310, name: 'mail marketing' },
+ { value: 234, name: 'union ad' },
+ { value: 135, name: 'video ad' },
+ { value: 1548, name: 'search engine' }
]
}
]
@@ -40,7 +40,7 @@ option = {
There should be an `aria-label` attribute on the chart DOM, which can help the disabled understand the content of charts with the help of certain devices. The value of the label is:
```
-这是一个关于“某站点用户访问来源”的图表。图表类型是饼图，表示访问来源。其数据是——直接访问的数据是335，邮件营销的数据是310，联盟广告的数据是234，视频广告的数据是135，搜索引擎的数据是1548。
+This is a chart of "Source of user access to a site." The chart type is a pie chart that indicates the source of the visit. The data is - direct access data is 335, mail marketing data is 310, union ad data is 234, video ad data is 135, search engine data is 1548.
```
The default language is in Chinese, but you can configure it with templates. The following document shows how to do it.
@@ -61,13 +61,13 @@ This is useful when single data values cannot represent what the chart means. Fo
General discription of chart.
-### withTitle(string) = '这是一个关于“{title}”的图表。'
+### withTitle(string) = 'This is a chart about "{title}".'
If [title.text](~title.text) exists, then this is used. Template variable:
- `{title}`: will be replaced by [title.text](~title.text).
-### withoutTitle(string) = '这是一个图表，'
+### withoutTitle(string) = 'This is a chart'
If [title.text](~title.text) does not exist, then this is used.
@@ -90,14 +90,14 @@ General description for all series. This displays before all series descriptions
- `{seriesCount}`: will be replaced by series count, which is 1.
-#### withName(string) = '图表类型是{seriesType}，表示{seriesName}。'
+#### withName(string) = 'The chart type is {seriesType}, which means {seriesName}. '
If chart contains `name` attribute, then this is used. Template variable:
-- `{seriesName}`: will be replaced by series `name`;
-- `{seriesType}`: will be replaced by series type name.
+- `{seriesName}`: will be replaced by the series `name`;
+- `{seriesType}`: will be replaced by the series type name.
-#### withoutName(string) = '图表类型是{seriesType}。'
+#### withoutName(string) = 'The chart type is {seriesType}.'
If chart doesn't contain `name` attribute, then this is used. Template variable:
@@ -108,20 +108,20 @@ If chart doesn't contain `name` attribute, then this is used. Template variable:
Description used when there are more than one chart.
-#### prefix(string) = '它由{seriesCount}个图表系列组成。'
+#### prefix(string) = 'It consists of {seriesCount} chart series. '
General description for all series. This displays before all series descriptions. Template variable:
- `{seriesCount}`: will be replaced by series count.
-#### withName(string) = '图表类型是{seriesType}，表示{seriesName}。'
+#### withName(string) = 'The chart type is {seriesType}, which means {seriesName}. '
If series contains `name` attribute, then this is used. Template variable:
- `{seriesName}`: will be replaced by series `name`;
- `{seriesType}`: will be replaced by series type name.
-#### withoutName(string) = '图表类型是{seriesType}。'
+#### withoutName(string) = 'The chart type is {seriesType}.'
If series doesn't contain `name` attribute, then this is used. Template variable:
@@ -135,7 +135,7 @@ Separators between series and series.
Separators other than the last one.
-##### end(string) = '。'
+##### end(string) = '.'
The last series seperator.
@@ -150,17 +150,17 @@ Data-related configures.
Maximum data number.
-### allData(string) = '其数据是——'
+### allData(string) = 'Its data is --'
Description used when all data is displayed. Note that this option will **not** set to display all data. If all data should be displayed, [aria.data.maxCount](~aria.data.maxCount) should be set to be `Number.MAX_VALUE`.
-### partialData(string) = '其中，前{displayCnt}项是——'
+### partialData(string) = ''Where the first {displayCnt} entry is -''
Description used when only part of data is displayed. Template variable:
- `{displayCnt}`: number of data displayed.
-### withName(string) = '{name}的数据是{value}'
+### withName(string) = '{name}'s data is {value}'
If data contains `name` attribute, then this is used. Template variable:
@@ -183,6 +183,6 @@ Separators other than the last one.
#### end(string) = ''
-The last data seperator.
+The last data separator.
Note that since series `separator.end` is used after the last data, `data.separator.end` is not needed in most cases.
diff --git a/en/option/component/axisPointer.md b/en/option/component/axisPointer.md
index 7c2f648..74b9452 100644
--- a/en/option/component/axisPointer.md
+++ b/en/option/component/axisPointer.md
@@ -28,7 +28,7 @@ This is the global configurations of axisPointer.
axisPointers can be linked to each other. The term "link" represents that axes are synchronized and move together. Axes are linked according to the value of axisPointer.
-See [sampleA](${galleryViewPath}candlestick-brush&edit=1&reset=1) and [sampleB](${galleryViewPath}scatter-nutrients-matrix&edit=1&reset=1)。
+See [sampleA](${galleryViewPath}candlestick-brush&edit=1&reset=1) and [sampleB](${galleryViewPath}scatter-nutrients-matrix&edit=1&reset=1).
link is an array, where each item represents a "link group". Axes will be linked when they are refered in the same link group. For example:
diff --git a/en/option/component/brush.md b/en/option/component/brush.md
index 0181c1c..2a0da73 100644
--- a/en/option/component/brush.md
+++ b/en/option/component/brush.md
@@ -183,7 +183,7 @@ Defailt brush style, whose value is:
## throttleDelay(number) = 0
-`0` for disabling throttle。
+`0` for disabling throttle.
{{use: partial-brush-throttle (galleryViewPath=${galleryViewPath})}}
diff --git a/en/option/component/graphic.md b/en/option/component/graphic.md
index 1bf421d..84887f0 100644
--- a/en/option/component/graphic.md
+++ b/en/option/component/graphic.md
@@ -278,7 +278,7 @@ For example:
+ Each element is transformed in the coordinate system of its parent, namely, transform of a element and its parent can be "stacked".
+ Transformation is performed by this order:
- 1. Translate [-el.origin[0], -el.origin[1]]。
+ 1. Translate [-el.origin[0], -el.origin[1]].
2. Scale according to el.scale.
3. Rotate according to el.rotation.
4. Translate back according to el.origin.
diff --git a/en/option/component/toolbox.md b/en/option/component/toolbox.md
index d740121..a4c6876 100644
--- a/en/option/component/toolbox.md
+++ b/en/option/component/toolbox.md
@@ -13,11 +13,11 @@ The style setting of ${name} icon. Since icon label is displayed only when hover
##${prefix} iconStyle(Object)
{{ use: partial-item-style(prefix="##" + ${prefix}) }}
###${prefix} textPosition(string) = 'bottom'
-Text position: `'left'` / `'right'` / `'top'` / `'bottom'`。
+Text position: `'left'` / `'right'` / `'top'` / `'bottom'`.
###${prefix} textFill(string) = '#000'
Fill color of text. If it's not set, it will use in the order of icon's fill color, stroke color, and `'#000'`.
###${prefix} textAlign(string) = 'center'
-Text align: `'left'` / `'center'` / `'right'`。
+Text align: `'left'` / `'center'` / `'right'`.
###${prefix} textBackgroundColor(string)
Text background color.
###${prefix} textBorderRadius(number)
diff --git a/en/option/component/visual-map-continuous.md b/en/option/component/visual-map-continuous.md
index 88e64d4..b9dbc43 100644
--- a/en/option/component/visual-map-continuous.md
+++ b/en/option/component/visual-map-continuous.md
@@ -59,7 +59,7 @@ chart.setOption({
```javascript
For instance:
-chart.setOption({visualMap: {min: 10, max: 300}}); // range is not set, then range is [min, max] by default, that is, [10, 300]。
+chart.setOption({visualMap: {min: 10, max: 300}}); // range is not set, then range is [min, max] by default, that is, [10, 300].
chart.setOption({visualMap: {min: 0, max: 400}}); // Modify min and max using setOption again.
// Then range will be auto-modified to the new [min, max], that is, [0, 400].
@@ -72,7 +72,7 @@ For instance:
chart.setOption({visualMap: {min: 10, max: 300, range: [20, 80]}}); // range is set to [20, 80].
chart.setOption({visualMap: {min: 0, max: 400}}); // min and max are modifies using setOption.
-// Then range keep the original value ([20, 80]) but will not do auto-adaption。
+// Then range keep the original value ([20, 80]) but will not do auto-adaption.
chart.setOption({visualMap: {range: null}}); // Set range to null then.
// Then auto-adaption of range turns on and range is auto modified to [min, max], that is, [0, 400].
diff --git a/en/option/component/visual-map.md b/en/option/component/visual-map.md
index 912797f..9d115bb 100644
--- a/en/option/component/visual-map.md
+++ b/en/option/component/visual-map.md
@@ -161,7 +161,7 @@ For instance, `[visualMap.min, visualMap.max]` is set to be `[0, 100]`, and ther
We can also set the visual range inversely, such as `opacity: [1, 0.4]`, and the final mapping result for the given series.data above will be `[0.7, 0.96, 0.4]`.
-Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by defualt, but not `dataMin` and `dataMax` in series.data。
+Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by defualt, but not `dataMin` and `dataMax` in series.data.
How to configure visualMap component to do Linear Mapping?
@@ -188,11 +188,11 @@ About the possible value range of visual value:
+ `opacity`、`colorAlpha`、`colorLightness`、`colorSaturation`，`visual value`
- possible value range is `[0, 1]`。
+ possible value range is `[0, 1]`.
+ `colorHue`
- possible value range is `[0, 360]`。
+ possible value range is `[0, 360]`.
+ `color`：
diff --git a/en/option/option.md b/en/option/option.md
index 333e114..2750b04 100644
--- a/en/option/option.md
+++ b/en/option/option.md
@@ -76,6 +76,13 @@ Global font style.
{{import: partial-animation }}
+# blendMode(string) = 'source-over'
+
+Sets the type of compositing operation to apply when drawing a new shape. See the different type: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation.
+
+The default is `'source-over'`. Support settings for each series.
+
+`'lighter'` is also a common type of compositing operation. In this mode, the area where the number of graphics is concentrated is superimposed into a high-brightness color (white). It often used to highlight the effect of the area. See example [Global airline](${galleryEditorPath}lines-airline)
# useUTC(boolean) = false
diff --git a/en/option/partial/1d-data.md b/en/option/partial/1d-data.md
index f04c472..4aad25f 100644
--- a/en/option/partial/1d-data.md
+++ b/en/option/partial/1d-data.md
@@ -9,7 +9,7 @@ Model variation includes:
+ `{b}`: the name of a data item.
+ `{c}`: the value of a data item.
+ `{d}`: the percent.
-+ `{@xxx}: the value of a dimension named `'xxx'`, for example, `{@product}` refers the value of `'product'` dimension。
++ `{@xxx}: the value of a dimension named `'xxx'`, for example, `{@product}` refers the value of `'product'` dimension.
+ `{@[n]}: the value of a dimension at the index of `n`, for example, `{@[3]}` refers the value at dimensions[3].
**example: **
@@ -56,7 +56,7 @@ More likely, we need to assign name to each data item, in which case each item s
}]
```
-Each data item can be further custerized:
+Each data item can be further customized:
```js
[{
diff --git a/en/option/partial/2d-data.md b/en/option/partial/2d-data.md
index 198819e..422a3b3 100644
--- a/en/option/partial/2d-data.md
+++ b/en/option/partial/2d-data.md
@@ -9,7 +9,7 @@ Model variation includes:
+ `{a}`: series name.
+ `{b}`: the name of a data item.
+ `{c}`: the value of a data item.
-+ `{@xxx}: the value of a dimension named `'xxx'`, for example, `{@product}` refers the value of `'product'` dimension。
++ `{@xxx}: the value of a dimension named `'xxx'`, for example, `{@product}` refers the value of `'product'` dimension.
+ `{@[n]}: the value of a dimension at the index of `n`, for example, `{@[3]}` refers the value at dimensions[3].
**example: **
diff --git a/en/option/partial/animation.md b/en/option/partial/animation.md
index 76f5bc9..dac48af 100644
--- a/en/option/partial/animation.md
+++ b/en/option/partial/animation.md
@@ -37,7 +37,7 @@ Easing method used for animation.
{{ if: !${noAnimationDelay} }}
#${prefix} animationDelayUpdate(number|Function) = 0
-Delay before updating animation, which supports callback function for different data to have different animation effect.
+Delay before updating animation, which supports callback function for different data to have different animation effects.
For example:
```js
diff --git a/en/option/partial/axisPointer-common.md b/en/option/partial/axisPointer-common.md
index c6e60f1..f01b7f5 100644
--- a/en/option/partial/axisPointer-common.md
+++ b/en/option/partial/axisPointer-common.md
@@ -24,7 +24,7 @@ In the cases that more than one axis exist, axisPointer helps to look inside the
> Generally, axisPointers is configured in each axes who need them (for example [xAxis.axisPointer](~xAxis.axisPointer)), or configured in `tooltip` (for example [tooltip.axisPointer](~tooltip.axisPointer)).
> But these configurations can only be configured in global axisPointer:
-[axisPointer.triggerOn](~axisPointer.triggerOn), [axisPointer.link](~axisPointer.link)。
+[axisPointer.triggerOn](~axisPointer.triggerOn), [axisPointer.link](~axisPointer.link).
---
diff --git a/en/option/partial/encode-dimensions.md b/en/option/partial/encode-dimensions.md
index 062a3b0..b3abea7 100644
--- a/en/option/partial/encode-dimensions.md
+++ b/en/option/partial/encode-dimensions.md
@@ -9,7 +9,7 @@ option = {
dataset: {
source: [
// Each column is called a dimension.
- // There are five dimensions: 0, 1, 2, 3, 4。
+ // There are five dimensions: 0, 1, 2, 3, 4.
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
...
diff --git a/en/option/partial/icon.md b/en/option/partial/icon.md
index be48e28..9a34b73 100644
--- a/en/option/partial/icon.md
+++ b/en/option/partial/icon.md
@@ -42,7 +42,7 @@ A `dataURI` example:
{{ target: partial-icon-path }}
-Icons can be set to arbitrary vector path via `'path://'` in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to [SVG PathData](http://www.w3.org/TR/SVG/paths.html#PathData) for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
+Icons can be set to arbitrary vector path via `'path://'` in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to [SVG PathData](http://www.w3.org/TR/SVG/paths.html#PathData) for more information about the format of the path. You may export vector paths from tools like Adobe
For example:
diff --git a/en/option/partial/mark-area.md b/en/option/partial/mark-area.md
index 90755b9..fdc21fb 100644
--- a/en/option/partial/mark-area.md
+++ b/en/option/partial/mark-area.md
@@ -28,7 +28,7 @@ The scope of the area is defined by `data`, which is an array with two item, rep
1. Specify the coordinate in screen coordinate system using [x](~series-${seriesType}.markArea.data.0.x), [y](~series-${seriesType}.markArea.data.0.y), where the unit is pixel (e.g., the value is `5`), or percent (e.g., the value is `'35%'`).
{{ if: ${hasCoord} }}
2. Specify the coordinate in data coordinate system (i.e., cartesian) using
-[coord](~series-${seriesType}.markArea.data.0.coord), which can be also set as `'min'`, `'max'`, `'average'` (e.g, `coord: [23, 'min']`, or `coord: ['average', 'max']`)。
+[coord](~series-${seriesType}.markArea.data.0.coord), which can be also set as `'min'`, `'max'`, `'average'` (e.g, `coord: [23, 'min']`, or `coord: ['average', 'max']`).
{{ /if }}
{{ if: ${hasType} }}
3. Locate the point on the min value or max value of `series.data` using [type](~series-${seriesType}.markArea.data.0.type), where [valueIndex](~series-${seriesType}.markArea.data.0.valueIndex) or [valueDim](~series-${seriesType}.markPoint.data.0.valueDim) can be used to specify the dimension on which the min, max or average are calculated.
@@ -125,9 +125,9 @@ Specify the right-bottom point.
Specify this item is on min or max or average value.
**Options:**
-+ `'min'` max value。
-+ `'max'` min value。
-+ `'average'` average value。
++ `'min'` max value.
++ `'max'` min value.
++ `'average'` average value.
{{ /if }}
{{ if: ${hasCoord} }}
#${prefix} valueIndex(number)
diff --git a/en/option/partial/rect-layout.md b/en/option/partial/rect-layout.md
index 9f961d3..d2add5c 100644
--- a/en/option/partial/rect-layout.md
+++ b/en/option/partial/rect-layout.md
@@ -12,7 +12,7 @@
Distance between ${componentName} component and the left side of the container.
-`left` value can be instant pixel value like `20`; it can also be percentage value relative to container width like `'20%'`; and it can also be `'left'`, `'center'`, or `'right'`.
+`left` value can be instant pixel value like `20`; it can also be a percentage value relative to container width like `'20%'`; and it can also be `'left'`, `'center'`, or `'right'`.
If the `left` value is set to be `'left'`, `'center'`, or `'right'`, then the component will be aligned automatically based on position.
@@ -20,7 +20,7 @@ If the `left` value is set to be `'left'`, `'center'`, or `'right'`, then the co
Distance between ${componentName} component and the top side of the container.
-`top` value can be instant pixel value like `20`; it can also be percentage value relative to container width like `'20%'`; and it can also be `'top'`, `'middle'`, or `'bottom'`.
+`top` value can be instant pixel value like `20`; it can also be a percentage value relative to container width like `'20%'`; and it can also be `'top'`, `'middle'`, or `'bottom'`.
If the `left` value is set to be `'top'`, `'middle'`, or `'bottom'`, then the component will be aligned automatically based on position.
@@ -28,7 +28,7 @@ If the `left` value is set to be `'top'`, `'middle'`, or `'bottom'`, then the co
Distance between ${componentName} component and the right side of the container.
-`right` value can be instant pixel value like `20`; it can also be percentage value relative to container width like `'20%'`.
+`right` value can be instant pixel value like `20`; it can also be a percentage value relative to container width like `'20%'`.
{{ if: !${defaultRight} }}Adaptive by default.{{ /if }}
@@ -36,6 +36,6 @@ Distance between ${componentName} component and the right side of the container.
Distance between ${componentName} component and the bottom side of the container.
-`bottom` value can be instant pixel value like `20`; it can also be percentage value relative to container width like `'20%'`.
+`bottom` value can be instant pixel value like `20`; it can also be a percentage value relative to container width like `'20%'`.
{{ if: !${defaultBottom} }}Adaptive by default.{{ /if }}
diff --git a/en/option/partial/series-name.md b/en/option/partial/series-name.md
index 3fedc7a..5a951c7 100644
--- a/en/option/partial/series-name.md
+++ b/en/option/partial/series-name.md
@@ -1,3 +1,3 @@
{{ target: partial-series-name }}
## name(string)
-Series name used for displaying in [tooltip](~tooltip) and filtering with [legend](~legend), or updaing data and configuration with `setOption`.
+Series name used for displaying in [tooltip](~tooltip) and filtering with [legend](~legend), or updating data and configuration with `setOption`.
diff --git a/en/option/partial/tooltip-common.md b/en/option/partial/tooltip-common.md
index bcb3f24..2cc0598 100644
--- a/en/option/partial/tooltip-common.md
+++ b/en/option/partial/tooltip-common.md
@@ -123,7 +123,7 @@ Options:
#${prefix} axisPointer(Object)
-Configuration item for axis indicator.
+Configuration item for axisPointer.
`tooltip.axisPointer` is like syntactic sugar of axisPointer settings on axes (for example, [xAxis.axisPointer](~xAxis.axisPointer) or [angleAxis.axisPointer](~angleAxis.axisPointer)). More detailed features can be configured on `someAxis.axisPointer`. But in common cases, using `tooltip.axisPinter` is more convenient.
diff --git a/en/option/partial/z-zlevel.md b/en/option/partial/z-zlevel.md
index 69bf278..0b1056d 100644
--- a/en/option/partial/z-zlevel.md
+++ b/en/option/partial/z-zlevel.md
@@ -4,7 +4,7 @@
`zlevel` value of all graphical elements in ${componentName}.
-`zlevel` is used to make layers with Canvas. Graphical elements with different `zlevel` values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate `zlevel`. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
+`zlevel` is used to make layers with Canvas. Graphical elements with different `zlevel` values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate `zlevel`. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger `zlevel` will be placed on Canvases with smaller `zlevel`.
diff --git a/en/option/partial/zr-graphic.md b/en/option/partial/zr-graphic.md
index ffdc7d0..9d8ce2d 100644
--- a/en/option/partial/zr-graphic.md
+++ b/en/option/partial/zr-graphic.md
@@ -103,7 +103,7 @@ About width/height, cover/contain, see
[SVG PathData](http://www.w3.org/TR/SVG/paths.html#PathData).
-For example, `'M0,0 L0,-20 L30,-20 C42,-20 38,-1 50,-1 L70,-1 L70,0 Z'`。
+For example, `'M0,0 L0,-20 L30,-20 C42,-20 38,-1 50,-1 L70,-1 L70,0 Z'`.
If [width](~${optionPath}.${hostName}${symbolVisit}path.shape.width), [height](~${optionPath}.${hostName}${symbolVisit}path.shape.height), [x](~${optionPath}.${hostName}${symbolVisit}path.shape.x) and [y](~${optionPath}.${hostName}${symbolVisit}path.shape.y) specified, `pathData` will be transformed to fit the defined rect. If they are not specified, do not do that.
@@ -1126,7 +1126,7 @@ Define the overlap relationship between graphic elements.
##${prefix} name(string) = undefined
-See [diffChildrenByName](~${optionPath}.${hostName}${symbolVisit}polygon.diffChildrenByName)。
+See [diffChildrenByName](~${optionPath}.${hostName}${symbolVisit}polygon.diffChildrenByName).
{{ /if }}
diff --git a/en/option/series/custom.md b/en/option/series/custom.md
index 23650f1..d314f49 100644
--- a/en/option/series/custom.md
+++ b/en/option/series/custom.md
@@ -222,7 +222,7 @@ For example, in `cartesian2d`, suppose calling `api.size([2, 4])` returns `[12.4
In some coordinate systems (for example, polar) or when log axis is used, the size is different in different point. So the second parameter is necessary to calculate size on the given point.
```
-@param {Array.<number>} dataSize Data range。
+@param {Array.<number>} dataSize Data range.
@param {Array.<number>} dataItem The point where the size will be calculated.
@return {Array.<number>} The size.
```
@@ -321,7 +321,7 @@ Obtain font string, which can be used on style setting directly.
##### getDevicePixelRatio(Function)
```
-@return {number} The current devicePixelRatio。
+@return {number} The current devicePixelRatio.
```
diff --git a/en/option/series/line.md b/en/option/series/line.md
index 3d2eee4..ee49a81 100644
--- a/en/option/series/line.md
+++ b/en/option/series/line.md
@@ -101,7 +101,7 @@ The style of area.
## emphasis(Object)
-图形的高亮样式。
+Highlight style of the graphic.
### label(Object)
{{use: partial-label(
diff --git a/en/option/series/lines.md b/en/option/series/lines.md
index 59418c2..0b9204e 100644
--- a/en/option/series/lines.md
+++ b/en/option/series/lines.md
@@ -29,14 +29,15 @@ ECharts 2.x uses the `markLine` to draw the migrating effect, while in ECharts 3
) }}
## polyline(boolean) = false
-If draw as polyline.
+If draw as a polyline.
Default to be `false`. Can only draw a two end straight line.
If it is set true, [data.coords](~series-lines.data.coords) can have more than two coord to draw a polyline. It is useful when visualizing GPS track data. See example [lines-bus](${galleryEditorPath}lines-bmap-bus).
## effect(Object)
-The setting about special effect of lines.
+The setting about the special effects of lines.
+
**Tips: **All the graphs with trail effect should be put on a individual layer, which means that [zlevel](~series-lines.zlevel) need to be different with others. And the animation ([animation](~series-lines.animation): false) of this layer is suggested to be turned off at the meanwhile. Otherwise, other graphic elements in other series and the [label](~series-lines.label) of animation would produce unnecessary ghosts.
diff --git a/en/option/series/pictorialBar.md b/en/option/series/pictorialBar.md
index 6c976b7..cf0740a 100644
--- a/en/option/series/pictorialBar.md
+++ b/en/option/series/pictorialBar.md
@@ -44,7 +44,7 @@ Each graphic element can be basic shape (like `'circle'`, `'rect'`, ...), or [SV
See the example below:
~[800x400](${galleryViewPath}doc-example/pictorialBar-graphicType&reset=1&edit=1)
-[symbolClip](~series-pictorialBar.symbolClip) can be used to clip graphic elements。
+[symbolClip](~series-pictorialBar.symbolClip) can be used to clip graphic elements.
See the example below:
~[800x600](${galleryViewPath}doc-example/pictorialBar-clip&reset=1&edit=1)
@@ -227,7 +227,7 @@ When percent value is used, final size of the graphic element is calculated base
For example, there is a reference bar based on x axis (that is, it is a vertical bar), and [symbolSize](~series-pictorialBar.symbolSize) is set as `['30%', '50%']`, the final size of its graphic elements is:
-+ width: `<width of reference bar> * 30%`。
++ width: `<width of reference bar> * 30%`.
+ height:
+ If [symbolRepeat](~series-pictorialBar.symbolRepeat) is used: `<height of reference bar> * 50%`.
+ If [symbolRepeat](~series-pictorialBar.symbolRepeat) is not used: `<height of reference bar> * 50%`.
diff --git a/en/option/series/tree.md b/en/option/series/tree.md
index bd802da..95a98b1 100644
--- a/en/option/series/tree.md
+++ b/en/option/series/tree.md
@@ -34,7 +34,7 @@ The tree diagram is mainly used to visualize the tree data structure, which is a
## layout(string) = 'orthogonal'
-The layout of the tree, which can be `orthogonal` and `radial` 。Here the `orthogonal` layout is what we usually refer to the `horizontal` and `vertical` direction, the corresponding parameter value is `orthogonal`. The `radial` layout refers to the view that the root node as the center and each layer of nodes as the ring, the corresponding parameter value is `radial`.
+The layout of the tree, which can be `orthogonal` and `radial`. Here the `orthogonal` layout is what we usually refer to the `horizontal` and `vertical` direction, the corresponding parameter value is `orthogonal`. The `radial` layout refers to the view that the root node as the center and each layer of nodes as the ring, the corresponding parameter value is `radial`.
**Orthogonal Example：**
@@ -165,7 +165,7 @@ The style of the leaf node in the tree.
... // the format of the label is shown in the series-tree.label.
},
itemStyle: { // the special itemStyle configuration (if necessary).
- ... // the format of the itemstyle is shown in the series-tree.itemStyle。
+ ... // the format of the itemstyle is shown in the series-tree.itemStyle.
},
children: [
{
diff --git a/en/tutorial/aria.md b/en/tutorial/aria.md
index ddc5569..11e1b70 100644
--- a/en/tutorial/aria.md
+++ b/en/tutorial/aria.md
@@ -16,19 +16,19 @@ option = {
show: true
},
title: {
- text: '某站点用户访问来源',
+ text: 'Source of user access to a site',
x: 'center'
},
series: [
{
- name: '访问来源',
+ Name: 'access source',
type: 'pie',
data: [
- { value: 335, name: '直接访问' },
- { value: 310, name: '邮件营销' },
- { value: 234, name: '联盟广告' },
- { value: 135, name: '视频广告' },
- { value: 1548, name: '搜索引擎' }
+ { value: 335, name: 'direct access' },
+ { value: 310, name: 'mail marketing' },
+ { value: 234, name: 'union ad' },
+ { value: 135, name: 'video ad' },
+ { value: 1548, name: 'search engine' }
]
}
]
@@ -40,9 +40,10 @@ option = {
There should be an `aria-label` attribute on the chart DOM, which can help the disabled understand the content of charts with the help of certain devices. The value of the label is:
```
-这是一个关于“某站点用户访问来源”的图表。图表类型是饼图，表示访问来源。其数据是——直接访问的数据是335，邮件营销的数据是310，联盟广告的数据是234，视频广告的数据是135，搜索引擎的数据是1548。
+This is a chart of "Source of user access to a site." The chart type is a pie chart that indicates the source of the visit. The data is - direct access data is 335, mail marketing data is 310, union ad data is 234, video ad data is 135, search engine data is 1548.
```
The default language is in Chinese, but you can configure it with templates.
Please refer to [ARIA option](option.html#aria) for more detail.
+
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org