You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by wa...@apache.org on 2019/09/20 08:12:39 UTC
[incubator-echarts-doc] branch gl-en updated: doc: add gl en
translation ( part of en/option-gl/partial/...)
This is an automated email from the ASF dual-hosted git repository.
wangdd pushed a commit to branch gl-en
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
The following commit(s) were added to refs/heads/gl-en by this push:
new 6726bb6 doc: add gl en translation ( part of en/option-gl/partial/...)
6726bb6 is described below
commit 6726bb607d43fef52b55bb0589fad52f1e6fca56
Author: Wdingding <wa...@gmail.com>
AuthorDate: Fri Sep 20 16:12:27 2019 +0800
doc: add gl en translation ( part of en/option-gl/partial/...)
---
en/option-gl/partial/animation.md | 10 +-
en/option-gl/partial/area-style.md | 13 +-
en/option-gl/partial/blend-mode.md | 9 ++
en/option-gl/partial/formatter.md | 78 ++++++++++
en/option-gl/partial/icon.md | 16 ++
en/option-gl/partial/item-style.md | 18 +++
en/option-gl/partial/label.md | 30 ++--
en/option-gl/partial/light.md | 10 +-
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 | 14 +-
en/option-gl/partial/symbol.md | 17 +++
en/option-gl/partial/temporal-super-sampling.md | 19 +++
en/option-gl/partial/view-control.md | 155 ++++++++++++++++++++
en/option-gl/partial/viewport.md | 43 ++++++
en/option-gl/partial/zlevel.md | 12 ++
17 files changed, 618 insertions(+), 39 deletions(-)
diff --git a/en/option-gl/partial/animation.md b/en/option-gl/partial/animation.md
index 6a6422a..a58be15 100644
--- a/en/option-gl/partial/animation.md
+++ b/en/option-gl/partial/animation.md
@@ -2,22 +2,22 @@
#${prefix|default('#')} animation(boolean) = ${defaultAnimation|default(true)}
-Whether to turn on animation.
+Whether to enable animation.
#${prefix|default('#')} animationDurationUpdate(number) = ${defaultAnimationDurationUpdate|default(500)}
-The length of the transition animation.
+The duration time for update the transition animation.
#${prefix|default('#')} animationEasingUpdate(string) = ${defaultAnimationEasingUpdate|default('cubicOut')}
-The easing effect of the transition animation.
+The easing effect for update transition animation.
{{ if: ${animationDelay} }}
#${prefix|default('#')} animationDelayUpdate(number) = 0
-The delay of the transition animation. Support for callback functions. A more dramatic update animation can be achieved by returning different delay times through each data.
+The delayed to update the transition animation, which supports callback function for different data to have different animation effects.
-如下示例：
+Example：
```js
animationDelayUpdate: function (idx) {
return idx * 100;
diff --git a/en/option-gl/partial/area-style.md b/en/option-gl/partial/area-style.md
index c5e361e..d91d084 100644
--- a/en/option-gl/partial/area-style.md
+++ b/en/option-gl/partial/area-style.md
@@ -1,18 +1,19 @@
{{ target: partial-area-style }}
-#${prefix|default('##')} ${colorName|default('color')}(string{{if: ${hasCallback} }}|Function{{/if}})=${defaultColor|default('自适应')}
+#${prefix|default('##')} ${colorName|default('color')}(string{{if: ${hasCallback} }}|Function{{/if}})=${defaultColor|default('adaptive')}
-图形区域的颜色。{{ if: ${useColorPalette} }} 默认从全局调色盘 [option.color](http://echarts.baidu.com/option.html#color) 获取颜色 {{/if}}
+The color of the graphics area. {{ if: ${useColorPalatte} }} Color is taken from [option.color Palette](~color) by default. {{/if}}
-除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：
+In addition to color strings, RGBA values represented by arrays are supported, for example:
```js
-// 纯白色
+// pure white
[1, 1, 1, 1]
```
-使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。
+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/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/en/option-gl/partial/label.md b/en/option-gl/partial/label.md
index c716d18..14d0dbd 100644
--- a/en/option-gl/partial/label.md
+++ b/en/option-gl/partial/label.md
@@ -7,12 +7,11 @@ The Color of the text.
#${prefix|default('###')} borderWidth(number)=${defaultBorderWidth|default(0)}
-Storke line width of the text.
+The border width of the text.
#${prefix|default('###')} borderColor(string)=${defaultBorderColor|default('#fff')}
-Storke color of the text.
-
+The border color of the text.
#${prefix|default('###')} fontFamily(string)='sans-serif'
@@ -34,20 +33,17 @@ ${name}The font thick weight of the text.
+ 100 | 200 | 300 | 400...
-
-
-
{{ target: partial-label }}
#${prefix|default('##')} show(boolean) = ${defaultShow|default(false)}
-Whether to show the label
+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.
+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')}
@@ -65,26 +61,28 @@ The location of the label.
#${prefix|default('##')} formatter(Function|string)
-Data label formatter, which supports string template and callback function. In either form, `\n` is supported to represent a new line.
+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:**
-**String template**
-Model variation includes:
+The model variation includes:
+ `{a}`: series name.
+ `{b}`: the name of a data item.
+ `{c}`: the value of a data item.
-**example: **
+**Example:**
```js
formatter: '{b}: {c}'
```
-**Callback function**
-Callback function is in form of:
+**Callback function:**
+ Callback function is in form of:
```js
(params: Object|Array) => string
```
-where `params` is the single dataset needed by formatter, which is formed as:
-{{ use: partial-formatter-params-structure(extra = ${extra}) }}
+The `params` is the single data set needed by formatter, which is formed as:
+
+{{ use: partial-formatter-params-structure() }}
#${prefix|default('##')} textStyle(Object)
diff --git a/en/option-gl/partial/light.md b/en/option-gl/partial/light.md
index 8701d1c..279d9c7 100644
--- a/en/option-gl/partial/light.md
+++ b/en/option-gl/partial/light.md
@@ -27,7 +27,7 @@ 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 shows the difference between turning on the shadow and turning off the shadow.
+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">
@@ -47,7 +47,7 @@ The following two images shows the difference between low quality and high quali
###${prefix|default("#")} alpha(number) = ${defaultMainLightAlpha|default(0)}
-The main 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).
+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:
@@ -57,7 +57,7 @@ The [globe](~globe) component can control the time of sunlight by [time](~globe.
###${prefix|default("#")} beta(number) = ${defaultMainLightAlpha|default(0)}
-The main source is around the y-axis, which is the angle of left-right rotation.
+The main light source is around the y-axis, which is the angle of the left-right rotation.
{{ block: light-extend }}
@@ -77,12 +77,12 @@ The intensity of ambient light.
##${prefix|default("#")} ambientCubemap(Object)
-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).
+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. Resources for `.hdr` can be obtained from http://www.hdrlabs.com/sibl/archive.html and other websites.
+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：
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..5b56284
--- /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 b [...]
+
+```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
index 9730601..7f820f3 100644
--- a/en/option-gl/partial/shading.md
+++ b/en/option-gl/partial/shading.md
@@ -2,17 +2,17 @@
#${prefix|default("##")} detailTexture(string|HTMLImageElement|HTMLCanvasElement)
-The texture map of the material detial.
+The texture map of the material detail.
#${prefix|default("##")} textureTiling(number) = 1
-Tiles the texture map of the material detial. The default is `1`, which means that the stretch is filled. When the value is greater than `1`, the number is the time of the texture repetition
+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 height and width of `detailTexture` to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.
+**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 material detial texture.
+The displacement of the texture detail texture.
{{ target: partial-shading }}
@@ -53,7 +53,7 @@ When you want to express more complex materials. You can set `roughness` directl
-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/), or you can also generate it yourself using other tools.
+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
@@ -70,11 +70,11 @@ As with [roughness](~${componentType}.realisticMaterial.roughness) you can set `
##${prefix|default("#")} roughnessAdjust(number) = 0.5
-Roughness adjustment is useful when using roughness map. The roughness of the overall texture can be adjusted. The default is `0.5`, `0` is completely smooth, `1` is completely rough.
+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
-Metality adjustment is useful when using metal maps. The overall metallicity of the texture can be adjusted. The default is `0.5`, `0` is non-metal, `1` is metal.
+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)
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..2131ebc
--- /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-gl/partial/viewport.md b/en/option-gl/partial/viewport.md
new file mode 100644
index 0000000..1490ad1
--- /dev/null
+++ b/en/option-gl/partial/viewport.md
@@ -0,0 +1,43 @@
+{{ 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.
+
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org