You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/09/03 04:23:59 UTC
[incubator-echarts-doc] branch next updated: format: convert CRLF
to LF
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
The following commit(s) were added to refs/heads/next by this push:
new 13a11ed format: convert CRLF to LF
13a11ed is described below
commit 13a11ed83b48dee396acaa22a91f680d3a9e5f30
Author: pissang <bm...@gmail.com>
AuthorDate: Thu Sep 3 12:23:46 2020 +0800
format: convert CRLF to LF
---
.gitattributes | 1 +
en/option/component/angle-axis.md | 16 +-
en/option/component/axis-common.md | 416 +++++++++----------
en/option/component/data-zoom-inside.md | 64 +--
en/option/component/data-zoom-slider.md | 50 +--
en/option/component/data-zoom.md | 572 +++++++++++++--------------
en/option/component/geo-common.md | 172 ++++----
en/option/component/geo.md | 64 +--
en/option/component/grid.md | 26 +-
en/option/component/legend.md | 308 +++++++--------
en/option/component/parallel-axis.md | 54 +--
en/option/component/parallel.md | 30 +-
en/option/component/polar.md | 8 +-
en/option/component/radar.md | 54 +--
en/option/component/timeline.md | 330 ++++++++--------
en/option/component/title.md | 38 +-
en/option/component/toolbox.md | 244 ++++++------
en/option/component/tooltip.md | 60 +--
en/option/component/visual-map-continuous.md | 164 ++++----
en/option/component/visual-map-piecewise.md | 212 +++++-----
en/option/component/visual-map.md | 550 +++++++++++++-------------
en/option/component/x-axis.md | 20 +-
en/option/component/y-axis.md | 20 +-
en/option/partial/1d-data.md | 128 +++---
en/option/partial/2d-data.md | 310 +++++++--------
en/option/partial/animation.md | 76 ++--
en/option/partial/area-style.md | 28 +-
en/option/partial/barGrid.md | 14 +-
en/option/partial/circular-layout.md | 30 +-
en/option/partial/color-desc.md | 68 ++--
en/option/partial/component-common-style.md | 28 +-
en/option/partial/coord-sys.md | 48 +--
en/option/partial/data-id-desc.md | 4 +-
en/option/partial/formatter.md | 142 +++----
en/option/partial/icon.md | 38 +-
en/option/partial/label.md | 76 ++--
en/option/partial/line-data.md | 26 +-
en/option/partial/line-style.md | 22 +-
en/option/partial/mark-line.md | 158 ++++----
en/option/partial/mark-point.md | 64 +--
en/option/partial/padding.md | 30 +-
en/option/partial/parallel.md | 254 ++++++------
en/option/partial/rect-layout.md | 28 +-
en/option/partial/style-shadow-opacity.md | 32 +-
en/option/partial/text-style.md | 226 +++++------
en/option/partial/visual-mapping.md | 14 +-
en/option/partial/z-zlevel.md | 12 +-
en/option/series/bar.md | 16 +-
en/option/series/boxplot.md | 106 ++---
en/option/series/candlestick.md | 112 +++---
en/option/series/effectScatter.md | 12 +-
en/option/series/funnel.md | 64 +--
en/option/series/gauge.md | 48 +--
en/option/series/graph.md | 160 ++++----
en/option/series/heatmap.md | 18 +-
en/option/series/line.md | 82 ++--
en/option/series/lines.md | 44 +--
en/option/series/map.md | 32 +-
en/option/series/pictorialBar.md | 452 ++++++++++-----------
en/option/series/pie.md | 132 +++----
en/option/series/radar.md | 42 +-
en/option/series/sankey.md | 182 ++++-----
en/option/series/scatter.md | 6 +-
en/option/series/themeRiver.md | 66 ++--
en/option/series/treemap.md | 532 ++++++++++++-------------
tool/format.js | 5 +-
zh/option/component/axis-common.md | 2 +
67 files changed, 3724 insertions(+), 3718 deletions(-)
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..176a458
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1 @@
+* text=auto
diff --git a/en/option/component/angle-axis.md b/en/option/component/angle-axis.md
index 844ae79..59e99f5 100644
--- a/en/option/component/angle-axis.md
+++ b/en/option/component/angle-axis.md
@@ -15,18 +15,18 @@ The index of angle axis in Polar Coordinate. The first axis is used by default.
## startAngle(number) = 90
-Starting angle of axis. 90 degrees by default, standing for top position of center. 0 degree stands for right position of center.
-
-The following shows an example with startAngle of 45 deg.
-
+Starting angle of axis. 90 degrees by default, standing for top position of center. 0 degree stands for right position of center.
+
+The following shows an example with startAngle of 45 deg.
+
~[400x400](${galleryViewPath}doc-example/polar-start-angle&edit=1&reset=1)
## clockwise(boolean) = true
-Whether the positive position of axis is clockwise. True for clockwise by default.
-
-The following shows an example with clockwise as `false`.
-
+Whether the positive position of axis is clockwise. True for clockwise by default.
+
+The following shows an example with clockwise as `false`.
+
~[400x400](${galleryViewPath}doc-example/polar-anticlockwise&edit=1&reset=1)
{{ use: axis-common(
diff --git a/en/option/component/axis-common.md b/en/option/component/axis-common.md
index 216cf66..da8a3ec 100644
--- a/en/option/component/axis-common.md
+++ b/en/option/component/axis-common.md
@@ -7,22 +7,22 @@ Set this to `true`, to prevent interaction with the axis.
#${prefix} triggerEvent(boolean) = false
-Set this to `true` to enable triggering events.
-
-Parameters of the event include:
-
-```js
-{
- // Component type: xAxis, yAxis, radiusAxis, angleAxis
- // Each of which has an attribute for index, e.g., xAxisIndex for xAxis
- componentType: string,
- // Value on axis before being formatted.
- // Click on value label to trigger event.
- value: '',
- // Name of axis.
- // Click on laben name to trigger event.
- name: ''
-}
+Set this to `true` to enable triggering events.
+
+Parameters of the event include:
+
+```js
+{
+ // Component type: xAxis, yAxis, radiusAxis, angleAxis
+ // Each of which has an attribute for index, e.g., xAxisIndex for xAxis
+ componentType: string,
+ // Value on axis before being formatted.
+ // Click on value label to trigger event.
+ value: '',
+ // Name of axis.
+ // Click on laben name to trigger event.
+ name: ''
+}
```
#${prefix} axisLine(Object)
@@ -31,7 +31,7 @@ Settings related to axis line.
##${prefix} show(boolean) = ${defaultShow|default(true)}
-Set this to `false` to prevent the axis line from showing.
+Set this to `false` to prevent the axis line from showing.
{{ if: ${componentType} == 'xAxis' || ${componentType} == 'yAxis' }}
##${prefix} onZero(boolean) = true
@@ -40,7 +40,7 @@ Specifies whether X or Y axis lies on the other's origin position, where value i
##${prefix} onZeroAxisIndex(number)
-When mutiple axes exists, this option can be used to specify which axis can be "onZero" to.
+When mutiple axes exists, this option can be used to specify which axis can be "onZero" to.
{{ /if }}
##${prefix} symbol(string|Array) = 'none'
@@ -71,12 +71,12 @@ Arrow offset of axis. If is array, the first number is the offset of the arrow a
#${prefix} axisLabel(Object)
-Settings related to axis label.
+Settings related to axis label.
{{ if: !${hideShow} }}
##${prefix} show(boolean) = ${defaultShow|default(true)}
-Set this to `false` to prevent the axis label from appearing.
+Set this to `false` to prevent the axis label from appearing.
{{ /if }}
{{ if: ${hasLabelInterval|default(true)} }}
@@ -92,15 +92,15 @@ Set this to `false` to prevent the axis label from appearing.
{{ if: ${hasInside|default(true)} }}
##${prefix} inside(boolean) = false
-Set this to `true` so the axis labels face the `inside` direction.
+Set this to `true` so the axis labels face the `inside` direction.
{{ /if }}
{{ if: ${componentType} !== 'angleAxis' }}
##${prefix} rotate(number) = 0
-Rotation degree of axis label, which is especially useful when there is no enough space for category axis.
-
-Rotation degree is from -90 to 90.
+Rotation degree of axis label, which is especially useful when there is no enough space for category axis.
+
+Rotation degree is from -90 to 90.
{{ /if }}
##${prefix} margin(number) = 8
@@ -128,20 +128,20 @@ Whether to show the label of the max tick. Optional values: `true`, `false`, `nu
##${prefix} color(Color|Function)
-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: {
- color: function (value, index) {
- return value >= 0 ? 'green' : 'red';
- }
-}
+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: {
+ color: function (value, index) {
+ return value >= 0 ? 'green' : 'red';
+ }
+}
```
@@ -154,14 +154,14 @@ Settings related to axis tick.
##${prefix} show(boolean) = ${defaultShow|default(true)}
-Set this to `false` to prevent the axis tick from showing.
+Set this to `false` to prevent the axis tick from showing.
{{ if: ${hasAlignWithLabel|default(true)} }}
##${prefix} alignWithLabel(boolean) = false
-Align axis tick with label, which is available only when `boundaryGap` is set to be `true` in category axis. See the following picture:
-
-
+Align axis tick with label, which is available only when `boundaryGap` is set to be `true` in category axis. See the following picture:
+
+
{{ /if }}
{{ if: ${hasLabelInterval|default(true)} }}
@@ -176,7 +176,7 @@ Align axis tick with label, which is available only when `boundaryGap` is set to
{{ if: ${hasInside|default(true)} }}
##${prefix} inside(boolean) = false
-Set this to `true` so the axis labels face the `inside` direction.
+Set this to `true` so the axis labels face the `inside` direction.
{{ /if }}
##${prefix} length(number) = 5
@@ -209,16 +209,16 @@ Color of axis label is set to be [axisLine.lineStyle.color](~${componentType}.ax
version = "4.6.0"
) }}
-Settings related minor ticks.
-
-Note: `minorTick` is not available in the `category` type axis.
-
-Examples:
-
-1) Using minor ticks in function plotting.
-~[600x350](${galleryViewPath}line-function&edit=1&reset=1)
-
-2) Using minor ticks in log axis.
+Settings related minor ticks.
+
+Note: `minorTick` is not available in the `category` type axis.
+
+Examples:
+
+1) Using minor ticks in function plotting.
+~[600x350](${galleryViewPath}line-function&edit=1&reset=1)
+
+2) Using minor ticks in log axis.
~[600x350](${galleryViewPath}line-log&edit=1&reset=1)
##${prefix} show(boolean) = ${defaultShow|default(false)}
@@ -258,8 +258,8 @@ Split line of axis in [grid](~grid) area.
##${prefix} show(boolean) = ${defaultShow|default(true)}
-Set this to `false` to prevent the splitLine from showing.
-`value` type axes are shown by default, while `category` type axes are hidden.
+Set this to `false` to prevent the splitLine from showing.
+`value` type axes are shown by default, while `category` type axes are hidden.
{{ if: ${hasLabelInterval|default(true)} }}
##${prefix} interval(number|Function) = 'auto'
@@ -284,18 +284,18 @@ Set this to `false` to prevent the splitLine from showing.
###${prefix} color(Array|string) = ['#ccc']
-The color of the splitLine, which could be set separately.
-
-SplitLine color could also be set in color array, which the split lines would take as their colors in turns.
-
-Example:
-```
-splitLine: {
- lineStyle: {
- // Dark and light colors will be used in turns
- color: ['#aaa', '#ddd']
- }
-}
+The color of the splitLine, which could be set separately.
+
+SplitLine color could also be set in color array, which the split lines would take as their colors in turns.
+
+Example:
+```
+splitLine: {
+ lineStyle: {
+ // Dark and light colors will be used in turns
+ color: ['#aaa', '#ddd']
+ }
+}
```
@@ -330,7 +330,7 @@ If show minor split lines.
#${prefix} splitArea(Object)
-Split area of axis in [grid](~grid) area, not shown by default.
+Split area of axis in [grid](~grid) area, not shown by default.
{{ if: ${hasLabelInterval|default(true)} }}
##${prefix} interval(number|Function) = 'auto'
@@ -351,7 +351,7 @@ Split area style.
###${prefix} color(Array) = ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
-Color of split area.
+Color of split area.
SplitArea 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(
@@ -362,19 +362,19 @@ SplitArea color could also be set in color array, which the split lines would ta
{{ target: partial-axis-type-content }}
-Type of axis.
-
-Option:
-+ `'value'`
- Numerical axis, suitable for continuous data.
-
-+ `'category'`
- Category axis, suitable for discrete category data. Category data can be auto retrieved from [series.data](~series.data) or [dataset.source](~dataset.source){{ if: ${componentType} }}, or can be specified via [${componentType}.data](~${componentType}.data){{ /if }}.
-
-+ `'time'`
- Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.
-
-+ `'log'`
+Type of axis.
+
+Option:
++ `'value'`
+ Numerical axis, suitable for continuous data.
+
++ `'category'`
+ Category axis, suitable for discrete category data. Category data can be auto retrieved from [series.data](~series.data) or [dataset.source](~dataset.source){{ if: ${componentType} }}, or can be specified via [${componentType}.data](~${componentType}.data){{ /if }}.
+
++ `'time'`
+ Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.
+
++ `'log'`
Log axis, suitable for log data.
@@ -394,16 +394,16 @@ Name of axis.
#${prefix} nameLocation(string) = 'end'
-Location of axis name.
-
-**Options: **
-+ `'start'`
-+ `'middle'` or `'center'`
+Location of axis name.
+
+**Options: **
++ `'start'`
++ `'middle'` or `'center'`
+ `'end'`
#${prefix} nameTextStyle(Object)
-Text style of axis name.
+Text style of axis name.
{{ use: partial-text-style(
prefix = '#' + ${prefix},
@@ -426,108 +426,108 @@ Rotation of axis name.
#${prefix} inverse(boolean) = false
-Set this to `true` to invert the axis.
-This is a new option available from Echarts 3 and newer.
+Set this to `true` to invert the axis.
+This is a new option available from Echarts 3 and newer.
{{ /if }}
#${prefix} boundaryGap(boolean|Array)
-The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.
-
-The `boundaryGap` of category axis can be set to either `true` or `false`. Default value is set to be `true`, in which case [axisTick](~${componentType}.axisTick) is served only as a separation line, and labels and data appear only in the center part of two [axis ticks](~${componentType}.axisTick), which is called *band*.
-
-For non-category axis, including time, numerical value, and log axes, `boundaryGap` is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting [min](~${componentType}.min) and [max](~${componentType}.max).
-**Example: **
-```js
-boundaryGap: ['20%', '20%']
+The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.
+
+The `boundaryGap` of category axis can be set to either `true` or `false`. Default value is set to be `true`, in which case [axisTick](~${componentType}.axisTick) is served only as a separation line, and labels and data appear only in the center part of two [axis ticks](~${componentType}.axisTick), which is called *band*.
+
+For non-category axis, including time, numerical value, and log axes, `boundaryGap` is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting [min](~${componentType}.min) and [max](~${componentType}.max).
+**Example: **
+```js
+boundaryGap: ['20%', '20%']
```
#${prefix} min(number|string|Function) = null
-The minimun 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 axis tick is equally distributed when not set.
-
-In category axis, it can also be set as the ordinal number. For example, if a catergory axis has `data: ['categoryA', 'categoryB', 'categoryC']`, and the ordinal `2` represents `'categoryC'`. Moreover, it can be set as negative number, like `-3`.
-
-If `min` is specified as a function, it should return a min value, like:
-```js
-min: function (value) {
- return value.min - 20;
-}
-```
-
+The minimun 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 axis tick is equally distributed when not set.
+
+In category axis, it can also be set as the ordinal number. For example, if a catergory axis has `data: ['categoryA', 'categoryB', 'categoryC']`, and the ordinal `2` represents `'categoryC'`. Moreover, it can be set as negative number, like `-3`.
+
+If `min` is specified as a function, it should return a min value, like:
+```js
+min: function (value) {
+ return value.min - 20;
+}
+```
+
`value` is an object, containing the `min` value and `max` value of the data. This function should return the min value of axis, or return `null`/`undefined` to make echarts use the auto calculated min value (`null`/`undefined` return is only supported since `v4.8.0`).
#${prefix} max(number|string|Function) = null
-The maximum value of 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 axis tick is equally distributed when not set.
-
-In category axis, it can also be set as the ordinal number. For example, if a catergory axis has `data: ['categoryA', 'categoryB', 'categoryC']`, and the ordinal `2` represents `'categoryC'`. Moreover, it can be set as negative number, like `-3`.
-
-If `max` is specified as a function, it should return a max value, like:
-```js
-max: function (value) {
- return value.max - 20;
-}
-```
-
+The maximum value of 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 axis tick is equally distributed when not set.
+
+In category axis, it can also be set as the ordinal number. For example, if a catergory axis has `data: ['categoryA', 'categoryB', 'categoryC']`, and the ordinal `2` represents `'categoryC'`. Moreover, it can be set as negative number, like `-3`.
+
+If `max` is specified as a function, it should return a max value, like:
+```js
+max: function (value) {
+ return value.max - 20;
+}
+```
+
`value` is an object, containing the `min` value and `max` value of the data. This function should return the max value of axis, or return `null`/`undefined` to make echarts use the auto calculated max value (`null`/`undefined` return is only supported since `v4.8.0`).
#${prefix} 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.
-
+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.
#${prefix} splitNumber(number) = 5
-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.
-
+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 category axis.
#${prefix} minInterval(number) = 0
-Minimum gap between split lines.
-
-For example, it can be set to be `1` to make sure axis label is show as integer.
-
-```js
-{
- minInterval: 1
-}
-```
-
+Minimum gap between split lines.
+
+For example, it can be set to be `1` to make sure axis label is show as integer.
+
+```js
+{
+ minInterval: 1
+}
+```
+
It is available only for axis of [type](~${componentType}.type) 'value' or 'time'.
#${prefix} maxInterval(number)
-Maximum gap between split lines.
-
-For example, in time axis ([type](~${componentType}.type) is 'time'), it can be set to be `3600 * 24 * 1000` to make sure that the gap between axis labels is less than or equal to one day.
-
-```js
-{
- maxInterval: 3600 * 1000 * 24
-}
-```
-
+Maximum gap between split lines.
+
+For example, in time axis ([type](~${componentType}.type) is 'time'), it can be set to be `3600 * 24 * 1000` to make sure that the gap between axis labels is less than or equal to one day.
+
+```js
+{
+ maxInterval: 3600 * 1000 * 24
+}
+```
+
It is available only for axis of [type](~${componentType}.type) 'value' or 'time'.
#${prefix} 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.
-
+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.
#${prefix} logBase(number) = 10
@@ -573,28 +573,28 @@ Base of logarithm, which is valid only for numeric axes with [type](~${component
#${prefix} data(Array)
-Category data, available in [type](~${componentType}.type): 'category' axis.
-
-If [type](~${componentType}.type) is not specified, but `axis.data` is specified, the [type](~${componentType}.type) is auto set as `'category'`.
-
-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']
+Category data, available in [type](~${componentType}.type): 'category' axis.
+
+If [type](~${componentType}.type) is not specified, but `axis.data` is specified, the [type](~${componentType}.type) is auto set as `'category'`.
+
+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']
```
##${prefix} value(string)
@@ -612,7 +612,7 @@ Text style of the category.
{{ if: !${noAxisPointer} }}
#${prefix} axisPointer(Object)
-axisPointer settings on the axis.
+axisPointer settings on the axis.
{{ use: partial-axisPointer-common(
prefix = "#" + ${prefix}
@@ -625,38 +625,38 @@ axisPointer settings on the axis.
Interval of ${name}, which is available in category axis. {{ if: !${isAxisLabel} }} is set to be the same as [axisLabel.interval](~${componentType}.axisLabel.interval) by default.{{ /if }}
-It uses a strategy that labels do not overlap by default.
-
-You may set it to be 0 to display all labels compulsively.
-
-If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.
-
-On the other hand, you can control by callback function, whose format is shown below:
-```js
-(index:number, value: string) => boolean
-```
+It uses a strategy that labels do not overlap by default.
+
+You may set it to be 0 to display all labels compulsively.
+
+If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.
+
+On the other hand, you can control by callback function, whose format is shown below:
+```js
+(index:number, value: string) => boolean
+```
The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.
{{ target: axis-common-formatter-desc }}
-Formatter of axis label, which supports string template and callback function.
-
-Example:
-```js
-// 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 (idx === 0) {
- texts.unshift(date.getYear());
- }
- return texts.join('/');
-}
+Formatter of axis label, which supports string template and callback function.
+
+Example:
+```js
+// 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 (idx === 0) {
+ texts.unshift(date.getYear());
+ }
+ return texts.join('/');
+}
```
diff --git a/en/option/component/data-zoom-inside.md b/en/option/component/data-zoom-inside.md
index 9116fc7..fba2171 100644
--- a/en/option/component/data-zoom-inside.md
+++ b/en/option/component/data-zoom-inside.md
@@ -3,20 +3,20 @@
# dataZoom.inside(Object)
-**dataZoomInside**
-
-Data zoom component of *inside* type.
-
-Refer to [dataZoom](~dataZoom) for more information.
-
-The *inside* means it's inside the coordinates.
-
-+ Translation: data area can be translated when moving in coordinates.
-+ Scaling:
- + PC: when mouse rolls (similar with touch pad) in coordinates.
- + Mobile: when touches and moved with two fingers in coordinates on touch screens.
-
-<br>
+**dataZoomInside**
+
+Data zoom component of *inside* type.
+
+Refer to [dataZoom](~dataZoom) for more information.
+
+The *inside* means it's inside the coordinates.
+
++ Translation: data area can be translated when moving in coordinates.
++ Scaling:
+ + PC: when mouse rolls (similar with touch pad) in coordinates.
+ + Mobile: when touches and moved with two fingers in coordinates on touch screens.
+
+<br>
<br>
## type(string) = 'inside'
@@ -35,32 +35,32 @@ Whether disable inside zoom.
## zoomOnMouseWheel(boolean|string) = true
-How to trigger zoom. Optional values:
-
-+ `true`：Mouse wheel triggers zoom.
-+ `false`：Mouse wheel can not triggers zoom.
-+ `'shift'`：Holding `shift` and mouse wheel triggers zoom.
-+ `'ctrl'`：Holding `ctrl` and mouse wheel triggers zoom.
+How to trigger zoom. Optional values:
+
++ `true`：Mouse wheel triggers zoom.
++ `false`：Mouse wheel can not triggers zoom.
++ `'shift'`：Holding `shift` and mouse wheel triggers zoom.
++ `'ctrl'`：Holding `ctrl` and mouse wheel triggers zoom.
+ `'alt'`：Holding `alt` and mouse wheel triggers zoom.
## moveOnMouseMove(boolean|string) = true
-How to trigger data window move. Optional values:
-
-+ `true`：Mouse move triggers data window move.
-+ `false`：Mouse move can not triggers data window move.
-+ `'shift'`：Holding `shift` and mouse move triggers data window move.
-+ `'ctrl'`：Holding `ctrl` and mouse move triggers data window move.
+How to trigger data window move. Optional values:
+
++ `true`：Mouse move triggers data window move.
++ `false`：Mouse move can not triggers data window move.
++ `'shift'`：Holding `shift` and mouse move triggers data window move.
++ `'ctrl'`：Holding `ctrl` and mouse move triggers data window move.
+ `'alt'`：Holding `alt` and mouse move triggers data window move.
## moveOnMouseWheel(boolean|string) = false
-How to trigger data window move. Optional values:
-
-+ `true`：Mouse wheel triggers data window move.
-+ `false`：Mouse wheel can not triggers data window move.
-+ `'shift'`：Holding `shift` and mouse wheel triggers data window move.
-+ `'ctrl'`：Holding `ctrl` and mouse wheel triggers data window move.
+How to trigger data window move. Optional values:
+
++ `true`：Mouse wheel triggers data window move.
++ `false`：Mouse wheel can not triggers data window move.
++ `'shift'`：Holding `shift` and mouse wheel triggers data window move.
++ `'ctrl'`：Holding `ctrl` and mouse wheel triggers data window move.
+ `'alt'`：Holding `alt` and mouse wheel triggers data window move.
## preventDefaultMouseMove(boolean) = true
diff --git a/en/option/component/data-zoom-slider.md b/en/option/component/data-zoom-slider.md
index e1513a7..93697e8 100644
--- a/en/option/component/data-zoom-slider.md
+++ b/en/option/component/data-zoom-slider.md
@@ -3,12 +3,12 @@
# dataZoom.slider(Object)
-**dataZoomSlider**
-
-(Please refer to the [introduction of dataZoom](~dataZoom).)
-
-
-<br>
+**dataZoomSlider**
+
+(Please refer to the [introduction of dataZoom](~dataZoom).)
+
+
+<br>
<br>
## type(string) = 'slider'
@@ -60,9 +60,9 @@ The color of border.
## handleIcon(string)
-Icon shape of handle, which supports path string. Its default value is:
-```js
-'M8.2,13.6V3.9H6.3v9.7H3.1v14.9h3.3v9.7h1.8v-9.7h3.3V13.6H8.2z M9.7,24.4H4.8v-1.4h4.9V24.4z M9.7,19.1H4.8v-1.4h4.9V19.1z'
+Icon shape of handle, which supports path string. Its default value is:
+```js
+'M8.2,13.6V3.9H6.3v9.7H3.1v14.9h3.3v9.7h1.8v-9.7h3.3V13.6H8.2z M9.7,24.4H4.8v-1.4h4.9V24.4z M9.7,19.1H4.8v-1.4h4.9V19.1z'
```
{{ use: partial-icon-image-path() }}
@@ -88,22 +88,22 @@ Precision of label if in number form. By default, it is decided based on the num
## labelFormatter(string|Function) = null
-The formatter tool for the label.
-
-+ It is a template if in `string`. For instance, `aaaa{value}bbbb`, where `{value}` will be replaced by the value of actual data value.
-
-+ It is a callback function if in `Function`. For example:
-
-```javascript
-/**
- * @param {*} value If axis.type is 'category', `value` is the index of axis.data.
- * else `value` is current value.
- * @param {strign} valueStr Inner formatted string.
- * @return {string} Returns the label formatted.
- */
-labelFormatter: function (value, valueStr) {
- return 'aaa' + value + 'bbb';
-}
+The formatter tool for the label.
+
++ It is a template if in `string`. For instance, `aaaa{value}bbbb`, where `{value}` will be replaced by the value of actual data value.
+
++ It is a callback function if in `Function`. For example:
+
+```javascript
+/**
+ * @param {*} value If axis.type is 'category', `value` is the index of axis.data.
+ * else `value` is current value.
+ * @param {strign} valueStr Inner formatted string.
+ * @return {string} Returns the label formatted.
+ */
+labelFormatter: function (value, valueStr) {
+ return 'aaa' + value + 'bbb';
+}
```
## showDetail(boolean) = true
diff --git a/en/option/component/data-zoom.md b/en/option/component/data-zoom.md
index 83fb796..b65c11c 100644
--- a/en/option/component/data-zoom.md
+++ b/en/option/component/data-zoom.md
@@ -3,124 +3,124 @@
# dataZoom(Array|Object)
-`dataZoom` component is used for zooming a specific area, which enables user to investigate data in detail, or get an overview of the data, or get rid of outlier points.
-
-These types of `dataZoom` component are supported:
-
-+ [dataZoomInside](~dataZoom-inside): Data zoom functionalities is embeded inside coordinate systems, enable user to zoom or roam coordinate system by mouse dragging, mouse move or finger touch (in touch screen).
-
-+ [dataZoomSlider](~dataZoom-slider): A special slider bar is provided, on which coordinate systems can be zoomed or roamed by mouse dragging or finger touch (in touch screen).
-
-+ [dataZoomSelect](~toolbox.feature.dataZoom): A marquee tool is provided for zooming or roaming coordinate system. That is [toolbox.feature.dataZoom](~toolbox.feature.dataZoom), which can only be configured in toolbox.
-
-
-Example:
-~[600x400](${galleryViewPath}doc-example/scatter-dataZoom-all&edit=1&reset=1)
-
-<br>
-
----
-
-
-**✦ Relationship between dataZoom and axis ✦**
-
-Basically `dataZoom` component operates "window" on axis to zoom or roam coordinate system.
-
-> Use [dataZoom.xAxisIndex](~dataZoom.xAxisIndex) or [dataZoom.yAxisIndex](~dataZoom.yAxisIndex) or [dataZoom.radiusAxisIndex](~dataZoom.radiusAxisIndex) or [dataZoom.angleAxisIndex](~dataZoom.angleAxisIndex) to specify which axes are operated by `dataZoom`.
-
-A single chart instance can contain several `dataZoom` components, each of which controls different axes. The `dataZoom` components that control the same axis will be automatically linked (i.e., all of them will be updated when one of them is updated by user action or API call).
-
-<br>
-
----
-
-
+`dataZoom` component is used for zooming a specific area, which enables user to investigate data in detail, or get an overview of the data, or get rid of outlier points.
+
+These types of `dataZoom` component are supported:
+
++ [dataZoomInside](~dataZoom-inside): Data zoom functionalities is embeded inside coordinate systems, enable user to zoom or roam coordinate system by mouse dragging, mouse move or finger touch (in touch screen).
+
++ [dataZoomSlider](~dataZoom-slider): A special slider bar is provided, on which coordinate systems can be zoomed or roamed by mouse dragging or finger touch (in touch screen).
+
++ [dataZoomSelect](~toolbox.feature.dataZoom): A marquee tool is provided for zooming or roaming coordinate system. That is [toolbox.feature.dataZoom](~toolbox.feature.dataZoom), which can only be configured in toolbox.
+
+
+Example:
+~[600x400](${galleryViewPath}doc-example/scatter-dataZoom-all&edit=1&reset=1)
+
+<br>
+
+---
+
+
+**✦ Relationship between dataZoom and axis ✦**
+
+Basically `dataZoom` component operates "window" on axis to zoom or roam coordinate system.
+
+> Use [dataZoom.xAxisIndex](~dataZoom.xAxisIndex) or [dataZoom.yAxisIndex](~dataZoom.yAxisIndex) or [dataZoom.radiusAxisIndex](~dataZoom.radiusAxisIndex) or [dataZoom.angleAxisIndex](~dataZoom.angleAxisIndex) to specify which axes are operated by `dataZoom`.
+
+A single chart instance can contain several `dataZoom` components, each of which controls different axes. The `dataZoom` components that control the same axis will be automatically linked (i.e., all of them will be updated when one of them is updated by user action or API call).
+
+<br>
+
+---
+
+
**✦ How dataZoom componets operates axes and data ✦**
{{ use: partial-data-zoom-filterMode() }}
-Moreover, when `min`, `max` of an axis is set (e.g., `yAxis: {min: 0, max: 400}`), this extent of the axis will not be modified by the behaviour of dataZoom of other axis any more.
-
-<br>
-
----
-
-**✦ How to set window ✦**
-
-You can set the current window in two forms:
-
-+ percent value: see [dataZoom.start](~dataZoom.start) and [dataZoom.end](~dataZoom.end).
-
-+ absolute value: see [dataZoom.startValue](~dataZoom.startValue) and [dataZoom.endValue](~dataZoom.endValue).
-
-Notice: If use percent value form, and it is in the scenario below, the result of dataZoom depends on the sequence of dataZoom definitions appearing in `option`.
-
-
-```javascript
-option = {
- dataZoom: [
- {
- id: 'dataZoomX',
- type: 'slider',
- xAxisIndex: [0],
- filterMode: 'filter', // Set as 'filter' so that the modification
- // of window of xAxis willl effect the
- // window of yAxis.
- start: 30,
- end: 70
- },
- {
- id: 'dataZoomY',
- type: 'slider',
- yAxisIndex: [0],
- filterMode: 'empty',
- start: 20,
- end: 80
- }
- ],
- xAxis: {
- type: 'value'
- },
- yAxis: {
- type: 'value'
- // Notice there is no min or max set to
- // restrict the view extent of yAxis.
- },
- series{
- type: 'bar',
- data: [
- // The first column corresponds to xAxis,
- // and the second column corresponds to yAxis.
- [12, 24, 36],
- [90, 80, 70],
- [3, 9, 27],
- [1, 11, 111]
- ]
- }
-}
-```
-
-What is the exact meaning of `start: 20, end: 80` in `dataZoomY` in the example above?
-
-+ If `yAxis.min` and `yAxis.max` are set:
-
- `start: 20, end: 80` of `dataZoomY` means: from `20%` to `80%` out of `[yAxis.min, yAxis.max]`.
-
- If one of `yAxis.min` and `yAxis.max` is not set, the corresponding edge of the full extend also follow rule as follows.
-
-+ If `yAxis.min` and `yAxis.max` are not set:
-
- + If `dataZoomX` is set to be `filterMode: 'empty'`:
-
- `start: 20, end: 80` of `dataZoomY` means: from `20%` to `80%` out of `[dataMinY to dataMaxY]` of series.data (i.e., `[9, 80]` in the example above).
-
- + If `dataZoomX` is set to `filterMode: 'filter'`:
-
- Since `dataZoomX` is defined before `dataZoomY`, `start: 30, end: 70` of `dataZoomX` means: from `30%` to `70%` out of full series.data, whereas `start: 20, end: 80` of `dataZoomY` means: from `20%` to `80%` out of the series.data having been filtered by `dataZoomX`.
-
- If you want to change the process sequence, you can just change the sequence of the definitions apearing in `option`.
-
-<br>
+Moreover, when `min`, `max` of an axis is set (e.g., `yAxis: {min: 0, max: 400}`), this extent of the axis will not be modified by the behaviour of dataZoom of other axis any more.
+
+<br>
+
+---
+
+**✦ How to set window ✦**
+
+You can set the current window in two forms:
+
++ percent value: see [dataZoom.start](~dataZoom.start) and [dataZoom.end](~dataZoom.end).
+
++ absolute value: see [dataZoom.startValue](~dataZoom.startValue) and [dataZoom.endValue](~dataZoom.endValue).
+
+Notice: If use percent value form, and it is in the scenario below, the result of dataZoom depends on the sequence of dataZoom definitions appearing in `option`.
+
+
+```javascript
+option = {
+ dataZoom: [
+ {
+ id: 'dataZoomX',
+ type: 'slider',
+ xAxisIndex: [0],
+ filterMode: 'filter', // Set as 'filter' so that the modification
+ // of window of xAxis willl effect the
+ // window of yAxis.
+ start: 30,
+ end: 70
+ },
+ {
+ id: 'dataZoomY',
+ type: 'slider',
+ yAxisIndex: [0],
+ filterMode: 'empty',
+ start: 20,
+ end: 80
+ }
+ ],
+ xAxis: {
+ type: 'value'
+ },
+ yAxis: {
+ type: 'value'
+ // Notice there is no min or max set to
+ // restrict the view extent of yAxis.
+ },
+ series{
+ type: 'bar',
+ data: [
+ // The first column corresponds to xAxis,
+ // and the second column corresponds to yAxis.
+ [12, 24, 36],
+ [90, 80, 70],
+ [3, 9, 27],
+ [1, 11, 111]
+ ]
+ }
+}
+```
+
+What is the exact meaning of `start: 20, end: 80` in `dataZoomY` in the example above?
+
++ If `yAxis.min` and `yAxis.max` are set:
+
+ `start: 20, end: 80` of `dataZoomY` means: from `20%` to `80%` out of `[yAxis.min, yAxis.max]`.
+
+ If one of `yAxis.min` and `yAxis.max` is not set, the corresponding edge of the full extend also follow rule as follows.
+
++ If `yAxis.min` and `yAxis.max` are not set:
+
+ + If `dataZoomX` is set to be `filterMode: 'empty'`:
+
+ `start: 20, end: 80` of `dataZoomY` means: from `20%` to `80%` out of `[dataMinY to dataMaxY]` of series.data (i.e., `[9, 80]` in the example above).
+
+ + If `dataZoomX` is set to `filterMode: 'filter'`:
+
+ Since `dataZoomX` is defined before `dataZoomY`, `start: 30, end: 70` of `dataZoomX` means: from `30%` to `70%` out of full series.data, whereas `start: 20, end: 80` of `dataZoomY` means: from `20%` to `80%` out of the series.data having been filtered by `dataZoomX`.
+
+ If you want to change the process sequence, you can just change the sequence of the definitions apearing in `option`.
+
+<br>
<br>
{{ use: component-data-zoom-inside() }}
@@ -131,29 +131,29 @@ What is the exact meaning of `start: 20, end: 80` in `dataZoomY` in the example
{{ target: partial-data-zoom-axis-example }}
-If it is set as a single `number`, one axis is controlled, while if it is set as an `Array` , multiple axes are controlled.
-
-For example:
-
-```javascript
-option: {
- ${axisName}: [
- {...}, // The first ${axisName}
- {...}, // The second ${axisName}
- {...}, // The third ${axisName}
- {...} // The fourth ${axisName}
- ],
- dataZoom: [
- { // The first dataZoom component
- ${axisName}Index: [0, 2] // Indicates that this dataZoom component
- // controls the first and the third ${axisName}
- },
- { // The second dataZoom component
- ${axisName}Index: 3 // indicates that this dataZoom component
- // controls the fourth ${axisName}
- }
- ]
-}
+If it is set as a single `number`, one axis is controlled, while if it is set as an `Array` , multiple axes are controlled.
+
+For example:
+
+```javascript
+option: {
+ ${axisName}: [
+ {...}, // The first ${axisName}
+ {...}, // The second ${axisName}
+ {...}, // The third ${axisName}
+ {...} // The fourth ${axisName}
+ ],
+ dataZoom: [
+ { // The first dataZoom component
+ ${axisName}Index: [0, 2] // Indicates that this dataZoom component
+ // controls the first and the third ${axisName}
+ },
+ { // The second dataZoom component
+ ${axisName}Index: 3 // indicates that this dataZoom component
+ // controls the fourth ${axisName}
+ }
+ ]
+}
```
@@ -162,8 +162,8 @@ option: {
## xAxisIndex(number|Array) = null
-Specify which [xAxis](~xAxis) is/are controlled by the `${dataZoomName}` when [catesian coordinate system](~grid) is used.
-
+Specify which [xAxis](~xAxis) is/are controlled by the `${dataZoomName}` when [catesian coordinate system](~grid) is used.
+
By default the first `xAxis` that parallel to `dataZoom` are controlled when [${dataZoomName}.orient](~${dataZoomName}.orient) is set as `'horizontal'`. But it is recommended to specify it explicitly but not use default value.
{{ use: partial-data-zoom-axis-example(
@@ -172,8 +172,8 @@ By default the first `xAxis` that parallel to `dataZoom` are controlled when [${
## yAxisIndex(number|Array) = null
-Specify which [yAxis](~yAxis) is/are controlled by the `${dataZoomName}` when [catesian coordinate system](~grid) is used.
-
+Specify which [yAxis](~yAxis) is/are controlled by the `${dataZoomName}` when [catesian coordinate system](~grid) is used.
+
By default the first `yAxis` that parallel to `dataZoom` are controlled when [${dataZoomName}.orient](~${dataZoomName}.orient) is set as `'vertical'`. But it is recommended to specify it explicitly but not use default value.
{{ use: partial-data-zoom-axis-example(
@@ -202,200 +202,200 @@ Specify which [angleAxis](~angleAxis) is/are controlled by the `${dataZoomName}`
## start(number) = 0
-The start percentage of the window out of the data extent, in the range of 0 ~ 100.
-
-[${dataZoomName}.start](~${dataZoomName}.start) and [${dataZoomName}.end](~${dataZoomName}.end) define the window of the data in **percent** form.
-
+The start percentage of the window out of the data extent, in the range of 0 ~ 100.
+
+[${dataZoomName}.start](~${dataZoomName}.start) and [${dataZoomName}.end](~${dataZoomName}.end) define the window of the data in **percent** form.
+
More info about the relationship between `${dataZoomName}.start` and axis extent can be checked in [${dataZoomName}.rangeMode](~${dataZoomName}.rangeMode).
## end(number) = 100
-The end percentage of the window out of the data extent, in the range of 0 ~ 100.
-
-[${dataZoomName}.start](~${dataZoomName}.start) and [${dataZoomName}.end](~${dataZoomName}.end) define the window of the data in **percent** form.
-
+The end percentage of the window out of the data extent, in the range of 0 ~ 100.
+
+[${dataZoomName}.start](~${dataZoomName}.start) and [${dataZoomName}.end](~${dataZoomName}.end) define the window of the data in **percent** form.
+
More info about the relationship between `${dataZoomName}.end` and axis extent can be checked in [${dataZoomName}.rangeMode](~${dataZoomName}.rangeMode).
## startValue(number|string|Date) = null
-The start absolute value of the window, not works when [${dataZoomName}.start](~${dataZoomName}.start) is set.
-
-[${dataZoomName}.startValue](~${dataZoomName}.startValue) and [${dataZoomName}.endValue](~${dataZoomName}.endValue) define the window of the data window in **absolute value** form.
-
-Notice, if an axis is set to be `category`, `startValue` could be set as `index` of the array of `axis.data` or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.
-
+The start absolute value of the window, not works when [${dataZoomName}.start](~${dataZoomName}.start) is set.
+
+[${dataZoomName}.startValue](~${dataZoomName}.startValue) and [${dataZoomName}.endValue](~${dataZoomName}.endValue) define the window of the data window in **absolute value** form.
+
+Notice, if an axis is set to be `category`, `startValue` could be set as `index` of the array of `axis.data` or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.
+
More info about the relationship between `${dataZoomName}.startValue` and axis extent can be checked in [${dataZoomName}.rangeMode](~${dataZoomName}.rangeMode).
## endValue(number|string|Date) = null
-The end absolute value of the window, doesn't work when [${dataZoomName}.end](~${dataZoomName}.end) is set.
-
-[${dataZoomName}.startValue](~${dataZoomName}.startValue) and [${dataZoomName}.endValue](~${dataZoomName}.endValue) define the window of the data window in **absolute value** form.
-
-Notice, if an axis is set to be `category`, `startValue` could be set as `index` of the array of `axis.data` or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.
-
+The end absolute value of the window, doesn't work when [${dataZoomName}.end](~${dataZoomName}.end) is set.
+
+[${dataZoomName}.startValue](~${dataZoomName}.startValue) and [${dataZoomName}.endValue](~${dataZoomName}.endValue) define the window of the data window in **absolute value** form.
+
+Notice, if an axis is set to be `category`, `startValue` could be set as `index` of the array of `axis.data` or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.
+
More info about the relationship between `${dataZoomName}.endValue` and axis extent can be checked in [${dataZoomName}.rangeMode](~${dataZoomName}.rangeMode).
## minSpan(number) = null
-Used to restrict minimal window size, in percent, which value is in the range of [0, 100].
-
+Used to restrict minimal window size, in percent, which value is in the range of [0, 100].
+
If [${dataZoomName}.minValueSpan](~${dataZoomName}.minValueSpan) is set, `minSpan` does not work any more.
## maxSpan(number) = null
-Used to restrict maximal window size, in percent, which value is in the range of [0, 100].
-
+Used to restrict maximal window size, in percent, which value is in the range of [0, 100].
+
If [${dataZoomName}.maxValueSpan](~${dataZoomName}.maxValueSpan) is set, `maxSpan` does not work any more.
## minValueSpan(number|string|Date) = null
-Used to restrict minimal window size.
-
-For example:
-In time axis it can be set as `3600 * 24 * 1000 * 5` to represent "5 day".
+Used to restrict minimal window size.
+
+For example:
+In time axis it can be set as `3600 * 24 * 1000 * 5` to represent "5 day".
In category axis it can be set as `5` to represent 5 categories.
## maxValueSpan(number|string|Date) = null
-Used to restrict maximal window size.
-
-For example:
-In time axis it can be set as `3600 * 24 * 1000 * 5` to represent "5 day".
+Used to restrict maximal window size.
+
+For example:
+In time axis it can be set as `3600 * 24 * 1000 * 5` to represent "5 day".
In category axis it can be set as `5` to represent 5 categories.
## orient(string) = null
-Specify whether the layout of `dataZoom` component is horizontal or vertical. What's more, it indicates whether the horizontal axis or vertical axis is controlled by default in catesian coordinate system.
-
-Valid values:
-
-+ `'horizontal'`: horizontal.
-
+Specify whether the layout of `dataZoom` component is horizontal or vertical. What's more, it indicates whether the horizontal axis or vertical axis is controlled by default in catesian coordinate system.
+
+Valid values:
+
++ `'horizontal'`: horizontal.
+
+ `'vertical'`: vertical.
## zoomLock(boolean) = false
-Specify whether to lock the size of window (selected area).
-
+Specify whether to lock the size of window (selected area).
+
When set as `true`, the size of window is locked, that is, only the translation (by mouse drag or touch drag) is avialable but zoom is not.
## throttle(number) = 100
-Specify the frame rate of views refreshing, with unit millisecond (ms).
-
-
-If [animation](~animation) set as `true` and [animationDurationUpdate](~animationDurationUpdate) set as bigger than `0`, you can keep `throttle` as the default value `100` (or set it as a value bigger than `0`), otherwise it might be not smooth when dragging.
-
+Specify the frame rate of views refreshing, with unit millisecond (ms).
+
+
+If [animation](~animation) set as `true` and [animationDurationUpdate](~animationDurationUpdate) set as bigger than `0`, you can keep `throttle` as the default value `100` (or set it as a value bigger than `0`), otherwise it might be not smooth when dragging.
+
If [animation](~animation) set as `false` or [animationDurationUpdate](~animationDurationUpdate) set as `0`, and data size is not very large, and it seems to be not smooth when dragging, you can set `throttle` as `0` to improve that.
## rangeMode(Array)
-The format is `[rangeModeForStart, rangeModeForEnd]`.
-
-For example `rangeMode: ['value', 'percent']` means that use absolute value in `start` and percent value in `end`.
-
-Optional value for each item: `'value'`, `'percent'`.
-
-+ `'value'` mode: the axis extent will always only be determined by `dataZoom.startValue` and `dataZoom.endValue`, despite how data like and how `axis.min` and `axis.max` are.
-+ `'percent'` mode: `100` represents 100% of the `[dMin, dMax]`, where `dMin` is `axis.min` if `axis.min` specified, otherwise `data.extent[0]`, and `dMax` is `axis.max` if `axis.max` specified, otherwise `data.extent[1]`. Axis extent will only be determined by the result of the percent of `[dMin, dMax]`.
-
-`rangeMode` are auto determined by whether `option.start`/`option.end` are specified (represents `'percent'` mode) or `option.startValue`/`option.endValue` specified (represents `'value'` mode). And when user behavior trigger the changing of the view, the `rangeMode` would be modified automatically. For example, if triggered by `toolbox.dataZoom`, it will be modefied to `'value'`, and if triggered by `dataZoom-inside` or `dataZoom-slider`, it will be modified to `'percent'`.
-
-If we specify `rangeMode` manually in `option`, it only works when both `start` and `startValue` specified or both `end` and `endValue` specified. So usually we do not need to specify `dataZoom.rangeMode` manually.
-
+The format is `[rangeModeForStart, rangeModeForEnd]`.
+
+For example `rangeMode: ['value', 'percent']` means that use absolute value in `start` and percent value in `end`.
+
+Optional value for each item: `'value'`, `'percent'`.
+
++ `'value'` mode: the axis extent will always only be determined by `dataZoom.startValue` and `dataZoom.endValue`, despite how data like and how `axis.min` and `axis.max` are.
++ `'percent'` mode: `100` represents 100% of the `[dMin, dMax]`, where `dMin` is `axis.min` if `axis.min` specified, otherwise `data.extent[0]`, and `dMax` is `axis.max` if `axis.max` specified, otherwise `data.extent[1]`. Axis extent will only be determined by the result of the percent of `[dMin, dMax]`.
+
+`rangeMode` are auto determined by whether `option.start`/`option.end` are specified (represents `'percent'` mode) or `option.startValue`/`option.endValue` specified (represents `'value'` mode). And when user behavior trigger the changing of the view, the `rangeMode` would be modified automatically. For example, if triggered by `toolbox.dataZoom`, it will be modefied to `'value'`, and if triggered by `dataZoom-inside` or `dataZoom-slider`, it will be modified to `'percent'`.
+
+If we specify `rangeMode` manually in `option`, it only works when both `start` and `startValue` specified or both `end` and `endValue` specified. So usually we do not need to specify `dataZoom.rangeMode` manually.
+
Take a scenario as an example. When we are using dynamic data (update data periodically via `setOption`), if in `'value`' mode, the window will be kept in a fixed value range despite how data are appended, while if in `'percent'` mode, whe window range will be changed alone with the appended data (suppose `axis.min` and `axis.max` are not specified).
{{ target: partial-data-zoom-filterMode }}
-Generally `dataZoom` component zoom or roam coordinate system through data filtering and set the windows of axes internally.
-
-Its behaviours vary according to filtering mode settings ([dataZoom.filterMode](~dataZoom.filterMode)).
-
-Possible values:
-
-+ 'filter': data that outside the window will be **filtered**, which may lead to some changes of windows of other axes. For each data item, it will be filtered if one of the relevant dimensions is out of the window.
-
-+ 'weakFilter': data that outside the window will be **filtered**, which may lead to some changes of windows of other axes. For each data item, it will be filtered only if all of the relevant dimensions are out of the same side of the window.
-
-+ 'empty': data that outside the window will be **set to NaN**, which will not lead to changes of windows of other axes.
-
-+ 'none': Do not filter data.
-
-How to set `filterMode` is up to users, depending on the requirments and scenarios. Expirically:
-
-+ If only `xAxis` or only `yAxis` is controlled by `dataZoom`, `filterMode: 'filter'` is typically used, which enable the other axis auto adapte its window to the extent of the filtered data.
-
-+ If both `xAxis` and `yAxis` are operated by `dataZoom`:
-
- + If `xAxis` and `yAxis` should not effect mutually (e.g. a scatter chart with both axes on the type of `'value'`), they should be set to be `filterMode: 'empty'`.
-
- + If `xAxis` is the main axis and `yAxis` is the auxiliary axis (or vise versa) (e.g., in a bar chart, when dragging `dataZoomX` to change the window of xAxis, we need the yAxis to adapt to the clipped data, but when dragging `dataZoomY` to change the window of yAxis, we need the xAxis not to be changed), in this case, `xAxis` should be set to be `fiterMode: 'filter'`, while `yAxis` should be set to be `fiterMode: 'empty'`.
-
-It can be demonstrated by the sample:
-
-```javascript
-option = {
- dataZoom: [
- {
- id: 'dataZoomX',
- type: 'slider',
- xAxisIndex: [0],
- filterMode: 'filter'
- },
- {
- id: 'dataZoomY',
- type: 'slider',
- yAxisIndex: [0],
- filterMode: 'empty'
- }
- ],
- xAxis: {type: 'value'},
- yAxis: {type: 'value'},
- series{
- type: 'bar',
- data: [
- // The first column corresponds to xAxis,
- // and the second coloum corresponds to yAxis.
- [12, 24, 36],
- [90, 80, 70],
- [3, 9, 27],
- [1, 11, 111]
- ]
- }
-}
-```
-
-In the sample above, `dataZoomX` is set as `filterMode: 'filter'`. When use drags `dataZoomX` (do not touch `dataZoomY`) and the valueWindow of `xAxis` is changed to `[2, 50]` consequently, `dataZoomX` travel the first column of series.data and filter items that out of the window. The series.data turns out to be:
-
-```javascript
-[
- [12, 24, 36],
- // [90, 80, 70] This item is filtered, as 90 is out of the window.
- [3, 9, 27]
- // [1, 11, 111] This item is filtered, as 1 is out of the window.
-]
-```
-
-Before filtering, the second column, which corresponds to yAxis, has values `24`, `80`, `9`, `11`. After filtering, only `24` and `9` are left. Then the extent of `yAxis` is adjusted to adapt the two values (if `yAxis.min` and `yAxis.man` are not set).
-
-So `filterMode: 'filter'` can be used to enable the other axis to auto adapt the filtered data.
-
-Then let's review the sample from the beginning, `dataZoomY` is set as `filterMode: 'empty'`. So if user drags `dataZoomY` (do not touch `dataZoomX`) and its window is changed to `[10, 60]` consequently, `dataZoomY` travels the second column of series.data and set NaN to all of the values that outside the window (NaN cause the graphical elements, i.e., bar elements, do not show, but still hold the place). The series.data turns out to be:
-
-```javascript
-[
- [12, 24, 36],
- [90, NaN, 70], // Set to NaN
- [3, NaN, 27], // Set to NaN
- [1, 11, 111]
-]
-```
-
-In this case, the first column (i.e., `12`, `90`, `3`, `1`, which corresponds to `xAxis`), will not be changed at all. So dragging `yAxis` will not change extent of `xAxis`, which is good for requirements like outlier filtering.
-
-See this example:
+Generally `dataZoom` component zoom or roam coordinate system through data filtering and set the windows of axes internally.
+
+Its behaviours vary according to filtering mode settings ([dataZoom.filterMode](~dataZoom.filterMode)).
+
+Possible values:
+
++ 'filter': data that outside the window will be **filtered**, which may lead to some changes of windows of other axes. For each data item, it will be filtered if one of the relevant dimensions is out of the window.
+
++ 'weakFilter': data that outside the window will be **filtered**, which may lead to some changes of windows of other axes. For each data item, it will be filtered only if all of the relevant dimensions are out of the same side of the window.
+
++ 'empty': data that outside the window will be **set to NaN**, which will not lead to changes of windows of other axes.
+
++ 'none': Do not filter data.
+
+How to set `filterMode` is up to users, depending on the requirments and scenarios. Expirically:
+
++ If only `xAxis` or only `yAxis` is controlled by `dataZoom`, `filterMode: 'filter'` is typically used, which enable the other axis auto adapte its window to the extent of the filtered data.
+
++ If both `xAxis` and `yAxis` are operated by `dataZoom`:
+
+ + If `xAxis` and `yAxis` should not effect mutually (e.g. a scatter chart with both axes on the type of `'value'`), they should be set to be `filterMode: 'empty'`.
+
+ + If `xAxis` is the main axis and `yAxis` is the auxiliary axis (or vise versa) (e.g., in a bar chart, when dragging `dataZoomX` to change the window of xAxis, we need the yAxis to adapt to the clipped data, but when dragging `dataZoomY` to change the window of yAxis, we need the xAxis not to be changed), in this case, `xAxis` should be set to be `fiterMode: 'filter'`, while `yAxis` should be set to be `fiterMode: 'empty'`.
+
+It can be demonstrated by the sample:
+
+```javascript
+option = {
+ dataZoom: [
+ {
+ id: 'dataZoomX',
+ type: 'slider',
+ xAxisIndex: [0],
+ filterMode: 'filter'
+ },
+ {
+ id: 'dataZoomY',
+ type: 'slider',
+ yAxisIndex: [0],
+ filterMode: 'empty'
+ }
+ ],
+ xAxis: {type: 'value'},
+ yAxis: {type: 'value'},
+ series{
+ type: 'bar',
+ data: [
+ // The first column corresponds to xAxis,
+ // and the second coloum corresponds to yAxis.
+ [12, 24, 36],
+ [90, 80, 70],
+ [3, 9, 27],
+ [1, 11, 111]
+ ]
+ }
+}
+```
+
+In the sample above, `dataZoomX` is set as `filterMode: 'filter'`. When use drags `dataZoomX` (do not touch `dataZoomY`) and the valueWindow of `xAxis` is changed to `[2, 50]` consequently, `dataZoomX` travel the first column of series.data and filter items that out of the window. The series.data turns out to be:
+
+```javascript
+[
+ [12, 24, 36],
+ // [90, 80, 70] This item is filtered, as 90 is out of the window.
+ [3, 9, 27]
+ // [1, 11, 111] This item is filtered, as 1 is out of the window.
+]
+```
+
+Before filtering, the second column, which corresponds to yAxis, has values `24`, `80`, `9`, `11`. After filtering, only `24` and `9` are left. Then the extent of `yAxis` is adjusted to adapt the two values (if `yAxis.min` and `yAxis.man` are not set).
+
+So `filterMode: 'filter'` can be used to enable the other axis to auto adapt the filtered data.
+
+Then let's review the sample from the beginning, `dataZoomY` is set as `filterMode: 'empty'`. So if user drags `dataZoomY` (do not touch `dataZoomX`) and its window is changed to `[10, 60]` consequently, `dataZoomY` travels the second column of series.data and set NaN to all of the values that outside the window (NaN cause the graphical elements, i.e., bar elements, do not show, but still hold the place). The series.data turns out to be:
+
+```javascript
+[
+ [12, 24, 36],
+ [90, NaN, 70], // Set to NaN
+ [3, NaN, 27], // Set to NaN
+ [1, 11, 111]
+]
+```
+
+In this case, the first column (i.e., `12`, `90`, `3`, `1`, which corresponds to `xAxis`), will not be changed at all. So dragging `yAxis` will not change extent of `xAxis`, which is good for requirements like outlier filtering.
+
+See this example:
~[600x400](${galleryViewPath}doc-example/bar-dataZoom-filterMode&edit=1&reset=1)
diff --git a/en/option/component/geo-common.md b/en/option/component/geo-common.md
index ac1cc61..abc1213 100644
--- a/en/option/component/geo-common.md
+++ b/en/option/component/geo-common.md
@@ -3,46 +3,46 @@
#${prefix} map(string) = ''
-Map charts.
-
-Due to the increase of fineness of map, ECharts 3 doesn't include map data by default for package size consideration. You may find map files you need on [map download page](http://ecomfe.github.io/echarts-builder-web/map3.html) and then include and register them in ECharts.
-
-Two formats of map data are provided in ECharts, one of which can be included in `<script>` tag as JavaScript file, and the other of is in JSON format and should be loaded using AJAX. Map name and data will be loaded automatically once the JavaScript file is loaded, while in the JSON form, you have to assign name explicitly.
-
-
-Here are examples of these two types:
-
-** JavaScript importing example **
-
-```html
-<script src="echarts.js"></script>
-<script src="map/js/china.js"></script>
-<script>
-var chart = echarts.init(document.getElmentById('main'));
-chart.setOption({
- series: [{
- type: 'map',
- map: 'china'
- }]
-});
-</script>
-```
-
-** JSON importing example **
-
-```js
-$.get('map/json/china.json', function (chinaJson) {
- echarts.registerMap('china', chinaJson);
- var chart = echarts.init(document.getElmentById('main'));
- chart.setOption({
- series: [{
- type: 'map',
- map: 'china'
- }]
- });
-});
-```
-
+Map charts.
+
+Due to the increase of fineness of map, ECharts 3 doesn't include map data by default for package size consideration. You may find map files you need on [map download page](http://ecomfe.github.io/echarts-builder-web/map3.html) and then include and register them in ECharts.
+
+Two formats of map data are provided in ECharts, one of which can be included in `<script>` tag as JavaScript file, and the other of is in JSON format and should be loaded using AJAX. Map name and data will be loaded automatically once the JavaScript file is loaded, while in the JSON form, you have to assign name explicitly.
+
+
+Here are examples of these two types:
+
+** JavaScript importing example **
+
+```html
+<script src="echarts.js"></script>
+<script src="map/js/china.js"></script>
+<script>
+var chart = echarts.init(document.getElmentById('main'));
+chart.setOption({
+ series: [{
+ type: 'map',
+ map: 'china'
+ }]
+});
+</script>
+```
+
+** JSON importing example **
+
+```js
+$.get('map/json/china.json', function (chinaJson) {
+ echarts.registerMap('china', chinaJson);
+ var chart = echarts.init(document.getElmentById('main'));
+ chart.setOption({
+ series: [{
+ type: 'map',
+ map: 'china'
+ }]
+ });
+});
+```
+
ECharts uses [geoJSON](http://geojson.org/) format as map outline. Besides the methods introduced above, you can also get [geoJSON](http://geojson.org/) data through in other methods if you like and register it in ECharts. Reference to [USA Population Estimates](${galleryEditorPath}map-usa) for more information.
#${prefix} roam(boolean|string) = false
@@ -51,33 +51,33 @@ ECharts uses [geoJSON](http://geojson.org/) format as map outline. Besides the m
#${prefix} center(Array)
-Center of current view-port, in longitude and latitude.
-
-Example:
-```js
-center: [115.97, 29.71]
+Center of current view-port, in longitude and latitude.
+
+Example:
+```js
+center: [115.97, 29.71]
```
#${prefix} aspectScale(number) = 0.75
-Used to scale aspect of geo.
-
+Used to scale aspect of geo.
+
The final aspect is calculated by: `geoBoundingRect.width / geoBoundingRect.height * aspectScale`.
#${prefix} boundingCoords(Array) = null
-Two dimension array. Define coord of left-top, right-bottom in layout box.
-
-```js
-// A complete world map
-map: 'world',
-left: 0, top: 0, right: 0, bottom: 0,
-boundingCoords: [
- // [lng, lat] of left-top corner
- [-180, 90],
- // [lng, lat] of right-bottom corner
- [180, -90]
-],
+Two dimension array. Define coord of left-top, right-bottom in layout box.
+
+```js
+// A complete world map
+map: 'world',
+left: 0, top: 0, right: 0, bottom: 0,
+boundingCoords: [
+ // [lng, lat] of left-top corner
+ [-180, 90],
+ // [lng, lat] of right-bottom corner
+ [180, -90]
+],
```
#${prefix} zoom(number) = 1
@@ -92,11 +92,11 @@ Zoom rate of current view-port.
#${prefix} nameMap(Object)
-Name mapping for customized areas. For example:
-```js
-{
- 'China' : '中国'
-}
+Name mapping for customized areas. For example:
+```js
+{
+ 'China' : '中国'
+}
```
#${prefix} nameProperty(string) = 'name'
@@ -105,16 +105,16 @@ Name mapping for customized areas. For example:
version = "4.8.0"
) }}
-customized property key for GeoJSON feature. By default, 'name' is used as primary key to identify GeoJSON feature.
-For example:
-```js
-{
- nameProperty: 'NAME', // key to connect following data point to GeoJSON region {"type":"Feature","id":"01","properties":{"NAME":"Alabama"}, "geometry": { ... }}
- data:[
- {name: 'Alabama', value: 4822023},
- {name: 'Alaska', value: 731449},
- ]
-}
+customized property key for GeoJSON feature. By default, 'name' is used as primary key to identify GeoJSON feature.
+For example:
+```js
+{
+ nameProperty: 'NAME', // key to connect following data point to GeoJSON region {"type":"Feature","id":"01","properties":{"NAME":"Alabama"}, "geometry": { ... }}
+ data:[
+ {name: 'Alabama', value: 4822023},
+ {name: 'Alaska', value: 731449},
+ ]
+}
```
#${prefix} selectedMode(boolean|string) = false
@@ -175,18 +175,18 @@ Area filling color.
#${prefix} layoutCenter(Array) = null
-`layoutCenter` and `layoutSize` provides layout strategy other than `left/right/top/bottom/width/height`.
-
-When using `left/right/top/bottom/width/height`, it is hard to put the map inside a box area with a fixed width-height ratio. In this case, `layoutCenter` attribute can be used to define the center position of map, and `layoutSize` can be used to define the size of map. For example:
-
-```js
-layoutCenter: ['30%', '30%'],
-// If width-height ratio is larger than 1, then width is set to be 100.
-// Otherwise, height is set to be 100.
-// This makes sure that it will not exceed the area of 100x100
-layoutSize: 100
-```
-
+`layoutCenter` and `layoutSize` provides layout strategy other than `left/right/top/bottom/width/height`.
+
+When using `left/right/top/bottom/width/height`, it is hard to put the map inside a box area with a fixed width-height ratio. In this case, `layoutCenter` attribute can be used to define the center position of map, and `layoutSize` can be used to define the size of map. For example:
+
+```js
+layoutCenter: ['30%', '30%'],
+// If width-height ratio is larger than 1, then width is set to be 100.
+// Otherwise, height is set to be 100.
+// This makes sure that it will not exceed the area of 100x100
+layoutSize: 100
+```
+
After setting these two values, `left/right/top/bottom/width/height` becomes invalid.
#${prefix} layoutSize(number|string)
diff --git a/en/option/component/geo.md b/en/option/component/geo.md
index 59393e7..d198d6b 100644
--- a/en/option/component/geo.md
+++ b/en/option/component/geo.md
@@ -3,26 +3,26 @@
# geo(Object)
-Geographic coorinate system component.
-
-Geographic coorinate system component is used to draw maps, which also supports [scatter series](~series-scatter), and [line series](~series-lines).
-
-
-From `3.1.10`, geo component also supports mouse events, whose parameters are:
-
-```js
-{
- componentType: 'geo',
- // geo component's index in option
- geoIndex: number,
- // name of clicking area, e.g., Shanghai
- name: string,
- // clicking region object as input, see geo.regions
- region: Object
-}
-```
-
-**Tip:**
+Geographic coorinate system component.
+
+Geographic coorinate system component is used to draw maps, which also supports [scatter series](~series-scatter), and [line series](~series-lines).
+
+
+From `3.1.10`, geo component also supports mouse events, whose parameters are:
+
+```js
+{
+ componentType: 'geo',
+ // geo component's index in option
+ geoIndex: number,
+ // name of clicking area, e.g., Shanghai
+ name: string,
+ // clicking region object as input, see geo.regions
+ region: Object
+}
+```
+
+**Tip:**
The region color can also be controlled by map series. See [series-map.geoIndex](~series-map.geoIndex).
{{ use: partial-component-id(
@@ -39,18 +39,18 @@ Whether to show the geo component.
## regions(Array)
-Configure style for specified regions.
-For example:
-```js
-regions: [{
- name: 'Guangdong',
- itemStyle: {
- areaColor: 'red',
- color: 'red'
- }
-}]
-```
-
+Configure style for specified regions.
+For example:
+```js
+regions: [{
+ name: 'Guangdong',
+ itemStyle: {
+ areaColor: 'red',
+ color: 'red'
+ }
+}]
+```
+
The region color can also be controlled by map series. See [series-map.geoIndex](~series-map.geoIndex).
### name(string)
diff --git a/en/option/component/grid.md b/en/option/component/grid.md
index cd05f31..8a8c292 100644
--- a/en/option/component/grid.md
+++ b/en/option/component/grid.md
@@ -3,12 +3,12 @@
# grid(Object)
-Drawing grid in rectangular coordinate. In a single grid, at most two X and Y axes each is allowed. [Line chart](~series-line), [bar chart](~series-bar), and [scatter chart (bubble chart)](~series-scatter) can be drawn in grid.
-
-In ECharts 2.x, there could only be one single grid component at most in a single echarts instance. But in ECharts 3, there is no limitation.
-
-**Following is an example of Anscombe Quartet:**
-
+Drawing grid in rectangular coordinate. In a single grid, at most two X and Y axes each is allowed. [Line chart](~series-line), [bar chart](~series-bar), and [scatter chart (bubble chart)](~series-scatter) can be drawn in grid.
+
+In ECharts 2.x, there could only be one single grid component at most in a single echarts instance. But in ECharts 3, there is no limitation.
+
+**Following is an example of Anscombe Quartet:**
+
~[600x400](${galleryViewPath}scatter-anscombe-quartet&edit=1&reset=1)
{{ use: partial-component-id(
@@ -29,13 +29,13 @@ Whether to show the grid in rectangular coordinate.
## containLabel(boolean) = false
-Whether the grid region contains [axis tick label](~yAxis.axisLabel) of axis.
-
-+ When containLabel is `false`:
- + `grid.left` `grid.right` `grid.top` `grid.bottom` `grid.width` `grid.height` decide the location and size of the rectangle that is made of by xAxis and yAxis.
- + Setting to `false` will help when multiple grids need to be aligned at their axes.
-+ When containLabel is `true`:
- + `grid.left` `grid.right` `grid.top` `grid.bottom` `grid.width` `grid.height` decide the location and size of the rectangle that contains the axes and the labels of the axes.
+Whether the grid region contains [axis tick label](~yAxis.axisLabel) of axis.
+
++ When containLabel is `false`:
+ + `grid.left` `grid.right` `grid.top` `grid.bottom` `grid.width` `grid.height` decide the location and size of the rectangle that is made of by xAxis and yAxis.
+ + Setting to `false` will help when multiple grids need to be aligned at their axes.
++ When containLabel is `true`:
+ + `grid.left` `grid.right` `grid.top` `grid.bottom` `grid.width` `grid.height` decide the location and size of the rectangle that contains the axes and the labels of the axes.
+ Setting to `true` will help when the length of axis labels is dynamic and is hard to approximate. This will avoid labels from overflowing the container or overlapping other components.
{{ use: partial-component-common-style(
diff --git a/en/option/component/legend.md b/en/option/component/legend.md
index d03b312..122e3ba 100644
--- a/en/option/component/legend.md
+++ b/en/option/component/legend.md
@@ -3,36 +3,36 @@
# legend(Object)
-Legend component.
-
-Legend component shows symbol, color and name of different series. You can click legends to toggle displaying series in the chart.
-
-In ECharts 3, a single echarts instance may contain multiple legend components, which makes it easier for the layout of multiple legend components.
-
+Legend component.
+
+Legend component shows symbol, color and name of different series. You can click legends to toggle displaying series in the chart.
+
+In ECharts 3, a single echarts instance may contain multiple legend components, which makes it easier for the layout of multiple legend components.
+
If there have to be too many legend items, [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1) or [horizontally scrollable legend](${galleryEditorPath}radar2&edit=1&reset=1) are options to paginate them. Check [legend.type](~legend.type) please.
## type(string)
-Type of legend. Optional values:
-
-+ `'plain'`: Simple legend. (default)
-+ `'scroll'`: Scrollable legend. It helps when too many legend items needed to be shown.
-
-See [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1) or [horizontally scrollable legend](${galleryEditorPath}radar2&edit=1&reset=1).
-
-When `'scroll'` used, these options below can be used for detailed configuration:
-
-+ [legend.scrollDataIndex](~legend.scrollDataIndex)
-+ [legend.pageButtonItemGap](~legend.pageButtonItemGap)
-+ [legend.pageButtonGap](~legend.pageButtonGap)
-+ [legend.pageButtonPosition](~legend.pageButtonPosition)
-+ [legend.pageFormatter](~legend.pageFormatter)
-+ [legend.pageIcons](~legend.pageIcons)
-+ [legend.pageIconColor](~legend.pageIconColor)
-+ [legend.pageIconInactiveColor](~legend.pageIconInactiveColor)
-+ [legend.pageIconSize](~legend.pageIconSize)
-+ [legend.pageTextStyle](~legend.pageTextStyle)
-+ [legend.animation](~legend.animation)
+Type of legend. Optional values:
+
++ `'plain'`: Simple legend. (default)
++ `'scroll'`: Scrollable legend. It helps when too many legend items needed to be shown.
+
+See [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1) or [horizontally scrollable legend](${galleryEditorPath}radar2&edit=1&reset=1).
+
+When `'scroll'` used, these options below can be used for detailed configuration:
+
++ [legend.scrollDataIndex](~legend.scrollDataIndex)
++ [legend.pageButtonItemGap](~legend.pageButtonItemGap)
++ [legend.pageButtonGap](~legend.pageButtonGap)
++ [legend.pageButtonPosition](~legend.pageButtonPosition)
++ [legend.pageFormatter](~legend.pageFormatter)
++ [legend.pageIcons](~legend.pageIcons)
++ [legend.pageIconColor](~legend.pageIconColor)
++ [legend.pageIconInactiveColor](~legend.pageIconInactiveColor)
++ [legend.pageIconSize](~legend.pageIconSize)
++ [legend.pageTextStyle](~legend.pageTextStyle)
++ [legend.animation](~legend.animation)
+ [legend.animationDurationUpdate](~legend.animationDurationUpdate)
{{ use: partial-component-id(
@@ -47,19 +47,19 @@ When `'scroll'` used, these options below can be used for detailed configuration
## orient(string) = 'horizontal'
-The layout orientation of legend.
-
-Options:
-+ 'horizontal'
+The layout orientation of legend.
+
+Options:
++ 'horizontal'
+ 'vertical'
## align(string) = 'auto'
-Legend marker and text aligning. By default, it automatically calculates from component location and orientation. When [left](~legend.left) value of this component is 'right', and the vertical layout ([orient](~legend.orient) is 'vertical'), it would be aligned to 'right'.
-
-Option:
-+ 'auto'
-+ 'left'
+Legend marker and text aligning. By default, it automatically calculates from component location and orientation. When [left](~legend.left) value of this component is 'right', and the vertical layout ([orient](~legend.orient) is 'vertical'), it would be aligned to 'right'.
+
+Option:
++ 'auto'
++ 'left'
+ 'right'
## padding(number|Array) = 5
@@ -86,22 +86,22 @@ Whether to keep aspect for icons (from `series.symbol` or user-defined `legend.d
## formatter(string|Function) = null
-Formatter is used to format label of legend, which supports string template and callback function.
-
-Example:
-```js
-// using string template, the template variable is legend name {name}
-formatter: 'Legend {name}'
-// using callback function
-formatter: function (name) {
- return 'Legend ' + name;
-}
+Formatter is used to format label of legend, which supports string template and callback function.
+
+Example:
+```js
+// using string template, the template variable is legend name {name}
+formatter: 'Legend {name}'
+// using callback function
+formatter: function (name) {
+ return 'Legend ' + name;
+}
```
## selectedMode(string|boolean) = true
-Selected mode of legend, which controls whether series can be toggled displaying by clicking legends. It is enabled by default, and you may set it to be `false` to disable it.
-
+Selected mode of legend, which controls whether series can be toggled displaying by clicking legends. It is enabled by default, and you may set it to be `false` to disable it.
+
Besides, it can be set to `'single'` or `'multiple'`, for single selection and multiple selection.
## inactiveColor(Color) = '#ccc'
@@ -110,16 +110,16 @@ Legend color when not selected.
## selected(Object)
-State table of selected legend.
-
-example:
-```
-selected: {
- // selected'series 1'
- 'series 1': true,
- // unselected'series 2'
- 'series 2': false
-}
+State table of selected legend.
+
+example:
+```
+selected: {
+ // selected'series 1'
+ 'series 1': true,
+ // unselected'series 2'
+ 'series 2': false
+}
```
## textStyle(Object)
@@ -143,23 +143,23 @@ Icon of the legend items.
## data(Array)
-Data array of legend. An array item is usually a `name` representing string. (If it is a [pie chart](~series-pie), it could also be the `name` of a single data in the pie chart) of a series. Legend component would automatically calculate the color and icon according to series. Special string `''` (null string) or `'\n'` (new line string) can be used for a new line.
-
-If `data` is not specified, it will be auto collected from series. For most of series, it will be collected from [series.name](~series.name) or the dimension name specified by `seriesName` of [series.encode](~series.encode). For some types of series like [pie](~series-pie) and [funnel](~series-funnel), it will be collected from the name field of `series.data`.
-
-If you need to set the style for a single item, you may also set the configuration of it. In this case, `name` attribute is used to represent name of `series`.
-
-Example:
-```
-data: [{
- name: 'series 1',
- // compulsorily set icon as a circle
- icon: 'circle',
- // set up the text in red
- textStyle: {
- color: 'red'
- }
-}]
+Data array of legend. An array item is usually a `name` representing string. (If it is a [pie chart](~series-pie), it could also be the `name` of a single data in the pie chart) of a series. Legend component would automatically calculate the color and icon according to series. Special string `''` (null string) or `'\n'` (new line string) can be used for a new line.
+
+If `data` is not specified, it will be auto collected from series. For most of series, it will be collected from [series.name](~series.name) or the dimension name specified by `seriesName` of [series.encode](~series.encode). For some types of series like [pie](~series-pie) and [funnel](~series-funnel), it will be collected from the name field of `series.data`.
+
+If you need to set the style for a single item, you may also set the configuration of it. In this case, `name` attribute is used to represent name of `series`.
+
+Example:
+```
+data: [{
+ name: 'series 1',
+ // compulsorily set icon as a circle
+ icon: 'circle',
+ // set up the text in red
+ textStyle: {
+ color: 'red'
+ }
+}]
```
### name(string)
@@ -185,70 +185,70 @@ Text style of legend.
## scrollDataIndex(number) = 0
-It works when [legend.type](~legend.type) is `'scroll'`.
-
-`dataIndex` of the left top most displayed item.
-
-Although the scrolling of legend items can be controlled by calling `setOption` and specifying this property, we suggest that do not control legend in this way unless necessary (`setOption` might be time-consuming), but just use action [legendScroll](api.html#action.legend.legendScroll) to do that.
-
+It works when [legend.type](~legend.type) is `'scroll'`.
+
+`dataIndex` of the left top most displayed item.
+
+Although the scrolling of legend items can be controlled by calling `setOption` and specifying this property, we suggest that do not control legend in this way unless necessary (`setOption` might be time-consuming), but just use action [legendScroll](api.html#action.legend.legendScroll) to do that.
+
See [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1) or [horizontally scrollable legend](${galleryEditorPath}radar2&edit=1&reset=1).
## pageButtonItemGap(number) = 5
-It works when [legend.type](~legend.type) is `'scroll'`.
-
-The gap between page buttons and page info text.
-
+It works when [legend.type](~legend.type) is `'scroll'`.
+
+The gap between page buttons and page info text.
+
See [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1) or [horizontally scrollable legend](${galleryEditorPath}radar2&edit=1&reset=1).
## pageButtonGap(number) = null
-It works when [legend.type](~legend.type) is `'scroll'`.
-
-The gap between page buttons and legend items.
-
+It works when [legend.type](~legend.type) is `'scroll'`.
+
+The gap between page buttons and legend items.
+
See [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1) or [horizontally scrollable legend](${galleryEditorPath}radar2&edit=1&reset=1).
## pageButtonPosition(string) = 'end'
-It works when [legend.type](~legend.type) is `'scroll'`.
-
-The position of page buttons and page info. Optional values:
-
-+ `'start'`: on the left or top.
-+ `'end'`: on the right or bottom.
-
+It works when [legend.type](~legend.type) is `'scroll'`.
+
+The position of page buttons and page info. Optional values:
+
++ `'start'`: on the left or top.
++ `'end'`: on the right or bottom.
+
See [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1) or [horizontally scrollable legend](${galleryEditorPath}radar2&edit=1&reset=1).
## pageFormatter(string|Function) = '{current}/{total}'
-It works when [legend.type](~legend.type) is `'scroll'`.
-
-Page info formatter. It is `'{current}/{total}'` by default, where `{current}` is current page number (start from 1), and `{total}` is the total page number.
-
-If `pageFormatter` is a function, it should return a string. The parameters is:
-```js
-{
- current: number
- total: number
-}
-```
-
-
+It works when [legend.type](~legend.type) is `'scroll'`.
+
+Page info formatter. It is `'{current}/{total}'` by default, where `{current}` is current page number (start from 1), and `{total}` is the total page number.
+
+If `pageFormatter` is a function, it should return a string. The parameters is:
+```js
+{
+ current: number
+ total: number
+}
+```
+
+
See [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1) or [horizontally scrollable legend](${galleryEditorPath}radar2&edit=1&reset=1).
## pageIcons(Object)
-It works when [legend.type](~legend.type) is `'scroll'`.
-
+It works when [legend.type](~legend.type) is `'scroll'`.
+
The icons of page buttons.
### horizontal(Array)
-The icons of page buttons when [legend.orient](~legend.orient) is `'horizontal'`.
-
-It should be an array, `[previous page button, next page button]`, `['M0,0L12,-10L12,10z', 'M0,0L-12,-10L-12,10z']` by default.
-
+The icons of page buttons when [legend.orient](~legend.orient) is `'horizontal'`.
+
+It should be an array, `[previous page button, next page button]`, `['M0,0L12,-10L12,10z', 'M0,0L-12,-10L-12,10z']` by default.
+
For the each item of the array,
{{ use: partial-icon-image-path() }}
@@ -257,10 +257,10 @@ See [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1
### vertical(Array)
-The icons of page buttons when [legend.orient](~legend.orient) is `'vertical'`.
-
-It should be an array, `[previous page button, next page button]`, `['M0,0L20,0L10,-20z', 'M0,0L20,0L10,20z']` by default.
-
+The icons of page buttons when [legend.orient](~legend.orient) is `'vertical'`.
+
+It should be an array, `[previous page button, next page button]`, `['M0,0L20,0L10,-20z', 'M0,0L20,0L10,20z']` by default.
+
For the each item of the array,
{{ use: partial-icon-image-path() }}
@@ -269,32 +269,32 @@ See [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1
## pageIconColor(string) = '#2f4554'
-It works when [legend.type](~legend.type) is `'scroll'`.
-
-The color of page buttons.
-
+It works when [legend.type](~legend.type) is `'scroll'`.
+
+The color of page buttons.
+
See [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1) or [horizontally scrollable legend](${galleryEditorPath}radar2&edit=1&reset=1).
## pageIconInactiveColor(string) = '#aaa'
-It works when [legend.type](~legend.type) is `'scroll'`.
-
-The color of page buttons when they are inactive.
-
+It works when [legend.type](~legend.type) is `'scroll'`.
+
+The color of page buttons when they are inactive.
+
See [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1) or [horizontally scrollable legend](${galleryEditorPath}radar2&edit=1&reset=1).
## pageIconSize(number|Array) = 15
-It works when [legend.type](~legend.type) is `'scroll'`.
-
-The size of page buttons. It can be a number, or an array, like `[10, 3]`, represents `[width, height]`.
-
+It works when [legend.type](~legend.type) is `'scroll'`.
+
+The size of page buttons. It can be a number, or an array, like `[10, 3]`, represents `[width, height]`.
+
See [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1) or [horizontally scrollable legend](${galleryEditorPath}radar2&edit=1&reset=1).
## pageTextStyle(Object)
-It works when [legend.type](~legend.type) is `'scroll'`.
-
+It works when [legend.type](~legend.type) is `'scroll'`.
+
The text style of page info.
{{ use: partial-simple-text-style(
@@ -333,28 +333,28 @@ Duration of the page scroll animation.
version = "4.4.0"
) }}
-The selector button in the legend component. Currently includes both a full selection and an inverse selection. The selector button doesn't display by default, the user can manually configure it.
-
-Usage:
-
-```js
-selector: [
- {
- type: 'all or inverse',
- // can be any title you like
- title: 'All'
- },
- {
- type: 'inverse',
- title: 'Inv'
- }
-]
-
-// or
-selector: true
-
-// or
-selector: ['all', 'inverse']
+The selector button in the legend component. Currently includes both a full selection and an inverse selection. The selector button doesn't display by default, the user can manually configure it.
+
+Usage:
+
+```js
+selector: [
+ {
+ type: 'all or inverse',
+ // can be any title you like
+ title: 'All'
+ },
+ {
+ type: 'inverse',
+ title: 'Inv'
+ }
+]
+
+// or
+selector: true
+
+// or
+selector: ['all', 'inverse']
```
## selectorLabel(Object)
diff --git a/en/option/component/parallel-axis.md b/en/option/component/parallel-axis.md
index 101f862..609f84e 100644
--- a/en/option/component/parallel-axis.md
+++ b/en/option/component/parallel-axis.md
@@ -7,7 +7,7 @@ This component is the coordinate axis for parallel coordinate.
{{ use: partial-parallel-introduce() }}
-<br>
+<br>
<br>
{{ use: partial-component-id(
@@ -20,44 +20,44 @@ Dimension index of coordinate axis.
{{ use: partial-parallel-data-example() }}
-`dim` defines which dimension (which *row*) of data would map to this axis.
-
+`dim` defines which dimension (which *row*) of data would map to this axis.
+
Started from `0`. For example, if the `dim` of coordinate axis is `1`, it indicates that the second row of data would map to this axis.
## parallelIndex(number) = 0
-It is used to define which *coordinate* the *axis* should map to.
-
-For example:
-
-```javascript
-myChart.setOption({
- parallel: [
- {...}, // the first parallel coordinate
- {...} // the second parallel coordinate
- ],
- parallelAxis: [
- {parallelIndex: 1, ...}, // the first coordinate axis, mapping to the second parallel coordinate
- {parallelIndex: 0, ...}, // the second coordinate axis, mapping to the first parallel coordinate
- {parallelIndex: 1, ...}, // the third coordinate axis, mapping to the second parallel coordinate
- {parallelIndex: 0, ...} // the fourth coordinate axis, mapping to the first parallel coordinate
- ],
- ...
-});
-```
-
+It is used to define which *coordinate* the *axis* should map to.
+
+For example:
+
+```javascript
+myChart.setOption({
+ parallel: [
+ {...}, // the first parallel coordinate
+ {...} // the second parallel coordinate
+ ],
+ parallelAxis: [
+ {parallelIndex: 1, ...}, // the first coordinate axis, mapping to the second parallel coordinate
+ {parallelIndex: 0, ...}, // the second coordinate axis, mapping to the first parallel coordinate
+ {parallelIndex: 1, ...}, // the third coordinate axis, mapping to the second parallel coordinate
+ {parallelIndex: 0, ...} // the fourth coordinate axis, mapping to the first parallel coordinate
+ ],
+ ...
+});
+```
+
If there is only one parallel coordinate, you don't have to configure it, whose default value is `0`.
## realtime(boolean) = true
-Whether to refresh view when brush-selecting axis. If is set to be `false`, view is updated after brush-selecting action ends.
-
+Whether to refresh view when brush-selecting axis. If is set to be `false`, view is updated after brush-selecting action ends.
+
When data amount is large, it is suggested to set to be `false` to avoid efficiency problems.
## areaSelectStyle(Object)
-Area selecting is available on axes. Here is some configurations.
-
+Area selecting is available on axes. Here is some configurations.
+
<br>
### width(number) = 20
diff --git a/en/option/component/parallel.md b/en/option/component/parallel.md
index 59d9ce2..22a534f 100644
--- a/en/option/component/parallel.md
+++ b/en/option/component/parallel.md
@@ -5,7 +5,7 @@
{{ use: partial-parallel-introduce() }}
-<br>
+<br>
<br>
{{ use: partial-component-id(
@@ -22,10 +22,10 @@
## layout(string) = 'horizontal'
-Layout modes, whose optional values are:
-
-+ `'horizontal'`: place each axis horizontally.
-
+Layout modes, whose optional values are:
+
++ `'horizontal'`: place each axis horizontally.
+
+ `'vertical'`: place each axis vertically.
## axisExpandable(boolean) = false
@@ -36,34 +36,34 @@ Whether to enable toggling axis on clicking.
## axisExpandCenter(number) = null
-Index of the axis which is used as the center of expanding initially. It doesn't have a default value, and needs to be assigned manually.
-
+Index of the axis which is used as the center of expanding initially. It doesn't have a default value, and needs to be assigned manually.
+
Please refer to [parallel.axisExpandable](parallel.axisExpandable) for more information.
## axisExpandCount(number) = 0
-Defines how many axes are at expanding state initially. We'd suggest you assign this value manually according to dimensions.
-
+Defines how many axes are at expanding state initially. We'd suggest you assign this value manually according to dimensions.
+
Please refer to [parallel.axisExpandCenter](parallel.axisExpandCenter) and [parallel.axisExpandable](parallel.axisExpandable).
## axisExpandWidth(number) = 50
-Distance between two axes when at expanding state, in pixels.
-
+Distance between two axes when at expanding state, in pixels.
+
Please refer to [parallel.axisExpandable](parallel.axisExpandable) for more information.
## axisExpandTriggerOn(string) = 'click'
-Optional values:
-+ `'click'`: Trigger expanding when mouse clicking.
+Optional values:
++ `'click'`: Trigger expanding when mouse clicking.
+ `'mousemove'`: Trigger expanding when mouse hovering.
## parallelAxisDefault(Object)
{{ use: partial-parallel-axis-default() }}
-[See the sample](${galleryEditorPath}doc-example/parallel-all&edit=1&reset=1).
-
+[See the sample](${galleryEditorPath}doc-example/parallel-all&edit=1&reset=1).
+
<br>
{{ use: axis-common(
diff --git a/en/option/component/polar.md b/en/option/component/polar.md
index 90b467b..ab22e0e 100644
--- a/en/option/component/polar.md
+++ b/en/option/component/polar.md
@@ -3,10 +3,10 @@
# polar(Object)
-Polar coordinate can be used in scatter and line chart. Every polar coordinate has an [angleAxis](~angleAxis) and a [radiusAxis](~radiusAxis).
-
-**For example: **
-
+Polar coordinate can be used in scatter and line chart. Every polar coordinate has an [angleAxis](~angleAxis) and a [radiusAxis](~radiusAxis).
+
+**For example: **
+
~[600x400](${galleryViewPath}scatter-polar-punchCard&edit=1&reset=1)
{{ use: partial-component-id(
diff --git a/en/option/component/radar.md b/en/option/component/radar.md
index b5fc485..631e0b8 100644
--- a/en/option/component/radar.md
+++ b/en/option/component/radar.md
@@ -3,13 +3,13 @@
# radar(Object)
-Coordinate for [radar charts](~series-radar). This component is equal to the polar component in ECharts 2. Because the polar component in the echarts 3 is reconstructed to be the standard polar coordinate component, this component is renamed to be radar to avoid confusion.
-
-Radar chart coordinate is different from polar coordinate, in that every axis indicator of the radar chart coordinate is an individual dimension. The style of indicator coordinate axis could be configured through the following configuration items, including [name](~radar.name), [axisLine](~radar.axisLine), [axisTick](~radar.axisTick), [axisLabel](~radar.axisLabel), [splitLine](~radar.splitLine), [splitArea](~radar.splitArea).
-
-
-Here is a custom example of radar component.
-
+Coordinate for [radar charts](~series-radar). This component is equal to the polar component in ECharts 2. Because the polar component in the echarts 3 is reconstructed to be the standard polar coordinate component, this component is renamed to be radar to avoid confusion.
+
+Radar chart coordinate is different from polar coordinate, in that every axis indicator of the radar chart coordinate is an individual dimension. The style of indicator coordinate axis could be configured through the following configuration items, including [name](~radar.name), [axisLine](~radar.axisLine), [axisTick](~radar.axisTick), [axisLabel](~radar.axisLabel), [splitLine](~radar.splitLine), [splitArea](~radar.splitArea).
+
+
+Here is a custom example of radar component.
+
~[400x400](${galleryViewPath}doc-example/radar&edit=1&reset=1)
{{ use: partial-component-id(
@@ -34,15 +34,15 @@ Whether to display the indicator's name.
### formatter(string|Function)
-The formatter of indicator's name, in which the string and callback function are supported. See the following example:
-
-```js
-// using string template, the template variable should be the indicator's name {value}
-formatter: '【{value}】'
-// using callback function, the first parameter is the indicator's name, and the second parameter id the indicator's cinfiguration item
-formatter: function (value, indicator) {
- return '【' + value + '】';
-}
+The formatter of indicator's name, in which the string and callback function are supported. See the following example:
+
+```js
+// using string template, the template variable should be the indicator's name {value}
+formatter: '【{value}】'
+// using callback function, the first parameter is the indicator's name, and the second parameter id the indicator's cinfiguration item
+formatter: function (value, indicator) {
+ return '【' + value + '】';
+}
```
## textStyle(Object)
@@ -100,17 +100,17 @@ Whether to prevent calculating the scaling relative to zero. If it is set to be
## indicator(Array)
-Indicator of radar chart, which is used to assign multiple variables(dimensions) in radar chart. Here is the example.
-
-```js
-indicator: [
- { name: 'Sales (sales) ', max: 6500},
- { name: 'Administration (Administration) ', max: 16000, color: 'red'}, // Set the indicator as 'red'
- { name: 'Information Technology (Information Technology) ', max: 30000},
- { name: 'Customer Support (Customer Support) ', max: 38000},
- { name: 'Development (Development) ', max: 52000},
- { name: 'Marketing (Marketing) ', max: 25000}
-]
+Indicator of radar chart, which is used to assign multiple variables(dimensions) in radar chart. Here is the example.
+
+```js
+indicator: [
+ { name: 'Sales (sales) ', max: 6500},
+ { name: 'Administration (Administration) ', max: 16000, color: 'red'}, // Set the indicator as 'red'
+ { name: 'Information Technology (Information Technology) ', max: 30000},
+ { name: 'Customer Support (Customer Support) ', max: 38000},
+ { name: 'Development (Development) ', max: 52000},
+ { name: 'Marketing (Marketing) ', max: 25000}
+]
```
### name(string)
diff --git a/en/option/component/timeline.md b/en/option/component/timeline.md
index 4531d75..a41924b 100644
--- a/en/option/component/timeline.md
+++ b/en/option/component/timeline.md
@@ -3,100 +3,100 @@
# timeline(Object)
-`timeline` component, which provides functions like switching and playing between multiple ECharts `options`.
-
-Here is an example:
-
-~[600x400](${galleryViewPath}doc-example/mix-timeline-all&edit=1&reset=1)
-
-Different from other components, `timeline` component requires multiple options. If the traditional way of ECharts option is called *atomic option*, then, the option used along with timeline should be call a *compound option* composed with multiple atomic options. For example:
-
-```javascript
-// In the following example, baseOption is an *atomic option*, so as each item in options array.
-// Each of the atomic option follows configuration introduced in this document.
-myChart.setOption(
- {
- baseOption: {
- timeline: {
- ...,
- data: ['2002-01-01', '2003-01-01', '2004-01-01']
- },
- title: {
- subtext: ' Data is from National Bureau of Statistics '
- },
- grid: {...},
- xAxis: [...],
- yAxis: [...],
- series: [
- { // other configurations of series 1
- type: 'bar',
- ...
- },
- { // other configurations of series 2
- type: 'line',
- ...
- },
- { // other configurations of series 3
- type: 'pie',
- ...
- }
- ]
- },
- options: [
- { // it is an option corresponding to '2002-01-01'
- title: {
- text: 'the statistics of the year 2002'
- },
- series: [
- {data: []}, // the data of series 1
- {data: []}, // the data of series 2
- {data: []} // the data of series 3
- ]
- },
- { // it is an option corresponding to '2003-01-01'
- title: {
- text: 'the statistics of the year 2003'
- },
- series: [
- {data: []},
- {data: []},
- {data: []}
- ]
- },
- { // it is an option corresponding to '2004-01-01'
- title: {
- text: 'the statistics of the year 2004'
- },
- series: [
- {data: []},
- {data: []},
- {data: []}
- ]
- }
- ]
- }
-);
-```
-
-In the above example, each item in `timeline.data` corresponds to each `option` of `options` array.
-
-<br>
-**Attention and Best Practice: **
-
-+ Shared configuration items are recommended to be set in `baseOption`. When switching in `timeline`, `option` in corresponding `options` array will be merged with `baseOption` to form the final `option`.
-
-+ In `options` array, if an attribute is configured in one of the options, then, it should also be configured in other options. Otherwise, this attribute will be ignored.
-
-+ `options` in *compound option* doesn't support merge.
-
- That is to say, when calling `chart.setOption(rawOption)` after the first time, if `rawOption` is a *compound option* (meaning that it contains an array of `options`), then the new `rawOption.options` will replace the old one, instead of merging with it. Of course, `rawOption.baseOption` will be merged with that of old option normally.
-
-
-<br>
-**Compatibility with ECharts 2: **
-
-+ ECharts3 doesn't support `timeline.notMerge` parameter any more, which implies *notMerge mode* is no longer supported. If you need this function, you may manage the option in your own program before passing to `setOption(option, true)`.
-
+`timeline` component, which provides functions like switching and playing between multiple ECharts `options`.
+
+Here is an example:
+
+~[600x400](${galleryViewPath}doc-example/mix-timeline-all&edit=1&reset=1)
+
+Different from other components, `timeline` component requires multiple options. If the traditional way of ECharts option is called *atomic option*, then, the option used along with timeline should be call a *compound option* composed with multiple atomic options. For example:
+
+```javascript
+// In the following example, baseOption is an *atomic option*, so as each item in options array.
+// Each of the atomic option follows configuration introduced in this document.
+myChart.setOption(
+ {
+ baseOption: {
+ timeline: {
+ ...,
+ data: ['2002-01-01', '2003-01-01', '2004-01-01']
+ },
+ title: {
+ subtext: ' Data is from National Bureau of Statistics '
+ },
+ grid: {...},
+ xAxis: [...],
+ yAxis: [...],
+ series: [
+ { // other configurations of series 1
+ type: 'bar',
+ ...
+ },
+ { // other configurations of series 2
+ type: 'line',
+ ...
+ },
+ { // other configurations of series 3
+ type: 'pie',
+ ...
+ }
+ ]
+ },
+ options: [
+ { // it is an option corresponding to '2002-01-01'
+ title: {
+ text: 'the statistics of the year 2002'
+ },
+ series: [
+ {data: []}, // the data of series 1
+ {data: []}, // the data of series 2
+ {data: []} // the data of series 3
+ ]
+ },
+ { // it is an option corresponding to '2003-01-01'
+ title: {
+ text: 'the statistics of the year 2003'
+ },
+ series: [
+ {data: []},
+ {data: []},
+ {data: []}
+ ]
+ },
+ { // it is an option corresponding to '2004-01-01'
+ title: {
+ text: 'the statistics of the year 2004'
+ },
+ series: [
+ {data: []},
+ {data: []},
+ {data: []}
+ ]
+ }
+ ]
+ }
+);
+```
+
+In the above example, each item in `timeline.data` corresponds to each `option` of `options` array.
+
+<br>
+**Attention and Best Practice: **
+
++ Shared configuration items are recommended to be set in `baseOption`. When switching in `timeline`, `option` in corresponding `options` array will be merged with `baseOption` to form the final `option`.
+
++ In `options` array, if an attribute is configured in one of the options, then, it should also be configured in other options. Otherwise, this attribute will be ignored.
+
++ `options` in *compound option* doesn't support merge.
+
+ That is to say, when calling `chart.setOption(rawOption)` after the first time, if `rawOption` is a *compound option* (meaning that it contains an array of `options`), then the new `rawOption.options` will replace the old one, instead of merging with it. Of course, `rawOption.baseOption` will be merged with that of old option normally.
+
+
+<br>
+**Compatibility with ECharts 2: **
+
++ ECharts3 doesn't support `timeline.notMerge` parameter any more, which implies *notMerge mode* is no longer supported. If you need this function, you may manage the option in your own program before passing to `setOption(option, true)`.
+
+ Comparing ECharts 3 with ECharts 2, the definition location of timeline attributes are different. The one in ECharts 3 is moved to `baseOption` and is regarded as a seperate component, which is also compatible with the timeline definition location of ECharts 2. But it is not recommended to do so.
## show(boolean) = true
@@ -109,13 +109,13 @@ This attribute has only one valid value as `slider` by now. You don't have to ch
## axisType(string) = 'time'
-Type of axis, whose values may be:
-
-+ `'value'`
- Numeric axis, which is suitable for continuous data.
-+ `'category'`
- Category axis, which is suitable for category data.
-+ `'time'`
+Type of axis, whose values may be:
+
++ `'value'`
+ Numeric axis, which is suitable for continuous data.
++ `'category'`
+ Category axis, which is suitable for category data.
++ `'time'`
Time axis, which is suitable for continuous time data. Compared with value axis, time axis is equipped with time formatting function and has a different method when calculating axis ticks. For example, for time axis, axis ticks may vary in choosing unit as month, week, date, or hour based on the range of data.
## currentIndex(number) = 0
@@ -158,9 +158,9 @@ Position of the play button, whose valid values are `'left'` and `'right'`.
## orient(string) = 'horizontal'
-Orientation of the component, whose valid values are:
-
-+ `'vertical'`: vertical layout.
+Orientation of the component, whose valid values are:
+
++ `'vertical'`: vertical layout.
+ `'horizontal'`: horizontal layout.
## inverse(boolean) = false
@@ -193,28 +193,28 @@ Label axis, `emphasis` is the highlighted style of text. For instance, text styl
### position(string|number) = 'auto'
-Configurations:
-
-+ `'auto'`:
- Automatic layout.
-
-+ `'left'`:
- Put it along the left margin.
- It is valid when [timline.orient](~timeline.orient) is set as `'horizontal'` .
-
-+ `'right'`:
- Put it along the right margin.
- It is valid when [timline.orient](~timeline.orient) is set as `'horizontal'`.
-
-+ `'top'`:
- Put it along the margin of the top.
- It is valid when [timline.orient](~timeline.orient) is set as `'vertical'`.
-
-+ `'bottom'`:
- Put it along the margin of the bottom.
- It is valid when [timline.orient](~timeline.orient) is set as `'vertical'`.
-
-+ `number`:
+Configurations:
+
++ `'auto'`:
+ Automatic layout.
+
++ `'left'`:
+ Put it along the left margin.
+ It is valid when [timline.orient](~timeline.orient) is set as `'horizontal'` .
+
++ `'right'`:
+ Put it along the right margin.
+ It is valid when [timline.orient](~timeline.orient) is set as `'horizontal'`.
+
++ `'top'`:
+ Put it along the margin of the top.
+ It is valid when [timline.orient](~timeline.orient) is set as `'vertical'`.
+
++ `'bottom'`:
+ Put it along the margin of the bottom.
+ It is valid when [timline.orient](~timeline.orient) is set as `'vertical'`.
+
++ `number`:
When it is assigned to be a a number value, it indicates the distance between `label` and axis. If it is set to be `0` , `label` would be at the same position with axis. Negative value is valid for the other side of the axis.
{{ use: partial-timeline-label(
@@ -318,10 +318,10 @@ Interval between *control button*, in pixels (px).
### position(string) = 'left'
-the location of *control button*.
-
-+ When [timeline.orient](~timeline.orient) is set to be `'horizontal'`, `'left'` and `'right'`are valid.
-
+the location of *control button*.
+
++ When [timeline.orient](~timeline.orient) is set to be `'horizontal'`, `'left'` and `'right'`are valid.
+
+ When [timeline.orient](~timeline.orient) is set to be `'vertical'`, `'top'` and `'bottom'`are valid.
### playIcon(string)
@@ -378,41 +378,41 @@ Width of button border.
## data(Array)
-`timeline` data. Each item of `Array` can be a instant value. If you need to set style individually for a data item, the `data` item should be written as `Object`. In then `Object`, the attribute of `value` is numerical value. Other attributes, such as shown the examples below, could cover the attribute configurations in `timeline`.
-
-
-
-as follows:
-
-```javascript
-[
- '2002-01-01',
- '2003-01-01',
- '2004-01-01',
- {
- value: '2005-01-01',
- tooltip: { // enables `tooltip` to be displayed as mouse hovering to this item.
- formatter: '{b} xxxx'
- },
- symbol: 'diamond', // the special setting of this item's symbol.
- symbolSize: 16 // the special setting of this item's size.
- },
- '2006-01-01',
- '2007-01-01',
- '2008-01-01',
- '2009-01-01',
- '2010-01-01',
- {
- value: '2011-01-01',
- tooltip: { // enables `tooltip` to be displayed as mouse hovering to this item.
- formatter: function (params) {
- return params.name + 'xxxx';
- }
- },
- symbol: 'diamond',
- symbolSize: 18
- },
-]
+`timeline` data. Each item of `Array` can be a instant value. If you need to set style individually for a data item, the `data` item should be written as `Object`. In then `Object`, the attribute of `value` is numerical value. Other attributes, such as shown the examples below, could cover the attribute configurations in `timeline`.
+
+
+
+as follows:
+
+```javascript
+[
+ '2002-01-01',
+ '2003-01-01',
+ '2004-01-01',
+ {
+ value: '2005-01-01',
+ tooltip: { // enables `tooltip` to be displayed as mouse hovering to this item.
+ formatter: '{b} xxxx'
+ },
+ symbol: 'diamond', // the special setting of this item's symbol.
+ symbolSize: 16 // the special setting of this item's size.
+ },
+ '2006-01-01',
+ '2007-01-01',
+ '2008-01-01',
+ '2009-01-01',
+ '2010-01-01',
+ {
+ value: '2011-01-01',
+ tooltip: { // enables `tooltip` to be displayed as mouse hovering to this item.
+ formatter: function (params) {
+ return params.name + 'xxxx';
+ }
+ },
+ symbol: 'diamond',
+ symbolSize: 18
+ },
+]
```
diff --git a/en/option/component/title.md b/en/option/component/title.md
index ae6590e..78a07b6 100644
--- a/en/option/component/title.md
+++ b/en/option/component/title.md
@@ -3,11 +3,11 @@
# title(Object)
-Title component, including main title and subtitle.
-
-In ECharts 2.x, a single instance of ECharts could contains one title component at most. However, in ECharts 3, there could be one or more than one title components. It is more useful when multiple diagrams in one instance all need titles.
-
-**Here are some instances of different animation easing functions, among which every instance has a title component: **
+Title component, including main title and subtitle.
+
+In ECharts 2.x, a single instance of ECharts could contains one title component at most. However, in ECharts 3, there could be one or more than one title components. It is more useful when multiple diagrams in one instance all need titles.
+
+**Here are some instances of different animation easing functions, among which every instance has a title component: **
~[700x400](${galleryViewPath}line-easing&edit=1&reset=1)
{{ use: partial-component-id(
@@ -28,12 +28,12 @@ The hyper link of main title text.
## target(string) = 'blank'
-Open the hyper link of main title in specified tab.
-
-**options: **
-
-+ `'self'` opening it in current tab
-
+Open the hyper link of main title in specified tab.
+
+**options: **
+
++ `'self'` opening it in current tab
+
+ `'blank'` opening it in a new tab
## textStyle(Object)
@@ -59,10 +59,10 @@ The hyper link of subtitle text.
## subtarget(string) = 'blank'
-Open the hyper link of subtitle in specified tab, options:
-
-+ `'self'` opening it in current tab
-
+Open the hyper link of subtitle in specified tab, options:
+
++ `'self'` opening it in current tab
+
+ `'blank'` opening it in a new tab
## subtextStyle(Object)
@@ -76,14 +76,14 @@ Open the hyper link of subtitle in specified tab, options:
## textAlign(string) = 'auto'
-The horizontal align of the component (including "text" and "subtext").
-
+The horizontal align of the component (including "text" and "subtext").
+
Optional values: `'auto'`, `'left'`, `'right'`, `'center'`.
## textVerticalAlign(string) = 'auto'
-The vertical align of the component (including "text" and "subtext").
-
+The vertical align of the component (including "text" and "subtext").
+
Optional values: `'auto'`, `'top'`, `'bottom'`, `'middle'`.
## triggerEvent(boolean) = false
diff --git a/en/option/component/toolbox.md b/en/option/component/toolbox.md
index 50a090c..e2ee620 100644
--- a/en/option/component/toolbox.md
+++ b/en/option/component/toolbox.md
@@ -69,10 +69,10 @@ Whether to show the tool.
# toolbox(Object)
-A group of utility tools, which includes [export](~toolbox.feature.saveAsImage), [data view](~toolbox.feature.dataView), [dynamic type switching](~toolbox.feature.magicType), [data area zooming](~toolbox.feature.dataZoom), and [reset](~toolbox.feature.reset).
-
-**Example: **
-
+A group of utility tools, which includes [export](~toolbox.feature.saveAsImage), [data view](~toolbox.feature.dataView), [dynamic type switching](~toolbox.feature.magicType), [data area zooming](~toolbox.feature.dataZoom), and [reset](~toolbox.feature.reset).
+
+**Example: **
+
~[600x400](${galleryViewPath}line-marker&reset=1&edit=1)
{{ use: partial-component-id(
@@ -85,10 +85,10 @@ Whether to show toolbox component.
## orient(string) = 'horizontal'
-The layout orientation of toolbox's icon.
-
-Options:
-+ 'horizontal'
+The layout orientation of toolbox's icon.
+
+Options:
++ 'horizontal'
+ 'vertical'
## itemSize(number) = 15
@@ -105,35 +105,35 @@ Whether to show the title of each tool icon when mouse hovers.
## feature(Object)
-The configuration item for each tool.
-
-Besides the tools we provide, user-defined toolbox is also supported.
-
-Notes: User-defined tool name could only start with `my`, like `myTool1` and `myTool2` in the below example:
-
-```javascript
-{
- toolbox: {
- feature: {
- myTool1: {
- show: true,
- title: 'custom extension method 1',
- icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423. [...]
- onclick: function (){
- alert('myToolHandler1')
- }
- },
- myTool2: {
- show: true,
- title: 'custom extension method',
- icon: 'image://http://echarts.baidu.com/images/favicon.png',
- onclick: function (){
- alert('myToolHandler2')
- }
- }
- }
- }
-}
+The configuration item for each tool.
+
+Besides the tools we provide, user-defined toolbox is also supported.
+
+Notes: User-defined tool name could only start with `my`, like `myTool1` and `myTool2` in the below example:
+
+```javascript
+{
+ toolbox: {
+ feature: {
+ myTool1: {
+ show: true,
+ title: 'custom extension method 1',
+ icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423. [...]
+ onclick: function (){
+ alert('myToolHandler1')
+ }
+ },
+ myTool2: {
+ show: true,
+ title: 'custom extension method',
+ icon: 'image://http://echarts.baidu.com/images/favicon.png',
+ onclick: function (){
+ alert('myToolHandler2')
+ }
+ }
+ }
+ }
+}
```
### saveAsImage(Object)
@@ -142,9 +142,9 @@ Save as image.
#### type(string) = 'png'
-File suffix of the image saved.
-
-+ If the `renderer` is set to be `'canvas'` when chart [initialized](api.html#echarts.init) (default), then `'png'` (default) and `'jpeg'` are supported.
+File suffix of the image saved.
+
++ If the `renderer` is set to be `'canvas'` when chart [initialized](api.html#echarts.init) (default), then `'png'` (default) and `'jpeg'` are supported.
+ If the `renderer` is set to be `'svg'` when when chart [initialized](api.html#echarts.init), then only `'svg'` is supported for `type` (`'svg'` type is supported since `v4.8.0`).
#### name(string)
@@ -193,40 +193,40 @@ Whether it is read-only.
#### optionToContent(Function)
-```js
-(option:Object) => HTMLDomElement|string
-```
-
-Define a function to present dataView. It is used to replace default textarea for richer data editing. It can return a DOM object, or an HTML string.
-
-For example:
-```js
-optionToContent: function(opt) {
- var axisData = opt.xAxis[0].data;
- var series = opt.series;
- var table = '<table style="width:100%;text-align:center"><tbody><tr>'
- + '<td>Time:</td>'
- + '<td>' + series[0].name + '</td>'
- + '<td>' + series[1].name + '</td>'
- + '</tr>';
- for (var i = 0, l = axisData.length; i < l; i++) {
- table += '<tr>'
- + '<td>' + axisData[i] + '</td>'
- + '<td>' + series[0].data[i] + '</td>'
- + '<td>' + series[1].data[i] + '</td>'
- + '</tr>';
- }
- table += '</tbody></table>';
- return table;
-}
+```js
+(option:Object) => HTMLDomElement|string
+```
+
+Define a function to present dataView. It is used to replace default textarea for richer data editing. It can return a DOM object, or an HTML string.
+
+For example:
+```js
+optionToContent: function(opt) {
+ var axisData = opt.xAxis[0].data;
+ var series = opt.series;
+ var table = '<table style="width:100%;text-align:center"><tbody><tr>'
+ + '<td>Time:</td>'
+ + '<td>' + series[0].name + '</td>'
+ + '<td>' + series[1].name + '</td>'
+ + '</tr>';
+ for (var i = 0, l = axisData.length; i < l; i++) {
+ table += '<tr>'
+ + '<td>' + axisData[i] + '</td>'
+ + '<td>' + series[0].data[i] + '</td>'
+ + '<td>' + series[1].data[i] + '</td>'
+ + '</tr>';
+ }
+ table += '</tbody></table>';
+ return table;
+}
```
#### contentToOption(Function)
-```js
-(container:HTMLDomElement, option:Object) => Object
-```
-
+```js
+(container:HTMLDomElement, option:Object) => Object
+```
+
When optionToContent is used, if you want to support refreshing chart after data changes, you need to implement the logic to merge options in this function.
#### lang(Array) = ['data view', 'turn off', 'refresh']
@@ -307,14 +307,14 @@ Style of brush rectangle.
### magicType(Object)
-Magic type switching.
-**示例: **
-```js
-feature: {
- magicType: {
- type: ['line', 'bar', 'stack', 'tiled']
- }
-}
+Magic type switching.
+**示例: **
+```js
+feature: {
+ magicType: {
+ type: ['line', 'bar', 'stack', 'tiled']
+ }
+}
```
#### show(boolean) = true
@@ -387,19 +387,19 @@ Series list for each type.
### brush(Object)
-Brush-selecting icon.
-
+Brush-selecting icon.
+
It can also be configured at [brush.toolbox](~brush.toolbox).
#### type(Array)
-Icons used, whose values are:
-
-+ `'rect'`: Enabling selecting with rectangle area.
-+ `'polygon'`: Enabling selecting with any shape.
-+ `'lineX'`: Enabling horizontal selecting.
-+ `'lineY'`: Enabling vertical selecting.
-+ `'keep'`: Switching between *single selecting* and *multiple selecting*. The latter one can select multiple areas, while the former one cancels previous selection.
+Icons used, whose values are:
+
++ `'rect'`: Enabling selecting with rectangle area.
++ `'polygon'`: Enabling selecting with any shape.
++ `'lineX'`: Enabling horizontal selecting.
++ `'lineY'`: Enabling vertical selecting.
++ `'keep'`: Switching between *single selecting* and *multiple selecting*. The latter one can select multiple areas, while the former one cancels previous selection.
+ `'clear'`: Clearing all selection.
#### icon(Object)
@@ -457,40 +457,40 @@ Title.
## tooltip(Object)
-Tooltip configuration for toolbox tooltip, which is similar to [tooltip](~tooltip). It is not shown by default. If you wish to set special style for toolbox icon label (especially when using CSS to control text style), you may set as the following example:
-
-
-```js
-option = {
- tooltip: {
- show: true // include tooltip component for the feature
- },
- toolbox: {
- show: true,
- showTitle: false, // hide the default text so they don't overlap each other
- feature: {
- saveAsImage: {
- show: true,
- title: 'Save As Image'
- },
- dataView: {
- show: true,
- title: 'Data View'
- },
- },
- tooltip: { // same as option.tooltip
- show: true,
- formatter: function (param) {
- return return '<div>' + param.title + '</div>'; // user-defined DOM structure
- },
- backgroundColor: '#222',
- textStyle: {
- fontSize: 12,
- },
- extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' // user-defined CSS styles
- }
- },
- ...
-}
+Tooltip configuration for toolbox tooltip, which is similar to [tooltip](~tooltip). It is not shown by default. If you wish to set special style for toolbox icon label (especially when using CSS to control text style), you may set as the following example:
+
+
+```js
+option = {
+ tooltip: {
+ show: true // include tooltip component for the feature
+ },
+ toolbox: {
+ show: true,
+ showTitle: false, // hide the default text so they don't overlap each other
+ feature: {
+ saveAsImage: {
+ show: true,
+ title: 'Save As Image'
+ },
+ dataView: {
+ show: true,
+ title: 'Data View'
+ },
+ },
+ tooltip: { // same as option.tooltip
+ show: true,
+ formatter: function (param) {
+ return return '<div>' + param.title + '</div>'; // user-defined DOM structure
+ },
+ backgroundColor: '#222',
+ textStyle: {
+ fontSize: 12,
+ },
+ extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' // user-defined CSS styles
+ }
+ },
+ ...
+}
```
diff --git a/en/option/component/tooltip.md b/en/option/component/tooltip.md
index 2c2eb58..a330b4d 100644
--- a/en/option/component/tooltip.md
+++ b/en/option/component/tooltip.md
@@ -3,8 +3,8 @@
# tooltip(Object)
-Tooltip component.
-
+Tooltip component.
+
---
{{ use: partial-tooltip-introduction() }}
@@ -19,30 +19,30 @@ Whether to show the tooltip floating layer, whose default value is true. It shou
## alwaysShowContent(boolean) = false
-Whether to show tooltip content all the time. By default, it will be hidden [after some time](~tooltip.hideDelay). It can be set to be `true` to preserve displaying.
-
+Whether to show tooltip content all the time. By default, it will be hidden [after some time](~tooltip.hideDelay). It can be set to be `true` to preserve displaying.
+
This attribute is newly added to ECharts 3.0.
## triggerOn(string) = 'mousemove|click'
-Conditions to trigger tooltip. Options:
-
-+ `'mousemove'`
-
- Trigger when mouse moves.
-
-+ `'click'`
-
- Trigger when mouse clicks.
-
-+ `'mousemove|click'`
-
- Trigger when mouse clicks and moves.
-
-+ `'none'`
-
- Do not triggered by `'mousemove'` and `'click'`. Tooltip can be triggered and hidden manually by calling [action.tooltip.showTip](api.html#action.tooltip.showTip) and [action.tooltip.hideTip](api.html#action.tooltip.hideTip). It can also be triggered by [axisPointer.handle](~xAxis.axisPointer.handle) in this case.
-
+Conditions to trigger tooltip. Options:
+
++ `'mousemove'`
+
+ Trigger when mouse moves.
+
++ `'click'`
+
+ Trigger when mouse clicks.
+
++ `'mousemove|click'`
+
+ Trigger when mouse clicks and moves.
+
++ `'none'`
+
+ Do not triggered by `'mousemove'` and `'click'`. Tooltip can be triggered and hidden manually by calling [action.tooltip.showTip](api.html#action.tooltip.showTip) and [action.tooltip.hideTip](api.html#action.tooltip.hideTip). It can also be triggered by [axisPointer.handle](~xAxis.axisPointer.handle) in this case.
+
This attribute is new to ECharts 3.0.
## showDelay(number) = 0
@@ -63,8 +63,8 @@ Render mode for tooltip. By default, it is set to be `'html'` so that extra DOM
## confine(boolean) = false
-Whether confine tooltip content in the view rect of chart instance.
-
+Whether confine tooltip content in the view rect of chart instance.
+
Useful when tooltip is cut because of `'overflow: hidden'` set on outer dom of chart instance, or because of narrow screen on mobile.
## appendToBody(boolean) = false
@@ -73,12 +73,12 @@ Useful when tooltip is cut because of `'overflow: hidden'` set on outer dom of c
version = "4.7.0"
) }}
-Whether to append the tooltip DOM element as a child of the `<body>` of the HTML page, when using [renderMode](~tooltip.renderMode) `'html'`.
-
-By default `false`, means that the tooltip DOM element will be one of a descendant of its echarts DOM container. But that means that the tooltip might be cut when overflow the container if some of the ancestors DOM element of the echarts container are styled with `overflow: hidden`. This case could also be resolved by setting [tooltip.confine](~tooltip.confine), but it might not suitable for all scenarios.
-
-Here we provide `appendToBody: true` to auto append the tooltip element to `<body>`, which is a common way to resolve this kind of issue. But `true` is not set as a default value because to void to bring break change for some cases where tooltip is deeply customized and to void some unexpected bad cases.
-
+Whether to append the tooltip DOM element as a child of the `<body>` of the HTML page, when using [renderMode](~tooltip.renderMode) `'html'`.
+
+By default `false`, means that the tooltip DOM element will be one of a descendant of its echarts DOM container. But that means that the tooltip might be cut when overflow the container if some of the ancestors DOM element of the echarts container are styled with `overflow: hidden`. This case could also be resolved by setting [tooltip.confine](~tooltip.confine), but it might not suitable for all scenarios.
+
+Here we provide `appendToBody: true` to auto append the tooltip element to `<body>`, which is a common way to resolve this kind of issue. But `true` is not set as a default value because to void to bring break change for some cases where tooltip is deeply customized and to void some unexpected bad cases.
+
Note that it also works when CSS transform used.
## transitionDuration(number) = 0.4
diff --git a/en/option/component/visual-map-continuous.md b/en/option/component/visual-map-continuous.md
index faa31f9..83f3f4d 100644
--- a/en/option/component/visual-map-continuous.md
+++ b/en/option/component/visual-map-continuous.md
@@ -3,13 +3,13 @@
# visualMap.continuous(Object)
-**Continuous visualMap component (visualMapContinuous)**
-
- (See [the introduction to visual Map component (visualMap)](~visualMap))
-
-You can set [visualMap.calculable](~visualMap.calculable) to show or hide the handles, which are used to change the selected range in `visualMapContinuous`.
-
-<br>
+**Continuous visualMap component (visualMapContinuous)**
+
+ (See [the introduction to visual Map component (visualMap)](~visualMap))
+
+You can set [visualMap.calculable](~visualMap.calculable) to show or hide the handles, which are used to change the selected range in `visualMapContinuous`.
+
+<br>
<br>
## type(string) = continuous
@@ -22,83 +22,83 @@ Used to determine that it is a continuous visualMap component.
## min(number)
-Specify the min dataValue for the visualMap component. `[visualMap.min, visualMax.max]` make up the domain of viusul mapping.
-
+Specify the min dataValue for the visualMap component. `[visualMap.min, visualMax.max]` make up the domain of viusul mapping.
+
Notice that `min` and `max` should be specified explicitly, and be `[0, 200]` by default, but not `dataMin` and `dataMax` in series.data.
## max(number)
-Specify the max dataValue for the visualMap component. `[visualMap.min, visualMax.max]` make up the domain of viusul mapping.
-
+Specify the max dataValue for the visualMap component. `[visualMap.min, visualMax.max]` make up the domain of viusul mapping.
+
Notice that `min` and `max` should be specified explicitly, and be `[0, 200]` by default, but not `dataMin` and `dataMax` in series.data.
## range(Array)
-Specify selected range, that is, the dataValue corresponding to the two handles. For example:
-
-```javascript
-chart.setOption({
- visualMap: {
- min: 0,
- max: 100,
- // dataValue corresponding to the two handles.
- range: [4, 15],
- ...
- }
-});
-```
-
-**auto-adaption when min or max is modified by setOption**
-
-+ If `range` is not set (or set to null or undefined)
-
-```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: 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].
-```
-
-+ If `range` is set explicitly, such as [10, 300]
-
-```javascript
-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.
-
-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].
-
-```
-
+Specify selected range, that is, the dataValue corresponding to the two handles. For example:
+
+```javascript
+chart.setOption({
+ visualMap: {
+ min: 0,
+ max: 100,
+ // dataValue corresponding to the two handles.
+ range: [4, 15],
+ ...
+ }
+});
+```
+
+**auto-adaption when min or max is modified by setOption**
+
++ If `range` is not set (or set to null or undefined)
+
+```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: 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].
+```
+
++ If `range` is set explicitly, such as [10, 300]
+
+```javascript
+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.
+
+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].
+
+```
+
`range` gotten by `getOption` is always an `Array`, but not `null` or `undefined`.
## calculable(boolean) = false
-Whether show handles, which can be dragged to adjust "selected range".
-
+Whether show handles, which can be dragged to adjust "selected range".
+
Notes: In order to be compatible with ECharts2, the rule, which seems to be a little odd, is retained: when [visualMap.type](~visualMap.type) is not set, and [visualMap.calculable](~visualMap-continuous.calculable) was set to be `true`, [visualMap.type](~visualMap.type) will be automatically set as `'continuous'`, regardless of some settings such as [visualMap-piecewise.splitNumber](~visualMap-piecewise.splitNumber). Therefore, it is recommended to set [visualMap.type](~visualMap.type) e [...]
## realtime(boolean) = true
-Whether to update view in real time when dragging a handle.
-
-+ If `ture`, the chart view will be updated in real time when dragging.
-
+Whether to update view in real time when dragging a handle.
+
++ If `ture`, the chart view will be updated in real time when dragging.
+
+ If `false`, the chart view will be updated at the end of the handle dragging.
## inverse(boolean) = false
-Whether to inverse the layout of visualMap component.
-
-As `inverse` is `false`, the layout direction is the same as [cartesian coordinate](~grid). That is:
-
-+ As [visualMap.orient](~visualMap.orient) is `'vertical'`, large data are placed at the top while small at the bottom.
-+ As [visualMap.orient](~visualMap.orient) is `'horizontal'`, large data are placed on the right while small on the left.
-
+Whether to inverse the layout of visualMap component.
+
+As `inverse` is `false`, the layout direction is the same as [cartesian coordinate](~grid). That is:
+
++ As [visualMap.orient](~visualMap.orient) is `'vertical'`, large data are placed at the top while small at the bottom.
++ As [visualMap.orient](~visualMap.orient) is `'horizontal'`, large data are placed on the right while small on the left.
+
As `inverse` is `true`, the result is opposite.
## precision(number) = 0
@@ -115,18 +115,18 @@ The height of the main bar of visualMap component.
## align(string) = 'auto'
-Specify the position of handles and labels, against the main bar. The possible values are:
-
-+ `'auto'` Decide automatically.
-+ `'left'` The handles and labels are on the right, which is valid when `orient` is set as `'horizontal'`.
-+ `'right'` The handles and labels are on the left, which is valid when `orient` is set as `'horizontal'`.
-+ `'top'` the handles and labels are at the bottom, which is valid when `orient` is set as `'vertical'`.
+Specify the position of handles and labels, against the main bar. The possible values are:
+
++ `'auto'` Decide automatically.
++ `'left'` The handles and labels are on the right, which is valid when `orient` is set as `'horizontal'`.
++ `'right'` The handles and labels are on the left, which is valid when `orient` is set as `'horizontal'`.
++ `'top'` the handles and labels are at the bottom, which is valid when `orient` is set as `'vertical'`.
+ `'bottom'` the handles and labels are at the top, which is valid when `orient` is set as `'vertical'`.
## text(Array) = null
-The label text on both ends, such as `['High', 'Low']`. [sample](${galleryEditorPath}doc-example/map-visualMap-continuous-text&edit=1&reset=1).
-
+The label text on both ends, such as `['High', 'Low']`. [sample](${galleryEditorPath}doc-example/map-visualMap-continuous-text&edit=1&reset=1).
+
You can understand the order of items in `text` array just by a simple trial. See [visualMap.inverse](~visualMap.inverse).
## textGap(number) = 10
@@ -139,15 +139,15 @@ The distance between the ends of the main bar and the label, with unit px. See [
## formatter(string|Function)
-the formatter tool for label.
-
-+ If it was set as a `string`, it refers to a template, for instance: `aaaa{value}bbbb`, where `{value}` represents the value of the edge of the seleted range.
-
-+ If it was set as a `Function`, it refers to a callback function, for instance:
-
-```javascript
-formatter: function (value) {
- return 'aaaa' + value + 'bbbb';
-}
+the formatter tool for label.
+
++ If it was set as a `string`, it refers to a template, for instance: `aaaa{value}bbbb`, where `{value}` represents the value of the edge of the seleted range.
+
++ If it was set as a `Function`, it refers to a callback function, for instance:
+
+```javascript
+formatter: function (value) {
+ return 'aaaa' + value + 'bbbb';
+}
```
diff --git a/en/option/component/visual-map-piecewise.md b/en/option/component/visual-map-piecewise.md
index c0d0b1b..7ffb7ff 100644
--- a/en/option/component/visual-map-piecewise.md
+++ b/en/option/component/visual-map-piecewise.md
@@ -3,22 +3,22 @@
# visualMap.piecewise(Object)
-**Piecewise visualMap component (visualMapPiecewise) **
-
- (Reference to [the introduction of visual Map component (visualMap)](~visualMap))
-
-Sample:
-~[600x400](${galleryViewPath}doc-example/scatter-visualMap-piecewise&edit=1&reset=1)
-
-
-Piecewise visualMap component works in one of the three modes:
-
-+ **CONTINUOUS-AVERAGE**: The series.data is continuous and is divided into pieces averagely according to [visualMap-piecewise.splitNumber](~visualMap-piecewise.splitNumber).
-+ **CONTINUOUS-CUSTOMIZED**: The series.data is continuous and is divided into pieces according to the given rule defined in [visualMap-piecewise.pieces](~visualMap-piecewise.pieces).
-+ **CATEGORY**: The series.data is discrete and is categorized according to [visualMap-piecewise.categories](~visualMap-piecewise.categories).
-
-
-<br>
+**Piecewise visualMap component (visualMapPiecewise) **
+
+ (Reference to [the introduction of visual Map component (visualMap)](~visualMap))
+
+Sample:
+~[600x400](${galleryViewPath}doc-example/scatter-visualMap-piecewise&edit=1&reset=1)
+
+
+Piecewise visualMap component works in one of the three modes:
+
++ **CONTINUOUS-AVERAGE**: The series.data is continuous and is divided into pieces averagely according to [visualMap-piecewise.splitNumber](~visualMap-piecewise.splitNumber).
++ **CONTINUOUS-CUSTOMIZED**: The series.data is continuous and is divided into pieces according to the given rule defined in [visualMap-piecewise.pieces](~visualMap-piecewise.pieces).
++ **CATEGORY**: The series.data is discrete and is categorized according to [visualMap-piecewise.categories](~visualMap-piecewise.categories).
+
+
+<br>
<br>
## type(string) = piecewise
@@ -31,116 +31,116 @@ Used to determine it is a piecewise visualMap component.
## splitNumber(number) = 5
-Continuous data can be divide into pieces averagely according to splitNumber, that is, if splitNumber is 5, data will be sliced into 5 pieces.
-
-The range of continuous data should be defined by [max](~visualMap-piecewise.max) and [min](~visualMap-piecewise.min).
-
+Continuous data can be divide into pieces averagely according to splitNumber, that is, if splitNumber is 5, data will be sliced into 5 pieces.
+
+The range of continuous data should be defined by [max](~visualMap-piecewise.max) and [min](~visualMap-piecewise.min).
+
If [visualMap-piecewise.pieces](~visualMap-piecewise.pieces) or [visualMap-piecewise.categories](~visualMap-piecewise.categories) is set up, the `splitNumber` will not be used any more.
## pieces(Array)
-Used to customize how to slice continuous data, and some specific view style for some pieces. For instance:
-
-```javascript
-pieces: [
- // Range of a piece can be specified by property min and max,
- // where min will be set as -Infinity if ignored,
- // and max will be set as Infinity if ignored.
- {min: 1500},
- {min: 900, max: 1500},
- {min: 310, max: 1000},
- {min: 200, max: 300},
- // Label of the piece can be specified.
- {min: 10, max: 200, label: '10 to 200 (custom label) '},
- // Color of the piece can be specified.
- {value: 123, label: '123 (custom special color) ', color: 'grey'},
- {max: 5}
-]
-```
-
+Used to customize how to slice continuous data, and some specific view style for some pieces. For instance:
+
+```javascript
+pieces: [
+ // Range of a piece can be specified by property min and max,
+ // where min will be set as -Infinity if ignored,
+ // and max will be set as Infinity if ignored.
+ {min: 1500},
+ {min: 900, max: 1500},
+ {min: 310, max: 1000},
+ {min: 200, max: 300},
+ // Label of the piece can be specified.
+ {min: 10, max: 200, label: '10 to 200 (custom label) '},
+ // Color of the piece can be specified.
+ {value: 123, label: '123 (custom special color) ', color: 'grey'},
+ {max: 5}
+]
+```
+
These visual channel can be customized in each piece:
{{ use: partial-visual-map-visual-type() }}
-[Sample](${galleryEditorPath}doc-example/map-visualMap-pieces&edit=1&reset=1)
-
- (Notes: In ECharts2, `pieces` is called `splitList`, which is retained in ECharts3 for compatibility. But `pieces` is recommended.)
-
+[Sample](${galleryEditorPath}doc-example/map-visualMap-pieces&edit=1&reset=1)
+
+ (Notes: In ECharts2, `pieces` is called `splitList`, which is retained in ECharts3 for compatibility. But `pieces` is recommended.)
+
You would realize the sequence in `pieces` by a simple trial. See more detailed rules in [visualMap.inverse](~visualMap.inverse).
## categories(Array)
-When dataValues in series.data (specified by [visualMap-piecewise.dimension](~visualMap-piecewise.dimension)) are discrete (or also known as category data or enumerable data), and we intend to perform **Table Mapping** from dataValue to visual channels, `categories` is used to describe the entire enumeration of data. For instance:
-
-```javascript
-categories: [
- 'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
-],
-```
-
-[Sample](${galleryEditorPath}doc-example/scatter-visualMap-categories&edit=1&reset=1)
-
+When dataValues in series.data (specified by [visualMap-piecewise.dimension](~visualMap-piecewise.dimension)) are discrete (or also known as category data or enumerable data), and we intend to perform **Table Mapping** from dataValue to visual channels, `categories` is used to describe the entire enumeration of data. For instance:
+
+```javascript
+categories: [
+ 'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
+],
+```
+
+[Sample](${galleryEditorPath}doc-example/scatter-visualMap-categories&edit=1&reset=1)
+
You would realize the sequence in `categories` by a simple trial. See more detailed rules in [visualMap.inverse](~visualMap.inverse).
## min(number)
-Specify the min dataValue for the visualMap component. `[visualMap.min, visualMax.max]` make up the domain of viusul mapping.
-
-In **CONTINUOUS-CUSTOMIZED** mode (i.e., [visualMap-piecewise.pieces](~visualMap-piecewise.pieces) is used) or **CATEGORY** mode (i.e., [visualMap-piecewise.categories](~visualMap-piecewise.categories) is used), `max` and `min` doesn't need to be specified.
-
+Specify the min dataValue for the visualMap component. `[visualMap.min, visualMax.max]` make up the domain of viusul mapping.
+
+In **CONTINUOUS-CUSTOMIZED** mode (i.e., [visualMap-piecewise.pieces](~visualMap-piecewise.pieces) is used) or **CATEGORY** mode (i.e., [visualMap-piecewise.categories](~visualMap-piecewise.categories) is used), `max` and `min` doesn't need to be specified.
+
In **CONTINUOUS-AVERAGE** mode (i.e., [visualMap-piecewise.splitNumber](~visualMap-piecewise.splitNumber) is used), they should be specified explicitly, and be `[0, 200]` by default, but not `dataMin` and `dataMax` in series.data.
## max(number)
-Specify the max dataValue for the visualMap component. `[visualMap.min, visualMax.max]` make up the domain of viusul mapping.
-
-In **CONTINUOUS-CUSTOMIZED** mode (i.e., [visualMap-piecewise.pieces](~visualMap-piecewise.pieces) is used) or **CATEGORY** mode (i.e., [visualMap-piecewise.categories](~visualMap-piecewise.categories) is used), `max` and `min` doesn't need to be specified.
-
+Specify the max dataValue for the visualMap component. `[visualMap.min, visualMax.max]` make up the domain of viusul mapping.
+
+In **CONTINUOUS-CUSTOMIZED** mode (i.e., [visualMap-piecewise.pieces](~visualMap-piecewise.pieces) is used) or **CATEGORY** mode (i.e., [visualMap-piecewise.categories](~visualMap-piecewise.categories) is used), `max` and `min` doesn't need to be specified.
+
In **CONTINUOUS-AVERAGE** mode (i.e., [visualMap-piecewise.splitNumber](~visualMap-piecewise.splitNumber) is used), they should be specified explicitly, and be `[0, 200]` by default, but not `dataMin` and `dataMax` in series.data.
## minOpen(boolean)
-This option works when `type` is `piecewise` and `min`/`max`/`splitNumber` are set.
-
+This option works when `type` is `piecewise` and `min`/`max`/`splitNumber` are set.
+
If it is set as `true`, an extra piece labeled with "< min" will show.
## maxOpen(boolean)
-This option works when `type` is `piecewise` and `min`/`max`/`splitNumber` are set.
-
+This option works when `type` is `piecewise` and `min`/`max`/`splitNumber` are set.
+
If it is set as `true`, an extra piece labeled with "> max" will show.
## selectedMode(string) = 'multiple'
-Selected Mode could be:
-
-+ `'multiple'` (multiple selection).
+Selected Mode could be:
+
++ `'multiple'` (multiple selection).
+ `'single'` (single selection).
## inverse(boolean) = false
-Whether to inverse the layout of visualMap component.
-
-+ In **CONTINUOUS-AVERAGE** mode (i.e., [visualMap-piecewise.splitNumber](~visualMap-piecewise.splitNumber) is used), the rule of data layout is the same as [visualMap-continuous.inverse](~visualMap-continuous.inverse).
-
-+ In **CONTINUOUS-CUSTOMIZED** mode (i.e., [visualMap-piecewise.pieces](~visualMap-piecewise.pieces) is used) or **CATEGORY** mode (i.e., [visualMap-piecewise.categories](~visualMap-piecewise.categories) is used), the layout of each piece is determined by the their order in the definition of `pieces` or `categories`, namely:
-
- + When `inverse` is `false`:
-
- * When [visualMap.orient](~visualMap.orient) is `'vertical'`, pieces[0] or categories[0] correspond to upward side.
-
- * When [visualMap.orient](~visualMap.orient) is `'horizontal'`, pieces[0] or categories[0] correspond to left side.
-
- + When `inverse` is `true`, the results are opposite to above.
-
+Whether to inverse the layout of visualMap component.
+
++ In **CONTINUOUS-AVERAGE** mode (i.e., [visualMap-piecewise.splitNumber](~visualMap-piecewise.splitNumber) is used), the rule of data layout is the same as [visualMap-continuous.inverse](~visualMap-continuous.inverse).
+
++ In **CONTINUOUS-CUSTOMIZED** mode (i.e., [visualMap-piecewise.pieces](~visualMap-piecewise.pieces) is used) or **CATEGORY** mode (i.e., [visualMap-piecewise.categories](~visualMap-piecewise.categories) is used), the layout of each piece is determined by the their order in the definition of `pieces` or `categories`, namely:
+
+ + When `inverse` is `false`:
+
+ * When [visualMap.orient](~visualMap.orient) is `'vertical'`, pieces[0] or categories[0] correspond to upward side.
+
+ * When [visualMap.orient](~visualMap.orient) is `'horizontal'`, pieces[0] or categories[0] correspond to left side.
+
+ + When `inverse` is `true`, the results are opposite to above.
+
If you just have a try, you'll know it is not so complicated.
## precision(number) = null
-The decimal precision of label, defaults to be 0 (no decimals).
-
-+ In **CONTINUOUS-AVERAGE** mode (i.e., [visualMap-piecewise.splitNumber](~visualMap-piecewise.splitNumber) is used), the rule of data layout is the same as [visualMap-continuous.inverse](~visualMap-continuous.inverse), decimal percision auto adapts to series.data.
-
+The decimal precision of label, defaults to be 0 (no decimals).
+
++ In **CONTINUOUS-AVERAGE** mode (i.e., [visualMap-piecewise.splitNumber](~visualMap-piecewise.splitNumber) is used), the rule of data layout is the same as [visualMap-continuous.inverse](~visualMap-continuous.inverse), decimal percision auto adapts to series.data.
+
+ In **CONTINUOUS-CUSTOMIZED** mode (i.e., [visualMap-piecewise.pieces](~visualMap-piecewise.pieces) is used) or **CATEGORY** mode (i.e., [visualMap-piecewise.categories](~visualMap-piecewise.categories) is used), decimal percision defaults to be 0 (no decimals):
## itemWidth(number) = 20
@@ -153,18 +153,18 @@ The height of each graphical element that represents a piece.
## align(string) = 'auto'
-The layout relationship between the graphical elements for pieces and their labels. Possible values are:
-
-+ `'auto'` Decide automatically.
-+ `'left'` The graphical elements for pieces are on the left and their labels are on the right.
+The layout relationship between the graphical elements for pieces and their labels. Possible values are:
+
++ `'auto'` Decide automatically.
++ `'left'` The graphical elements for pieces are on the left and their labels are on the right.
+ `'right'` The graphical elements for pieces are on the right and their labels are on the left.
## text(Array) = null
-The label text on both ends, such as `['High', 'Low']`. [Sample](${galleryEditorPath}doc-example/map-visualMap-piecewise-text&edit=1&reset=1).
-
-You can understand the order of items in `text` array just by a simple trial. See [visualMap.inverse](~visualMap.inverse).
-
+The label text on both ends, such as `['High', 'Low']`. [Sample](${galleryEditorPath}doc-example/map-visualMap-piecewise-text&edit=1&reset=1).
+
+You can understand the order of items in `text` array just by a simple trial. See [visualMap.inverse](~visualMap.inverse).
+
The rule, that labels will not show when `text` is use, is retained for compatibility with ECharts2.
## textGap(number) = 10
@@ -185,8 +185,8 @@ Default symbol (the shape of graphical element). Possible values are:
{{ use: partial-icon-buildin() }}
-The setting of visual channel `symbol` can refer to [visualMap-piecewise.inRange](~visualMap-piecewise.inRange) and [visualMap-piecewise.outOfRange](~visualMap-piecewise.outOfRange).
-
+The setting of visual channel `symbol` can refer to [visualMap-piecewise.inRange](~visualMap-piecewise.inRange) and [visualMap-piecewise.outOfRange](~visualMap-piecewise.outOfRange).
+
When they are not specified, `itemSymbol` is adopted as the default value (but just used in visualMap component itself, not in chart).
{{ use: partial-visual-map-common(
@@ -195,15 +195,15 @@ When they are not specified, `itemSymbol` is adopted as the default value (but j
## formatter(string|Function)
-the formatter tool for label.
-
-+ If it was set as a `string`, it refers to a template, for instance: `aaaa{value}bbbb{value2}`, where `{value}` and `{value2}` represents the current selected range of dataValues.
-
-+ If it was set as a `Function`, it refers to a callback function, for instance:
-
-```javascript
-formatter: function (value, value2) {
- return 'aaaa' + value + 'bbbb' + value2;
-}
+the formatter tool for label.
+
++ If it was set as a `string`, it refers to a template, for instance: `aaaa{value}bbbb{value2}`, where `{value}` and `{value2}` represents the current selected range of dataValues.
+
++ If it was set as a `Function`, it refers to a callback function, for instance:
+
+```javascript
+formatter: function (value, value2) {
+ return 'aaaa' + value + 'bbbb' + value2;
+}
```
diff --git a/en/option/component/visual-map.md b/en/option/component/visual-map.md
index 1fd0efd..b744f2b 100644
--- a/en/option/component/visual-map.md
+++ b/en/option/component/visual-map.md
@@ -7,57 +7,57 @@
{{ use: partial-visual-map-visual-type() }}
-Myltiple `visualMap` component could be defined in a chart instance, which enable that different dimensions of a series data are mapped to different visual channels.
-
-`visualMap` could be defined as [Piecewise (visualMapPiecewise)](~visualMap-piecewise) or [Continuous (visualMapContinuous)](~visualMap-continuous), which is distinguished by the property `type`. For instance:
-
-```javascript
-option = {
- visualMap: [
- { // the first visualMap component
- type: 'continuous', // defined to be continuous visualMap
- ...
- },
- { // the second visualMap component
- type: 'piecewise', // defined to be piecewise visualMap
- ...
- }
- ],
- ...
-};
-```
-
-<br>
-**✦ Configure mapping ✦**
-
-The dimension of [series.data](~series.data) can be specified by [visualMap.dimension](~visualMap.dimension), from which the value can be retrieved and mapped onto visual channels, which can be defined in [visualMap.inRange](~visualMap.inRange) and [visualMap.outOfRange](~visualMap.outOfRange).
-
-<br>
-In series that controlled by visualMap, if a data item needs to escape from controlled by visualMap, you can set like this:
-```
-series: {
- type: '...',
- data: [
- {name: 'Shanghai', value: 251},
- {name: 'Haikou', value: 21},
- // Mark as `visualMap: false`, then this item does not controlled by visualMap any more,
- // and series visual config (like color, symbol, ...) can be used to this item.
- {name: 'Beijing', value: 821, },
- ...
- ]
-}
-```
-
-
-<br>
-**✦ The relationship between visualMap of ECharts3 and dataRange of ECharts2 ✦**
-
-`visualMap` is renamed from the `dataRange` of ECharts2, and the scope of functionalities are extended a lot. The configurations of `dataRange` are still compatible in ECharts3, which automatically convert them to `visualMap`. It is recommended to use `visualMap` instead of `dataRange` in ECharts3.
-
-<br>
-**✦ The detailed configurations of visualMap are elaborated as follows. ✦**
-
-<br>
+Myltiple `visualMap` component could be defined in a chart instance, which enable that different dimensions of a series data are mapped to different visual channels.
+
+`visualMap` could be defined as [Piecewise (visualMapPiecewise)](~visualMap-piecewise) or [Continuous (visualMapContinuous)](~visualMap-continuous), which is distinguished by the property `type`. For instance:
+
+```javascript
+option = {
+ visualMap: [
+ { // the first visualMap component
+ type: 'continuous', // defined to be continuous visualMap
+ ...
+ },
+ { // the second visualMap component
+ type: 'piecewise', // defined to be piecewise visualMap
+ ...
+ }
+ ],
+ ...
+};
+```
+
+<br>
+**✦ Configure mapping ✦**
+
+The dimension of [series.data](~series.data) can be specified by [visualMap.dimension](~visualMap.dimension), from which the value can be retrieved and mapped onto visual channels, which can be defined in [visualMap.inRange](~visualMap.inRange) and [visualMap.outOfRange](~visualMap.outOfRange).
+
+<br>
+In series that controlled by visualMap, if a data item needs to escape from controlled by visualMap, you can set like this:
+```
+series: {
+ type: '...',
+ data: [
+ {name: 'Shanghai', value: 251},
+ {name: 'Haikou', value: 21},
+ // Mark as `visualMap: false`, then this item does not controlled by visualMap any more,
+ // and series visual config (like color, symbol, ...) can be used to this item.
+ {name: 'Beijing', value: 821, },
+ ...
+ ]
+}
+```
+
+
+<br>
+**✦ The relationship between visualMap of ECharts3 and dataRange of ECharts2 ✦**
+
+`visualMap` is renamed from the `dataRange` of ECharts2, and the scope of functionalities are extended a lot. The configurations of `dataRange` are still compatible in ECharts3, which automatically convert them to `visualMap`. It is recommended to use `visualMap` instead of `dataRange` in ECharts3.
+
+<br>
+**✦ The detailed configurations of visualMap are elaborated as follows. ✦**
+
+<br>
<br>
{{ use: component-visual-map-continuous() }}
@@ -68,214 +68,214 @@ series: {
{{ target: partial-visual-map-range }}
-`${rangeType}` could customize visual channels both in series (by [${visualMapName}.seriesIndex](~${visualMapName}.seriesIndex)) and in `${visualMapName}` itself.
-
-For instance, if a `${visualMapName}` component is used on a scatter chart, the mapping approach from data to `color` (or `symbol`, `size`, ...) can be both customized in the scatter chart and `${visualMapName}` component itself. See the code as following:
-
-```javascript
-visualMap: [
- {
- ...,
- // Define visual channels both in target series and ${visualMapName} component itself:
- ${rangeType}: {
- color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
- symbolSize: [30, 100]
- }
- }
-]
-```
-
-If you want to define visual channels for target series and ${visualMapName} component separately, you should do as follows:
-
-```javascript
-visualMap: [
- {
- ...,
- // Define visual channels only for target series.
- target: {
- ${rangeType}: {
- color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
- symbolSize: [60, 200]
- }
- },
- // Define visual channels only for ${visualMapName} component.
- controller: {
- ${rangeType}: {
- symbolSize: [30, 100]
- }
- }
- }
-]
-```
-
-Or define as follows:
-```javascript
-visualMap: [
- {
- ...,
- // Define visual channels for both target series and ${visualMapName} component.
- ${rangeType}: {
- color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
- symbolSize: [60, 200]
- },
- // Define visual channels only for ${visualMapName} component, which
- // will overlap the properties with the same name in the above common
- // definition. (symbolSize is overlapped by [30, 100] while color
- // keeps the original value)
- controller: {
- ${rangeType}: {
- symbolSize: [30, 100]
- }
- }
- }
-]
-```
-
-<br>
-
----
-
-**✦ About visual channels ✦**
-
-+ Various visual channels (such as `color`、`symbolSize` and ect.) can be defined in ${rangeType} at the same time and all of them will be apopted.
-
-+ Basically visual channels `opacity` is recommended, rather than `colorAlpha`. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.
-
-+ There are two approaches of visual mapping supported: 'Linear Mapping' and 'Table Mapping'.
-
-<br>
-
----
-
-**✦ Linear Mapping to visual channel ✦**
-
-`Linear Mapping` means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of `[visaulMap.min, visualMap.max]` to a given range of `[visual value 1, visual value 2]` and obtaining a final value (say visual value) for visual channel rendering.
-
-For instance, `[visualMap.min, visualMap.max]` is set to be `[0, 100]`, and there is series.data: `[50, 10, 100]`. We intend to map them to an `opacity` range `[0.4, 1]`, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values `[0.7, 0.44, 1]`, cooresponding to each dataValue.
-
-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 default, but not `dataMin` and `dataMax` in series.data.
-
-
-How to configure visualMap component to do Linear Mapping?
-
-+ When use [visualMap-continuous](~visualMap-continuous), or
-
-+ When use [visualMap-piecewise](~visualMap-piecewise) and [visualMap-piecewise.categories](~visualMap-piecewise.categories) is not used.
-
-
-About the value of visual channel (visual value):
-
-+ Basically `Array` is used to express the range of visual value, e.g., `color: ['#333', '#777']`.
-
-+ Single `number` or single `string` can also be used, which will be converted to an `Array` by visualMap component. e.g.: `opacity: 0.4` will be converted to `opacity: [0.4, 0.4]`, `color: '#333'` will be converted to `color: ['#333', '#333']`.
-
-+ For visual channel `symbolSize`, `opacity`, `colorAlpha`, `colorLightness`, `colorSaturation`, `colorHue`, the range of visual value is always in the form of: `[visual value of visualMap.min, visual value of visualMap.max]`. For example, `colorLightness: [0.8, 0.2]` means that the dataValue in series.data that equals to `visualMap.min` (if any) will be mapped to lightness `0.8`, and the dataValue that equals to `visualMap.max` (if any) will be mapped to lightness `0.2`, and other dataV [...]
-
-+ For visual channel `color`, array is used, like: `['#333', '#78ab23', 'blue']`, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to `visualMap.min` will be mapped onto `'#333'`, the dataValue that equals to `visualMap.max` will be mapped onto `'blue'`, and other dataValues will be piecewisely interpolated to get the final color.
-
-+ For visual channel `symbol`, array is used, like: `['circle', 'rect', 'diamond']`, where the dataValue that equals to `visualMap.min` will be mapped onto `'circle'`, the dataValue that equals to `visualMap.max` will be mapped onto `'diamond'`, and other dataValues will be caculated based on the numerical distance to `visualMax.min` and to `visualMap.max`, and mapped onto one of `'circle'`, `'rect'`, `'diamond'`.
-
-
-About the possible value range of visual value:
-
-+ `opacity`、`colorAlpha`、`colorLightness`、`colorSaturation`、`visual value`
-
- possible value range is `[0, 1]`.
-
-+ `colorHue`：
-
- possible value range is `[0, 360]`.
-
-+ `color`：
-
- color can use RGB expression, like `'rgb(128, 128, 128)'`, or RGBA expression, like `'rgba(128, 128, 128, 0.5)'`, or Hex expression, like '#ccc'.
-
+`${rangeType}` could customize visual channels both in series (by [${visualMapName}.seriesIndex](~${visualMapName}.seriesIndex)) and in `${visualMapName}` itself.
+
+For instance, if a `${visualMapName}` component is used on a scatter chart, the mapping approach from data to `color` (or `symbol`, `size`, ...) can be both customized in the scatter chart and `${visualMapName}` component itself. See the code as following:
+
+```javascript
+visualMap: [
+ {
+ ...,
+ // Define visual channels both in target series and ${visualMapName} component itself:
+ ${rangeType}: {
+ color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
+ symbolSize: [30, 100]
+ }
+ }
+]
+```
+
+If you want to define visual channels for target series and ${visualMapName} component separately, you should do as follows:
+
+```javascript
+visualMap: [
+ {
+ ...,
+ // Define visual channels only for target series.
+ target: {
+ ${rangeType}: {
+ color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
+ symbolSize: [60, 200]
+ }
+ },
+ // Define visual channels only for ${visualMapName} component.
+ controller: {
+ ${rangeType}: {
+ symbolSize: [30, 100]
+ }
+ }
+ }
+]
+```
+
+Or define as follows:
+```javascript
+visualMap: [
+ {
+ ...,
+ // Define visual channels for both target series and ${visualMapName} component.
+ ${rangeType}: {
+ color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
+ symbolSize: [60, 200]
+ },
+ // Define visual channels only for ${visualMapName} component, which
+ // will overlap the properties with the same name in the above common
+ // definition. (symbolSize is overlapped by [30, 100] while color
+ // keeps the original value)
+ controller: {
+ ${rangeType}: {
+ symbolSize: [30, 100]
+ }
+ }
+ }
+]
+```
+
+<br>
+
+---
+
+**✦ About visual channels ✦**
+
++ Various visual channels (such as `color`、`symbolSize` and ect.) can be defined in ${rangeType} at the same time and all of them will be apopted.
+
++ Basically visual channels `opacity` is recommended, rather than `colorAlpha`. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.
+
++ There are two approaches of visual mapping supported: 'Linear Mapping' and 'Table Mapping'.
+
+<br>
+
+---
+
+**✦ Linear Mapping to visual channel ✦**
+
+`Linear Mapping` means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of `[visaulMap.min, visualMap.max]` to a given range of `[visual value 1, visual value 2]` and obtaining a final value (say visual value) for visual channel rendering.
+
+For instance, `[visualMap.min, visualMap.max]` is set to be `[0, 100]`, and there is series.data: `[50, 10, 100]`. We intend to map them to an `opacity` range `[0.4, 1]`, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values `[0.7, 0.44, 1]`, cooresponding to each dataValue.
+
+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 default, but not `dataMin` and `dataMax` in series.data.
+
+
+How to configure visualMap component to do Linear Mapping?
+
++ When use [visualMap-continuous](~visualMap-continuous), or
+
++ When use [visualMap-piecewise](~visualMap-piecewise) and [visualMap-piecewise.categories](~visualMap-piecewise.categories) is not used.
+
+
+About the value of visual channel (visual value):
+
++ Basically `Array` is used to express the range of visual value, e.g., `color: ['#333', '#777']`.
+
++ Single `number` or single `string` can also be used, which will be converted to an `Array` by visualMap component. e.g.: `opacity: 0.4` will be converted to `opacity: [0.4, 0.4]`, `color: '#333'` will be converted to `color: ['#333', '#333']`.
+
++ For visual channel `symbolSize`, `opacity`, `colorAlpha`, `colorLightness`, `colorSaturation`, `colorHue`, the range of visual value is always in the form of: `[visual value of visualMap.min, visual value of visualMap.max]`. For example, `colorLightness: [0.8, 0.2]` means that the dataValue in series.data that equals to `visualMap.min` (if any) will be mapped to lightness `0.8`, and the dataValue that equals to `visualMap.max` (if any) will be mapped to lightness `0.2`, and other dataV [...]
+
++ For visual channel `color`, array is used, like: `['#333', '#78ab23', 'blue']`, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to `visualMap.min` will be mapped onto `'#333'`, the dataValue that equals to `visualMap.max` will be mapped onto `'blue'`, and other dataValues will be piecewisely interpolated to get the final color.
+
++ For visual channel `symbol`, array is used, like: `['circle', 'rect', 'diamond']`, where the dataValue that equals to `visualMap.min` will be mapped onto `'circle'`, the dataValue that equals to `visualMap.max` will be mapped onto `'diamond'`, and other dataValues will be caculated based on the numerical distance to `visualMax.min` and to `visualMap.max`, and mapped onto one of `'circle'`, `'rect'`, `'diamond'`.
+
+
+About the possible value range of visual value:
+
++ `opacity`、`colorAlpha`、`colorLightness`、`colorSaturation`、`visual value`
+
+ possible value range is `[0, 1]`.
+
++ `colorHue`：
+
+ possible value range is `[0, 360]`.
+
++ `color`：
+
+ color can use RGB expression, like `'rgb(128, 128, 128)'`, or RGBA expression, like `'rgba(128, 128, 128, 0.5)'`, or Hex expression, like '#ccc'.
+
+ `symbol`：
{{ use: partial-icon() }}
-<br>
-
----
-
-**✦ Table Mapping to visual channel ✦**
-
-`Table Mapping` could be used when dataValue (values in series.data, specified by [visualMap.dimension](~visualMap.dimension)) is enumerable and we intend to map them to visual value by looking up a given table.
-
-For instance, in a [visualMap-piecewise](~visualMap-piecewise) component, [visualMap-piecewise.categories](~visualMap-piecewise.categories) is set to `['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']`. And there is series.data: `['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']`. Then we can establish the lookup rule for color: `color: {'Warden': 'red', 'Demon Hunter': 'black'}`, by which the `visualMap` component will map `dataValue` to `color`.
-
-How to configure `visualMap` component to do `Table Mapping`?
-
-When use [visualMap-piecewise](~visualMap-piecewise) and [visualMap-piecewise.categories](~visualMap-piecewise.categories)is set.
-
-About the value of visual channel (visual value):
-
-Generally `Object` or `Array` is used, for instance:
-
-```javascript
-visualMap: {
- type: 'piecewise',
- // categories defines the items that to be displayed in visualMap-piecewise component.
- categories: [
- 'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
- ],
- ${rangeType}: {
- // visual value can be an Object：
- color: {
- 'Warden': 'red',
- 'Demon Hunter': 'black',
- '': 'green' // Blank string means that except 'Warden' and 'Demon Hunter',
- // all other dataValues should be mapped to 'green'.
- }
- // visual value can also be a single value,
- // means that all dataValues should be mapped to the value.
- color: 'green',
- // visual value can also be a array, with the same length
- // as the array of categories and one-one mapping onto it.
- color: ['red', 'black', 'green', 'yellow', 'white']
- }
-}
-```
-
+<br>
+
+---
+
+**✦ Table Mapping to visual channel ✦**
+
+`Table Mapping` could be used when dataValue (values in series.data, specified by [visualMap.dimension](~visualMap.dimension)) is enumerable and we intend to map them to visual value by looking up a given table.
+
+For instance, in a [visualMap-piecewise](~visualMap-piecewise) component, [visualMap-piecewise.categories](~visualMap-piecewise.categories) is set to `['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']`. And there is series.data: `['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']`. Then we can establish the lookup rule for color: `color: {'Warden': 'red', 'Demon Hunter': 'black'}`, by which the `visualMap` component will map `dataValue` to `color`.
+
+How to configure `visualMap` component to do `Table Mapping`?
+
+When use [visualMap-piecewise](~visualMap-piecewise) and [visualMap-piecewise.categories](~visualMap-piecewise.categories)is set.
+
+About the value of visual channel (visual value):
+
+Generally `Object` or `Array` is used, for instance:
+
+```javascript
+visualMap: {
+ type: 'piecewise',
+ // categories defines the items that to be displayed in visualMap-piecewise component.
+ categories: [
+ 'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
+ ],
+ ${rangeType}: {
+ // visual value can be an Object：
+ color: {
+ 'Warden': 'red',
+ 'Demon Hunter': 'black',
+ '': 'green' // Blank string means that except 'Warden' and 'Demon Hunter',
+ // all other dataValues should be mapped to 'green'.
+ }
+ // visual value can also be a single value,
+ // means that all dataValues should be mapped to the value.
+ color: 'green',
+ // visual value can also be a array, with the same length
+ // as the array of categories and one-one mapping onto it.
+ color: ['red', 'black', 'green', 'yellow', 'white']
+ }
+}
+```
+
[Example](${galleryEditorPath}doc-example/scatter-visualMap-categories&edit=1&reset=1)
{{ target: partial-visual-map-merge }}
-**✦ How to modity configurations of vsiual encoding? ✦**
-
-If you want to modify the configurations of visual encoding after chart been rendered (by invoke `setOption` to set the initial `option`), `setOption` can be used again to modify configurations of visual encoding. For instance:
-
-```javascript
-chart.setOption({
- ${componentMainType}: {
- inRange: {color: ['red', 'blue']}
- }
-});
-```
-
-Notice:
-
-+ These ${componentMainType} properties (i.e. `inRange`, `outOfRange`, `target`, `controller`) do not support "merge", that is, anyone among them is modified when use `setOption` again, all of the original values of them will not be kept but erased. The "merge" brings complication in implemnentation and understanding, whereas "erase all" normalize the practise: once you want to modify some visual values, you should pass all of them to `setOption`, no matter they are to be changed.
-
-+ This way, `getOption() -> modify the gotten option -> setOption(modified option)`, is strongly **not recommended**, for instance:
-
-```javascript
-// Not recommended approach, regardless of its correctness:
-
-var option = chart.getOption(); // Get the entire option.
-option.${componentMainType}.inRange.color = ['red', 'blue']; // modify color, which is what you want.
-
-// You have to modify those two properties, otherwise you will not get what you want.
-option.${componentMainType}.target.inRange.color = ['red', 'blue'];
-option.${componentMainType}.controller.inRange.color = ['red', 'blue'];
-
-chart.setOption(option); // set the modified option back.
-// You should not use this approach, but use the
-// approach demostrated before this example.
+**✦ How to modity configurations of vsiual encoding? ✦**
+
+If you want to modify the configurations of visual encoding after chart been rendered (by invoke `setOption` to set the initial `option`), `setOption` can be used again to modify configurations of visual encoding. For instance:
+
+```javascript
+chart.setOption({
+ ${componentMainType}: {
+ inRange: {color: ['red', 'blue']}
+ }
+});
+```
+
+Notice:
+
++ These ${componentMainType} properties (i.e. `inRange`, `outOfRange`, `target`, `controller`) do not support "merge", that is, anyone among them is modified when use `setOption` again, all of the original values of them will not be kept but erased. The "merge" brings complication in implemnentation and understanding, whereas "erase all" normalize the practise: once you want to modify some visual values, you should pass all of them to `setOption`, no matter they are to be changed.
+
++ This way, `getOption() -> modify the gotten option -> setOption(modified option)`, is strongly **not recommended**, for instance:
+
+```javascript
+// Not recommended approach, regardless of its correctness:
+
+var option = chart.getOption(); // Get the entire option.
+option.${componentMainType}.inRange.color = ['red', 'blue']; // modify color, which is what you want.
+
+// You have to modify those two properties, otherwise you will not get what you want.
+option.${componentMainType}.target.inRange.color = ['red', 'blue'];
+option.${componentMainType}.controller.inRange.color = ['red', 'blue'];
+
+chart.setOption(option); // set the modified option back.
+// You should not use this approach, but use the
+// approach demostrated before this example.
```
@@ -284,8 +284,8 @@ chart.setOption(option); // set the modified option back.
##${prefix} inRange(Object)
-Define visual channels that will mapped from dataValues that are **in selected range**. (User can interact with visualMap component and make a seleced range by mouse or touch.)
-
+Define visual channels that will mapped from dataValues that are **in selected range**. (User can interact with visualMap component and make a seleced range by mouse or touch.)
+
Possiable visual channels includes:
{{ use: partial-visual-map-visual-type() }}
@@ -307,8 +307,8 @@ Possiable visual channels includes:
##${prefix} outOfRange(Object)
-Define visual channels that will mapped from dataValues that are **out of selected range**. (User can interact with visualMap component and make a seleced range by mouse or touch.)
-
+Define visual channels that will mapped from dataValues that are **out of selected range**. (User can interact with visualMap component and make a seleced range by mouse or touch.)
+
Possiable visual channels includes:
{{ use: partial-visual-map-visual-type() }}
@@ -334,34 +334,34 @@ Whether to show ${visualMapName} component. If set as `false`, ${visualMapName}
## dimension(string)
-Specify which dimension should be used to fetch dataValue from [series.data](~series.data), and then map them to visual channel.
-
-[series.data](~series.data) can be regarded as a two-dimensional array, for instance:
-
-```javascript
-[
- [12, 23, 43],
- [12, 23, 43],
- [43, 545, 65],
- [92, 23, 33]
-]
-```
-
-Each column of the above array is regarded as a `dimension`. For example, when property `dimension` is set to 1, the second column (i.e., 23, 23, 545, 23) is chosen to perform visual mapping.
-
+Specify which dimension should be used to fetch dataValue from [series.data](~series.data), and then map them to visual channel.
+
+[series.data](~series.data) can be regarded as a two-dimensional array, for instance:
+
+```javascript
+[
+ [12, 23, 43],
+ [12, 23, 43],
+ [43, 545, 65],
+ [92, 23, 33]
+]
+```
+
+Each column of the above array is regarded as a `dimension`. For example, when property `dimension` is set to 1, the second column (i.e., 23, 23, 545, 23) is chosen to perform visual mapping.
+
Use the last dimension of `data` by default.
## seriesIndex(number|Array)
-Specify visual mapping should be performed on which series, from which
-[series.data](~series.data) is fetched.
-
+Specify visual mapping should be performed on which series, from which
+[series.data](~series.data) is fetched.
+
All series are used by default.
## hoverLink(boolean) = true
-`hoverLink` enable highlight certain graphical elements of chart when mouse hovers on some place of `visualMap` component that is coresponding to those graphical elements by visual mapping.
-
+`hoverLink` enable highlight certain graphical elements of chart when mouse hovers on some place of `visualMap` component that is coresponding to those graphical elements by visual mapping.
+
Inversely, when mouse hovers a graphical element of chart, its value label will be displayed on its corresponding position in `visualMap`.
{{ use: partial-visual-map-inRange-outOfRange(
@@ -411,8 +411,8 @@ border width of visualMap component, with unit: px.
## color(Array) = ['#bf444c', '#d88273', '#f6efa6']
-This property remains only for compatibility with ECharts2, and is not recommended in ECharts3. It is recommended to configure color in [${visualMapName}.inRange](~${visualMapName}.inRange), or [${visualMapName}.outOfRange](~${visualMapName}.outOfRange) if needed.
-
+This property remains only for compatibility with ECharts2, and is not recommended in ECharts3. It is recommended to configure color in [${visualMapName}.inRange](~${visualMapName}.inRange), or [${visualMapName}.outOfRange](~${visualMapName}.outOfRange) if needed.
+
If you persist in using it, the following issue should be noticed: the sequence of dataValues that are mapped to colorValues in property `color` is from `large` to `small`, whereas that in [${visualMapName}.inRange](~${visualMapName}.inRange) or [${visualMapName}.outOfRange](~${visualMapName}.outOfRange) is from `small` to `large`.
## textStyle(*)
diff --git a/en/option/component/x-axis.md b/en/option/component/x-axis.md
index eaa9659..b23980f 100644
--- a/en/option/component/x-axis.md
+++ b/en/option/component/x-axis.md
@@ -19,12 +19,12 @@ The index of grid which the x axis belongs to. Defaults to be in the first grid.
## position(string)
-The position of x axis.
-
-options:
-+ `'top'`
-+ `'bottom'`
-
+The position of x axis.
+
+options:
++ `'top'`
++ `'bottom'`
+
The first x axis in grid defaults to be on the bottom of the grid, and the second x axis is on the other side against the first x axis.
## offset(number) = 0
@@ -33,14 +33,14 @@ Offset of x axis relative to default position. Useful when multiple x axis has s
## realtimeSort(*) = false
-`realtimeSort` is used to enable bar race if set to be `true`. It is only valid if the [type](~xAxis.type) of xAxis is `'value'`.
-
+`realtimeSort` is used to enable bar race if set to be `true`. It is only valid if the [type](~xAxis.type) of xAxis is `'value'`.
+
It should be used along with other options to enable bar race. Please refer to [bar race](tutorial.html#Bar%20Race) tutorial for more details.
## sortSeriesIndex(*) = 0
-The index of series used to sort in bar race. Since only one series is supported in bar race, `sortSeriesIndex` should always be `0`. It is only valid if [realtimeSort](~xAxis.realtimeSort) is `true` and [type](~xAxis.type) is `'value'`.
-
+The index of series used to sort in bar race. Since only one series is supported in bar race, `sortSeriesIndex` should always be `0`. It is only valid if [realtimeSort](~xAxis.realtimeSort) is `true` and [type](~xAxis.type) is `'value'`.
+
It should be used along with other options to enable bar race. Please refer to [bar race](tutorial.html#Bar%20Race) tutorial for more details.
{{ use: axis-common(
diff --git a/en/option/component/y-axis.md b/en/option/component/y-axis.md
index 7dfc455..fdc94d7 100644
--- a/en/option/component/y-axis.md
+++ b/en/option/component/y-axis.md
@@ -19,12 +19,12 @@ The index of grid which the y axis belongs to. Defaults to be in the first grid.
## position(string)
-the position of y axis.
-
-options:
-+ `'left'`
-+ `'right'`
-
+the position of y axis.
+
+options:
++ `'left'`
++ `'right'`
+
The first y axis in grid defaults to be the left (`'left'`) of the grid, and the second y axis is on the other side against the first y axis.
## offset(number) = 0
@@ -33,14 +33,14 @@ Offset of y axis relative to default position. Useful when multiple y axis has s
## realtimeSort(*) = false
-`realtimeSort` is used to enable bar race if set to be `true`. It is only valid if the [type](~yAxis.type) of yAxis is `'value'`.
-
+`realtimeSort` is used to enable bar race if set to be `true`. It is only valid if the [type](~yAxis.type) of yAxis is `'value'`.
+
It should be used along with other options to enable bar race. Please refer to [bar race](tutorial.html#Bar%20Race) tutorial for more details.
## sortSeriesIndex(*) = 0
-The index of series used to sort in bar race. Since only one series is supported in bar race, `sortSeriesIndex` should always be `0`. It is only valid if [realtimeSort](~yAxis.realtimeSort) is `true` and [type](~yAxis.type) is `'value'`.
-
+The index of series used to sort in bar race. Since only one series is supported in bar race, `sortSeriesIndex` should always be `0`. It is only valid if [realtimeSort](~yAxis.realtimeSort) is `true` and [type](~yAxis.type) is `'value'`.
+
It should be used along with other options to enable bar race. Please refer to [bar race](tutorial.html#Bar%20Race) tutorial for more details.
{{ use: axis-common(
diff --git a/en/option/partial/1d-data.md b/en/option/partial/1d-data.md
index 051d001..2272654 100644
--- a/en/option/partial/1d-data.md
+++ b/en/option/partial/1d-data.md
@@ -1,29 +1,29 @@
{{ target: partial-1d-data-label-formatter }}
-Data label formatter, which supports string template and callback function. In either form, `\n` is supported to represent a new line.
-
-**String template**
-
-Model variation includes:
-+ `{a}`: series name.
-+ `{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.
-+ `{@[n]}: the value of a dimension at the index of `n`, for example, `{@[3]}` refers the value at dimensions[3].
-
-**example: **
-```js
-formatter: '{b}: {d}'
-```
-
-**Callback function**
-
-Callback function is in form of:
-```js
-(params: Object|Array) => string
-```
+Data label formatter, which supports string template and callback function. In either form, `\n` is supported to represent a new line.
+
+**String template**
+
+Model variation includes:
++ `{a}`: series name.
++ `{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.
++ `{@[n]}: the value of a dimension at the index of `n`, for example, `{@[3]}` refers the value at dimensions[3].
+
+**example: **
+```js
+formatter: '{b}: {d}'
+```
+
+**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(
@@ -34,46 +34,46 @@ where `params` is the single dataset needed by formatter, which is formed as:
{{ target: partial-1d-data-desc }}
-Data array of ${name} series, which can be a single data value, like:
-```js
-[12, 34, 56, 10, 23]
-```
-
-Or, if need extra dimensions for components like [visualMap](~visualMap) to map to graphic attributes like color, it can also be in the form of array. For example:
-```js
-[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]
-```
-
-In this case, we can assgin the second value in each array item to [visualMap](~visualMap) component.
-
-
-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: 10
-}, {
- name: 'data2',
- value: 20
-}]
-```
-
-Each data item can be further customized:
-
-```js
-[{
- name: 'data1',
- value: 10
-}, {
- // name of data item
- name: 'data2',
- value : 56,
- // user-defined label format that only useful for this data item
- label: {},
- // user-defined special itemStyle that only useful for this data item
- itemStyle:{}
-}]
+Data array of ${name} series, which can be a single data value, like:
+```js
+[12, 34, 56, 10, 23]
+```
+
+Or, if need extra dimensions for components like [visualMap](~visualMap) to map to graphic attributes like color, it can also be in the form of array. For example:
+```js
+[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]
+```
+
+In this case, we can assgin the second value in each array item to [visualMap](~visualMap) component.
+
+
+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: 10
+}, {
+ name: 'data2',
+ value: 20
+}]
+```
+
+Each data item can be further customized:
+
+```js
+[{
+ name: 'data1',
+ value: 10
+}, {
+ // name of data item
+ name: 'data2',
+ value : 56,
+ // user-defined label format that only useful for this data item
+ label: {},
+ // user-defined special itemStyle that only useful for this data item
+ itemStyle:{}
+}]
```
diff --git a/en/option/partial/2d-data.md b/en/option/partial/2d-data.md
index 5732c94..f245fb0 100644
--- a/en/option/partial/2d-data.md
+++ b/en/option/partial/2d-data.md
@@ -1,29 +1,29 @@
{{ target: partial-2d-data-label-formatter }}
-Data label formatter, which supports string template and callback function. In either form, `\n` is supported to represent a new line.
-
-
-**String template**
-
-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.
-+ `{@[n]}: the value of a dimension at the index of `n`, for example, `{@[3]}` refers the value at dimensions[3].
-
-**example: **
-```js
-formatter: '{b}: {@score}'
-```
-
-**Callback function**
-
-Callback function is in form of:
-```js
-(params: Object|Array) => string
-```
+Data label formatter, which supports string template and callback function. In either form, `\n` is supported to represent a new line.
+
+
+**String template**
+
+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.
++ `{@[n]}: the value of a dimension at the index of `n`, for example, `{@[3]}` refers the value at dimensions[3].
+
+**example: **
+```js
+formatter: '{b}: {@score}'
+```
+
+**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(
@@ -36,11 +36,11 @@ where `params` is the single dataset needed by formatter, which is formed as:
## seriesLayoutBy(string) = 'column'
-When [dataset](~dataset) is used, `seriesLayoutBy` specifies whether the column or the row of `dataset` is mapped to the series, namely, the series is "layout" on columns or rows. Optional values:
-
-+ 'column': by default, the columns of `dataset` are mapped the series. In this case, each column represents a dimension.
-+ 'row'：the rows of `dataset` are mapped to the series. In this case, each row represents a dimension.
-
+When [dataset](~dataset) is used, `seriesLayoutBy` specifies whether the column or the row of `dataset` is mapped to the series, namely, the series is "layout" on columns or rows. Optional values:
+
++ 'column': by default, the columns of `dataset` are mapped the series. In this case, each column represents a dimension.
++ 'row'：the rows of `dataset` are mapped to the series. In this case, each row represents a dimension.
+
Check this [example](${galleryEditorPath}dataset-series-layout-by).
@@ -55,132 +55,132 @@ If [series.data](~series.data) is not specified, and [dataset](~dataset) exists,
{{ target: partial-2d-data-desc }}
-Data array of series, which can be in the following forms:
-
-Notice, if no `data` specified in series, and there is [dataset](~dataset) in option, series will use the first [dataset](~dataset) as its datasource. If `data` has been specified, [dataset](~dataset) will not used.
-
-`series.datasetIndex` can be used to specify other [dataset](~dataset).
-
-
-Basically, data is represented by a two-dimension array, like the example below, where each column is named as a "dimension".
-```js
-series: [{
- data: [
- // dimX dimY other dimensions ...
- [ 3.4, 4.5, 15, 43],
- [ 4.2, 2.3, 20, 91],
- [ 10.8, 9.5, 30, 18],
- [ 7.2, 8.8, 18, 57]
- ]
-}]
-```
-
-+ In [cartesian (grid)](~grid), "dimX" and "dimY" correspond to [xAxis](~xAxis) and [yAxis](~yAxis) respectively.
-+ In [polar](~polar) "dimX" and "dimY" correspond to [radiusAxis](~radiusAxis) 和 [angleAxis](~anbleAxis) respectively.
-+ Other dimensions are optional, which can be used in other places. For example:
- + [visualMap](~visualMap) can map one or more dimensions to visual (color, symbol size ...).
- + [series.symbolSize](~series.symbolSize) can be set as a callback function, where symbol size can be calculated by values of a certain dimension.
- + Values in other dimensions can be shown by [tooltip.formatter](~tooltip.formatter) or [series.label.formatter](~series.label.formatter).
-
-Especially, when there is one and only one category axis (axis.type is `'category'`), data can be simply be represented by a one-dimension array, like:
-```js
-xAxis: {
- data: ['a', 'b', 'm', 'n']
-},
-series: [{
- // Each item corresponds to each item in xAxis.data.
- data: [23, 44, 55, 19]
- // In fact, it is the simplification of the format below:
- // data: [[0, 23], [1, 44], [2, 55], [3, 19]]
-}]
-```
-
-<br>
-**Relationship between "value" and [axis.type](~xAxis.type)**
-
-+ When a dimension corresponds to a value axis (axis.type is `'value'` or `'log'`):
-
- The value can be a `number` (like `12`) (can also be a number in a `string` format, like `'12'`).
-
-+ When a dimension corresponds to a category axis (axis.type is `'category'`):
-
- The value should be the ordinal of the axis.data (based on `0`), the string value of the axis.data. For example:
- ```js
- xAxis: {
- type: 'category',
- data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday']
- },
- yAxis: {
- type: 'category',
- data: ['a', 'b', 'm', 'n', 'p', 'q']
- },
- series: [{
- data: [
- // xAxis yAxis
- [ 0, 0, 2 ], // This point is located at xAxis: 'Monday', yAxis: 'a'.
- [ 'Thursday', 2, 1 ], // This point is located at xAxis: 'Thursday', yAxis: 'm'.
- [ 2, 'p', 2 ], // This point is located at xAxis: 'Wednesday', yAxis: 'p'.
- [ 3, 3, 5 ]
- ]
- }]
- ```
- There is an example of double category axes: [Github Punchcard](${galleryEditorPath}scatter-punchCard).
-
-+ When a dimension corresponds to a time axis (type is `'time'`), the value can be:
- + a timestamp, like `1484141700832`, which represents a UTC time.
- + a date string, in one of the formats below:
- + a subset of [ISO 8601](http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15), only including (all of these are treated as local time unless timezone is specified, which is consistent with [moment](https://momentjs.com/)):
- + only part of year/month/date/time are specified: `'2012-03'`, `'2012-03-01'`, `'2012-03-01 05'`, `'2012-03-01 05:06'`.
- + separated by `"T"` or a space: `'2012-03-01T12:22:33.123'`, `'2012-03-01 12:22:33.123'`.
- + timezone specified: `'2012-03-01T12:22:33Z'`, `'2012-03-01T12:22:33+8000'`, `'2012-03-01T12:22:33-05:00'`.
- + other date string format (all of these are treated as local time):
- `'2012'`, `'2012-3-1'`, `'2012/3/1'`, `'2012/03/01'`,
- `'2009/6/12 2:00'`, `'2009/6/12 2:05:08'`, `'2009/6/12 2:05:08.123'`.
- + a JavaScript Date instance created by user:
- + Caution, when using a data string to create a Date instance, [browser differences and inconsistencies](http://dygraphs.com/date-formats.html) should be considered.
- + For example: In chrome, `new Date('2012-01-01')` is treated as a Jan 1st 2012 in UTC, while `new Date('2012-1-1')` and `new Date('2012/01/01')` are treated as Jan 1st 2012 in local timezone. In safari `new Date('2012-1-1')` is not supported.
- + So if you intent to perform `new Date(dateString)`, it is strongly recommended to use a time parse library (e.g., [moment](https://momentjs.com/)), or use `echarts.number.parseDate`, or check [this](http://dygraphs.com/date-formats.html).
-
-
-
-<br>
-**Customize a data item:**
-
-When needing to customize a data item, it can be set as an object, where property `value` reprensent real value. For example:
-```js
-[
- 12,
- 24,
- {
- value: [24, 32],
- // label style, only works in this data item.
- label: {},
- // item style, only works in this data item.
- itemStyle:{}
- },
- 33
-]
-// Or
-[
- [12, 332],
- [24, 32],
- {
- value: [24, 32],
- // label style, only works in this data item.
- label: {},
- // item style, only works in this data item.
- itemStyle:{}
- },
- [33, 31]
-]
-```
-
-<br>
-**Empty value:**
-
-`'-'` or `null` or `undefined` or `NaN` can be used to describe that a data item does not exist (ps：*not exist* does not means its value is `0`).
-
-For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.
-
+Data array of series, which can be in the following forms:
+
+Notice, if no `data` specified in series, and there is [dataset](~dataset) in option, series will use the first [dataset](~dataset) as its datasource. If `data` has been specified, [dataset](~dataset) will not used.
+
+`series.datasetIndex` can be used to specify other [dataset](~dataset).
+
+
+Basically, data is represented by a two-dimension array, like the example below, where each column is named as a "dimension".
+```js
+series: [{
+ data: [
+ // dimX dimY other dimensions ...
+ [ 3.4, 4.5, 15, 43],
+ [ 4.2, 2.3, 20, 91],
+ [ 10.8, 9.5, 30, 18],
+ [ 7.2, 8.8, 18, 57]
+ ]
+}]
+```
+
++ In [cartesian (grid)](~grid), "dimX" and "dimY" correspond to [xAxis](~xAxis) and [yAxis](~yAxis) respectively.
++ In [polar](~polar) "dimX" and "dimY" correspond to [radiusAxis](~radiusAxis) 和 [angleAxis](~anbleAxis) respectively.
++ Other dimensions are optional, which can be used in other places. For example:
+ + [visualMap](~visualMap) can map one or more dimensions to visual (color, symbol size ...).
+ + [series.symbolSize](~series.symbolSize) can be set as a callback function, where symbol size can be calculated by values of a certain dimension.
+ + Values in other dimensions can be shown by [tooltip.formatter](~tooltip.formatter) or [series.label.formatter](~series.label.formatter).
+
+Especially, when there is one and only one category axis (axis.type is `'category'`), data can be simply be represented by a one-dimension array, like:
+```js
+xAxis: {
+ data: ['a', 'b', 'm', 'n']
+},
+series: [{
+ // Each item corresponds to each item in xAxis.data.
+ data: [23, 44, 55, 19]
+ // In fact, it is the simplification of the format below:
+ // data: [[0, 23], [1, 44], [2, 55], [3, 19]]
+}]
+```
+
+<br>
+**Relationship between "value" and [axis.type](~xAxis.type)**
+
++ When a dimension corresponds to a value axis (axis.type is `'value'` or `'log'`):
+
+ The value can be a `number` (like `12`) (can also be a number in a `string` format, like `'12'`).
+
++ When a dimension corresponds to a category axis (axis.type is `'category'`):
+
+ The value should be the ordinal of the axis.data (based on `0`), the string value of the axis.data. For example:
+ ```js
+ xAxis: {
+ type: 'category',
+ data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday']
+ },
+ yAxis: {
+ type: 'category',
+ data: ['a', 'b', 'm', 'n', 'p', 'q']
+ },
+ series: [{
+ data: [
+ // xAxis yAxis
+ [ 0, 0, 2 ], // This point is located at xAxis: 'Monday', yAxis: 'a'.
+ [ 'Thursday', 2, 1 ], // This point is located at xAxis: 'Thursday', yAxis: 'm'.
+ [ 2, 'p', 2 ], // This point is located at xAxis: 'Wednesday', yAxis: 'p'.
+ [ 3, 3, 5 ]
+ ]
+ }]
+ ```
+ There is an example of double category axes: [Github Punchcard](${galleryEditorPath}scatter-punchCard).
+
++ When a dimension corresponds to a time axis (type is `'time'`), the value can be:
+ + a timestamp, like `1484141700832`, which represents a UTC time.
+ + a date string, in one of the formats below:
+ + a subset of [ISO 8601](http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15), only including (all of these are treated as local time unless timezone is specified, which is consistent with [moment](https://momentjs.com/)):
+ + only part of year/month/date/time are specified: `'2012-03'`, `'2012-03-01'`, `'2012-03-01 05'`, `'2012-03-01 05:06'`.
+ + separated by `"T"` or a space: `'2012-03-01T12:22:33.123'`, `'2012-03-01 12:22:33.123'`.
+ + timezone specified: `'2012-03-01T12:22:33Z'`, `'2012-03-01T12:22:33+8000'`, `'2012-03-01T12:22:33-05:00'`.
+ + other date string format (all of these are treated as local time):
+ `'2012'`, `'2012-3-1'`, `'2012/3/1'`, `'2012/03/01'`,
+ `'2009/6/12 2:00'`, `'2009/6/12 2:05:08'`, `'2009/6/12 2:05:08.123'`.
+ + a JavaScript Date instance created by user:
+ + Caution, when using a data string to create a Date instance, [browser differences and inconsistencies](http://dygraphs.com/date-formats.html) should be considered.
+ + For example: In chrome, `new Date('2012-01-01')` is treated as a Jan 1st 2012 in UTC, while `new Date('2012-1-1')` and `new Date('2012/01/01')` are treated as Jan 1st 2012 in local timezone. In safari `new Date('2012-1-1')` is not supported.
+ + So if you intent to perform `new Date(dateString)`, it is strongly recommended to use a time parse library (e.g., [moment](https://momentjs.com/)), or use `echarts.number.parseDate`, or check [this](http://dygraphs.com/date-formats.html).
+
+
+
+<br>
+**Customize a data item:**
+
+When needing to customize a data item, it can be set as an object, where property `value` reprensent real value. For example:
+```js
+[
+ 12,
+ 24,
+ {
+ value: [24, 32],
+ // label style, only works in this data item.
+ label: {},
+ // item style, only works in this data item.
+ itemStyle:{}
+ },
+ 33
+]
+// Or
+[
+ [12, 332],
+ [24, 32],
+ {
+ value: [24, 32],
+ // label style, only works in this data item.
+ label: {},
+ // item style, only works in this data item.
+ itemStyle:{}
+ },
+ [33, 31]
+]
+```
+
+<br>
+**Empty value:**
+
+`'-'` or `null` or `undefined` or `NaN` can be used to describe that a data item does not exist (ps：*not exist* does not means its value is `0`).
+
+For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.
+
<br><br>
diff --git a/en/option/partial/animation.md b/en/option/partial/animation.md
index 87725ed..bb0cda2 100644
--- a/en/option/partial/animation.md
+++ b/en/option/partial/animation.md
@@ -18,33 +18,33 @@ Whether to set graphic number threshold to animation. Animation will be disabled
#${prefix} animationDurationUpdate(number|Function) = ${defaultAnimationDurationUpdate|default(300)}
-Time for animation to complete, which supports callback function for different data to have different animation effect:
-
-```js
-animationDurationUpdate: function (idx) {
- // delay for later data is larger
- return idx * 100;
-}
+Time for animation to complete, which supports callback function for different data to have different animation effect:
+
+```js
+animationDurationUpdate: function (idx) {
+ // delay for later data is larger
+ return idx * 100;
+}
```
#${prefix} animationEasingUpdate(string) = ${defaultAnimationEasingUpdate|default('cubicOut')}
-Easing method used for animation.
+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 effects.
-
-For example:
-```js
-animationDelayUpdate: function (idx) {
- // delay for later data is larger
- return idx * 100;
-}
-```
-
-See [this example](${galleryEditorPath}bar-animation-delay) for more information.
+Delay before updating animation, which supports callback function for different data to have different animation effects.
+
+For example:
+```js
+animationDelayUpdate: function (idx) {
+ // delay for later data is larger
+ return idx * 100;
+}
+```
+
+See [this example](${galleryEditorPath}bar-animation-delay) for more information.
{{ /if }}
@@ -53,32 +53,32 @@ See [this example](${galleryEditorPath}bar-animation-delay) for more information
#${prefix} animationDuration(number|Function) = ${defaultAnimationDuration|default(1000)}
-Duration of the first animation, which supports callback function for different data to have different animation effect:
-
-```js
-animationDuration: function (idx) {
- // delay for later data is larger
- return idx * 100;
-}
+Duration of the first animation, which supports callback function for different data to have different animation effect:
+
+```js
+animationDuration: function (idx) {
+ // delay for later data is larger
+ return idx * 100;
+}
```
#${prefix} animationEasing(string) = ${defaultAnimationEasing|default('cubicOut')}
-Easing method used for the first animation. Varied easing effects can be found at [easing effect example](${galleryEditorPath}line-easing).
+Easing method used for the first animation. Varied easing effects can be found at [easing effect example](${galleryEditorPath}line-easing).
{{ if: !${noAnimationDelay} }}
#${prefix} animationDelay(number|Function) = 0
-Delay before updating the first animation, which supports callback function for different data to have different animation effect.
-
-For example:
-```js
-animationDelay: function (idx) {
- // delay for later data is larger
- return idx * 100;
-}
-```
-
-See [this example](${galleryEditorPath}bar-animation-delay) for more information.
+Delay before updating the first animation, which supports callback function for different data to have different animation effect.
+
+For example:
+```js
+animationDelay: function (idx) {
+ // delay for later data is larger
+ return idx * 100;
+}
+```
+
+See [this example](${galleryEditorPath}bar-animation-delay) for more information.
{{ /if }}
diff --git a/en/option/partial/area-style.md b/en/option/partial/area-style.md
index 03e317e..ce8c85e 100644
--- a/en/option/partial/area-style.md
+++ b/en/option/partial/area-style.md
@@ -8,25 +8,25 @@ Fill color. {{ if: ${useColorPalatte} }} Color is taken from [option.color Palet
{{ use: partial-color-desc() }}
{{ if: ${hasCallback} }}
-Supports callback functions, in the form of:
-```js
-(params: Object) => Color
-```
-Input parameters are `seriesIndex`, `dataIndex`, `data`, `value`, and etc. of data item.
+Supports callback functions, in the form of:
+```js
+(params: Object) => Color
+```
+Input parameters are `seriesIndex`, `dataIndex`, `data`, `value`, and etc. of data item.
{{ /if }}
{{ if: ${hasOrigin} }}
#${prefix|default('##')} origin(string) = 'auto'
-Origin position of area.
-
-By default, the area between axis line and data will be the area to be filled. This config enables you to fill data to the max or min of the axis data.
-
-Valid values include: `'auto'` (default), `'start'`, `'end'`.
-
-- `'auto'` to fill between axis line to data;
-- `'start'` to fill between min axis value (when not `inverse`) to data;
-- `'end'` to fill between max axis value (when not `inverse`) to data;
+Origin position of area.
+
+By default, the area between axis line and data will be the area to be filled. This config enables you to fill data to the max or min of the axis data.
+
+Valid values include: `'auto'` (default), `'start'`, `'end'`.
+
+- `'auto'` to fill between axis line to data;
+- `'start'` to fill between min axis value (when not `inverse`) to data;
+- `'end'` to fill between max axis value (when not `inverse`) to data;
{{ /if }}
{{ use: partial-style-shadow-opacity(
diff --git a/en/option/partial/barGrid.md b/en/option/partial/barGrid.md
index f7c84ae..45de027 100644
--- a/en/option/partial/barGrid.md
+++ b/en/option/partial/barGrid.md
@@ -13,8 +13,8 @@ The width of the bar. Adaptive when not specified.
## barMaxWidth(number|string) = null
-The maximum width of the bar.
-
+The maximum width of the bar.
+
Has higer priority than [barWidth](~series-bar.barWidth).
{{ use: partial-barGrid-value-absolute-or-percent() }}
@@ -25,8 +25,8 @@ Has higer priority than [barWidth](~series-bar.barWidth).
## barMinWidth(number|string)
-The minimum width of the bar. In cartesian the default value is `1`, otherwise the default value if `null`.
-
+The minimum width of the bar. In cartesian the default value is `1`, otherwise the default value if `null`.
+
Has higer priority than [barWidth](~series-bar.barWidth).
{{ use: partial-barGrid-value-absolute-or-percent() }}
@@ -41,15 +41,15 @@ The minimum width of bar. It could be used to avoid the following situation: the
## barGap(string) = ${barGapDefault|default('30%')}
-The gap between bars between different series, is a percent value like `'30%'`, which means `30%` of the bar width.
-
+The gap between bars between different series, is a percent value like `'30%'`, which means `30%` of the bar width.
+
Set barGap as `'-100%'` can overlap bars that belong to different series, which is useful when making a series of bar be background.
{{ use: partial-barGrid-share-desc(
seriesType = ${seriesType}
) }}
-For example:
+For example:
~[600x400](${galleryViewPath}doc-example/barGrid-barGap&reset=1&edit=1)
## barCategoryGap(string) = '20%'
diff --git a/en/option/partial/circular-layout.md b/en/option/partial/circular-layout.md
index a0d52e3..4bb6ae8 100644
--- a/en/option/partial/circular-layout.md
+++ b/en/option/partial/circular-layout.md
@@ -5,26 +5,26 @@
## center(Array) = ${defaultCenter|default("['50%', '50%']")}
-Center position of ${componentName}, the first of which is the horizontal position, and the second is the vertical position.
-
-Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.
-
-**Example: **
-```
-// Set to absolute pixel values
-center: [400, 300]
-// Set to relative percent
-center: ['50%', '50%']
+Center position of ${componentName}, the first of which is the horizontal position, and the second is the vertical position.
+
+Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.
+
+**Example: **
+```
+// Set to absolute pixel values
+center: [400, 300]
+// Set to relative percent
+center: ['50%', '50%']
```
## radius(number|string|Array) = ${defaultRadius}
-Radius of ${componentName}. Value can be:
-
-+ `number`: Specify outside radius directly.
-+ `string`: For example, `'20%'`, means that the outside radius is 20% of the viewport size (the little one between width and height of the chart container).
+Radius of ${componentName}. Value can be:
+
++ `number`: Specify outside radius directly.
++ `string`: For example, `'20%'`, means that the outside radius is 20% of the viewport size (the little one between width and height of the chart container).
{{ if: !${disableArray} }}
-+ `Array.<number|string>`: The first item specifies the inside radius, and the second item specifies the outside radius. Each item follows the definitions above.
++ `Array.<number|string>`: The first item specifies the inside radius, and the second item specifies the outside radius. Each item follows the definitions above.
{{ /if }}
diff --git a/en/option/partial/color-desc.md b/en/option/partial/color-desc.md
index b05bf98..3dd9bac 100644
--- a/en/option/partial/color-desc.md
+++ b/en/option/partial/color-desc.md
@@ -1,39 +1,39 @@
{{ target: partial-color-desc }}
-> Color can be represented in RGB, for example `'rgb(128, 128, 128)'`. RGBA can be used when you need alpha channel, for example `'rgba(128, 128, 128, 0.5)'`. You may also use hexadecimal format, for example `'#ccc'`. Gradient color and texture are also supported besides single colors.
-> ```js
-> // Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.
-> color: {
-> type: 'linear',
-> x: 0,
-> y: 0,
-> x2: 0,
-> y2: 1,
-> colorStops: [{
-> offset: 0, color: 'red' // color at 0% position
-> }, {
-> offset: 1, color: 'blue' // color at 100% position
-> }],
-> global: false // false by default
-> }
-> // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.
-> color: {
-> type: 'radial',
-> x: 0.5,
-> y: 0.5,
-> r: 0.5,
-> colorStops: [{
-> offset: 0, color: 'red' // color at 0% position
-> }, {
-> offset: 1, color: 'blue' // color at 100% position
-> }],
-> global: false // false by default
-> }
-> // Fill with texture
-> color: {
-> image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported
-> repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat
-> }
+> Color can be represented in RGB, for example `'rgb(128, 128, 128)'`. RGBA can be used when you need alpha channel, for example `'rgba(128, 128, 128, 0.5)'`. You may also use hexadecimal format, for example `'#ccc'`. Gradient color and texture are also supported besides single colors.
+> ```js
+> // Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.
+> color: {
+> type: 'linear',
+> x: 0,
+> y: 0,
+> x2: 0,
+> y2: 1,
+> colorStops: [{
+> offset: 0, color: 'red' // color at 0% position
+> }, {
+> offset: 1, color: 'blue' // color at 100% position
+> }],
+> global: false // false by default
+> }
+> // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.
+> color: {
+> type: 'radial',
+> x: 0.5,
+> y: 0.5,
+> r: 0.5,
+> colorStops: [{
+> offset: 0, color: 'red' // color at 0% position
+> }, {
+> offset: 1, color: 'blue' // color at 100% position
+> }],
+> global: false // false by default
+> }
+> // Fill with texture
+> color: {
+> image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported
+> repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat
+> }
> ```
diff --git a/en/option/partial/component-common-style.md b/en/option/partial/component-common-style.md
index 4a379cb..7d93aa9 100644
--- a/en/option/partial/component-common-style.md
+++ b/en/option/partial/component-common-style.md
@@ -3,28 +3,28 @@
#${prefix} backgroundColor(Color) = 'transparent'
-Background color of ${componentName}, which is transparent by default.
-
-> Color can be represented in RGB, for example `'rgb(128, 128, 128)'`. RGBA can be used when you need alpha channel, for example `'rgba(128, 128, 128, 0.5)'`. You may also use hexadecimal format, for example `'#ccc'`.
+Background color of ${componentName}, which is transparent by default.
+
+> Color can be represented in RGB, for example `'rgb(128, 128, 128)'`. RGBA can be used when you need alpha channel, for example `'rgba(128, 128, 128, 0.5)'`. You may also use hexadecimal format, for example `'#ccc'`.
{{ if: ${needShow} }}
-**Attention**: Works only if `show: true` is set.
+**Attention**: Works only if `show: true` is set.
{{ /if }}
#${prefix} borderColor(Color) = '#ccc'
-Border color of ${componentName}. Support the same color format as backgroundColor.
+Border color of ${componentName}. Support the same color format as backgroundColor.
{{ if: ${needShow} }}
-**Attention**: Works only if `show: true` is set.
+**Attention**: Works only if `show: true` is set.
{{ /if }}
#${prefix} borderWidth(number) = 1
-Border width of ${componentName}.
+Border width of ${componentName}.
{{ if: ${needShow} }}
-**Attention**: Works only if `show: true` is set.
+**Attention**: Works only if `show: true` is set.
{{ /if }}
{{ if: ${hasBorderRadius} }}
@@ -44,11 +44,11 @@ Border width of ${componentName}.
#${prefix} ${propName|default('borderRadius')}(number|Array) = 0
-The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.
-
-For example:
-```
-${propName|default('borderRadius')}: 5, // consistently set the size of 4 rounded corners
-${propName|default('borderRadius')}: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)
+The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.
+
+For example:
+```
+${propName|default('borderRadius')}: 5, // consistently set the size of 4 rounded corners
+${propName|default('borderRadius')}: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)
```
diff --git a/en/option/partial/coord-sys.md b/en/option/partial/coord-sys.md
index 90ddaeb..989fdb4 100644
--- a/en/option/partial/coord-sys.md
+++ b/en/option/partial/coord-sys.md
@@ -3,42 +3,42 @@
## coordinateSystem(string) = ${coordSysDefault}
-The coordinate used in the series, whose options are:
+The coordinate used in the series, whose options are:
{{ if: ${none} }}
-+ `null` or `'none'`
-
- No coordinate.
++ `null` or `'none'`
+
+ No coordinate.
{{ /if }}
{{ if: ${cartesian2d} }}
-+ `'cartesian2d'`
-
- Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with [xAxisIndex](~series-${seriesType}.xAxisIndex) and [yAxisIndex](~series-${seriesType}.yAxisIndex) to assign the corresponding axis component.
++ `'cartesian2d'`
+
+ Use a two-dimensional 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: ${polar} }}
-+ `'polar'`
-
- Use polar coordinates, with [polarIndex](~series-${seriesType}.polarIndex) to assign the corresponding polar coordinate component.
++ `'polar'`
+
+ Use polar coordinates, with [polarIndex](~series-${seriesType}.polarIndex) to assign the corresponding polar coordinate component.
{{ /if }}
{{ if: ${geo} }}
-+ `'geo'`
-
- Use geographic coordinate, with [geoIndex](~series-${seriesType}.geoIndex) to assign the corresponding geographic coordinate components.
++ `'geo'`
+
+ Use geographic coordinate, with [geoIndex](~series-${seriesType}.geoIndex) to assign the corresponding geographic coordinate components.
{{ /if }}
{{ if: ${parallel} }}
-+ `'parallel'`
-
- Use parallel coordinates, with [parallelIndex](~series-${seriesType}.parallelIndex) to assign the corresponding parallel coordinate components.
++ `'parallel'`
+
+ Use parallel coordinates, with [parallelIndex](~series-${seriesType}.parallelIndex) to assign the corresponding parallel coordinate components.
{{ /if }}
{{ if: ${none} }}
-+ `'none'`
-
- Do not use coordinate system.
++ `'none'`
+
+ Do not use coordinate system.
{{ /if }}
{{ if: ${cartesian2d} }}
@@ -48,30 +48,30 @@ Index of [x axis](~xAxis) to combine with, which is useful for multiple x axes
## yAxisIndex(number) = 0
-Index of [y axis](~yAxis) to combine with, which is useful for multiple y axes in one chart.
+Index of [y axis](~yAxis) to combine with, which is useful for multiple y axes in one chart.
{{ /if }}
{{ if: ${polar} }}
## polarIndex(number) = 0
-Index of [polar coordinate](~polar) to combine with, which is useful for multiple polar axes in one chart.
+Index of [polar coordinate](~polar) to combine with, which is useful for multiple polar axes in one chart.
{{ /if }}
{{ if: ${geo} }}
## geoIndex(number) = 0
-Index of [geographic coordinate](~geo) to combine with, which is useful for multiple geographic axes in one chart.
+Index of [geographic coordinate](~geo) to combine with, which is useful for multiple geographic axes in one chart.
{{ /if }}
{{ if: ${parallel} }}
## parallelIndex(number) = 0
-Index of [parallel coordinates](~parallel) to combine with, which is useful for multiple parallel axes in one chart.
+Index of [parallel coordinates](~parallel) to combine with, which is useful for multiple parallel axes in one chart.
{{ /if }}
{{ if: ${calendar} }}
## calendarIndex(number) = 0
-Index of [calendar coordinates](~calendar) to combine with, which is useful for multiple calendar coordinates in one chart.
+Index of [calendar coordinates](~calendar) to combine with, which is useful for multiple calendar coordinates in one chart.
{{ /if }}
diff --git a/en/option/partial/data-id-desc.md b/en/option/partial/data-id-desc.md
index a328f61..f830d17 100644
--- a/en/option/partial/data-id-desc.md
+++ b/en/option/partial/data-id-desc.md
@@ -1,7 +1,7 @@
{{ target: partial-data-id-desc }}
-ID of this data item, which should be identical.
-
+ID of this data item, which should be identical.
+
This is optional. If no ID is assigned, then name is used as ID. If name doesn't exist, then index of this data item is used.
diff --git a/en/option/partial/formatter.md b/en/option/partial/formatter.md
index 2d0b750..84d2423 100644
--- a/en/option/partial/formatter.md
+++ b/en/option/partial/formatter.md
@@ -1,80 +1,80 @@
{{ 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,
+```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},
+ // ${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]]]
+}
+```
+
+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]]]
```
diff --git a/en/option/partial/icon.md b/en/option/partial/icon.md
index 6f85374..9302b01 100644
--- a/en/option/partial/icon.md
+++ b/en/option/partial/icon.md
@@ -11,19 +11,19 @@ Icon types provided by ECharts includes
{{ target: partial-icon-image-path }}
-It can be set to an image with `'image://url'` , in which URL is the link to an image, or `dataURI` of an image.
-
-
-An image URL example:
-
-```
-'image://http://xxx.xxx.xxx/a/b.png'
-```
-
-A `dataURI` example:
-
-```
-'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
+It can be set to an image with `'image://url'` , in which URL is the link to an image, or `dataURI` of an image.
+
+
+An image URL example:
+
+```
+'image://http://xxx.xxx.xxx/a/b.png'
+```
+
+A `dataURI` example:
+
+```
+'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
```
{{ use: partial-icon-path() }}
@@ -38,11 +38,11 @@ A `dataURI` example:
{{ 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
-
-For example:
-
-```
-'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'
+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:
+
+```
+'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'
```
diff --git a/en/option/partial/label.md b/en/option/partial/label.md
index 13dcb09..e6b4cd1 100644
--- a/en/option/partial/label.md
+++ b/en/option/partial/label.md
@@ -9,7 +9,7 @@ Text label of ${name}, to explain some data information about graphic item like
#${prefix} show(boolean) = ${defaultShowLabel|default("false")}
-Whether to show label.
+Whether to show label.
{{ if: !${noPosition} }}
#${prefix} position(string|Array) = ${defaultPosition}
@@ -19,21 +19,21 @@ Whether to show label.
#${prefix} distance(number) = 5
-Distance to the host graphic element. Works when position is string value (like `'top'`、`'insideRight'`).
-
-See: [label position](${galleryEditorPath}doc-example/label-position).
+Distance to the host graphic element. Works when position is string value (like `'top'`、`'insideRight'`).
+
+See: [label position](${galleryEditorPath}doc-example/label-position).
{{ if: !${noRotate} }}
#${prefix} rotate(number) = ${defaultRotate}
-Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.
-
-See: [label rotation](${galleryEditorPath}bar-label-rotation).
+Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.
+
+See: [label rotation](${galleryEditorPath}bar-label-rotation).
{{ /if }}
#${prefix} offset(Array)
-Whether to move text slightly. For example: `[30, 40]` means move `30` horizontally and move `40` vertically.
+Whether to move text slightly. For example: `[30, 40]` means move `30` horizontally and move `40` vertically.
{{ if: ${formatter} }}
#${prefix} formatter(string|Function)
@@ -63,41 +63,41 @@ Whether to move text slightly. For example: `[30, 40]` means move `30` horizonta
{{ if: ${ellipsis} }}
#${prefix} ellipsis(boolean) = true
-When the text is overflow, whether to replace the excess part with apostrophe.
+When the text is overflow, whether to replace the excess part with apostrophe.
{{ /if }}
{{ target: partial-label-position }}
-Label position.
-
-**Followings are the options: **
-
-+ [x, y]
-
- Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.
- For example:
- ```js
- // Absolute pixel values
- position: [10, 10],
- // Relative percentage
- position: ['50%', '50%']
- ```
-
-+ 'top'
-+ 'left'
-+ 'right'
-+ 'bottom'
-+ 'inside'
-+ 'insideLeft'
-+ 'insideRight'
-+ 'insideTop'
-+ 'insideBottom'
-+ 'insideTopLeft'
-+ 'insideBottomLeft'
-+ 'insideTopRight'
-+ 'insideBottomRight'
-
+Label position.
+
+**Followings are the options: **
+
++ [x, y]
+
+ Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.
+ For example:
+ ```js
+ // Absolute pixel values
+ position: [10, 10],
+ // Relative percentage
+ position: ['50%', '50%']
+ ```
+
++ 'top'
++ 'left'
++ 'right'
++ 'bottom'
++ 'inside'
++ 'insideLeft'
++ 'insideRight'
++ 'insideTop'
++ 'insideBottom'
++ 'insideTopLeft'
++ 'insideBottomLeft'
++ 'insideTopRight'
++ 'insideBottomRight'
+
See: [label position](${galleryViewPath}doc-example/label-position).
diff --git a/en/option/partial/line-data.md b/en/option/partial/line-data.md
index 0f307a6..06d285d 100644
--- a/en/option/partial/line-data.md
+++ b/en/option/partial/line-data.md
@@ -1,18 +1,18 @@
{{ target: partial-line-data-desc }}
-Every data item is an array, the first item of which states the starting position, and the second the ending position. Position is assigned via `coord` attribute to the corresponding coordinate.
-
-**For example: **
-```js
-data: [
- [{
- coord: [10, 20],
- // data value
- value: 10
- }, {
- coord: [20, 30]
- }]
-]
+Every data item is an array, the first item of which states the starting position, and the second the ending position. Position is assigned via `coord` attribute to the corresponding coordinate.
+
+**For example: **
+```js
+data: [
+ [{
+ coord: [10, 20],
+ // data value
+ value: 10
+ }, {
+ coord: [20, 30]
+ }]
+]
```
diff --git a/en/option/partial/line-style.md b/en/option/partial/line-style.md
index 9465f9b..f4e12eb 100644
--- a/en/option/partial/line-style.md
+++ b/en/option/partial/line-style.md
@@ -6,11 +6,11 @@
${name}Line color. {{ if: ${useColorPalatte} }} Color is taken from [option.color Palette](~color) by default. {{ /if }}
{{ if: ${hasCallback} }}
-Supports callback functions, in the form of:
-```js
-(params: Object) => Color
-```
-Input parameters are `seriesIndex`, `dataIndex`, `data`, `value`, and etc. of data item.
+Supports callback functions, in the form of:
+```js
+(params: Object) => Color
+```
+Input parameters are `seriesIndex`, `dataIndex`, `data`, `value`, and etc. of data item.
{{ /if }}
{{ use: partial-color-desc() }}
@@ -21,11 +21,11 @@ ${name} line width.
#${prefix} type(string) = ${defaultType|default('solid')}
-${name} line type.
-
-Options are:
-+ `'solid'`
-+ `'dashed'`
+${name} line type.
+
+Options are:
++ `'solid'`
++ `'dashed'`
+ `'dotted'`
{{ use: partial-style-shadow-opacity(
@@ -38,6 +38,6 @@ Options are:
{{ if: ${hasCurveness} }}
#${prefix} curveness(number) = 0
-Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
+Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
{{ /if }}
diff --git a/en/option/partial/mark-line.md b/en/option/partial/mark-line.md
index 46ccb4d..3f79139 100644
--- a/en/option/partial/mark-line.md
+++ b/en/option/partial/mark-line.md
@@ -15,8 +15,8 @@ Symbol type at the two ends of the mark line. It can be an array for two ends, o
##${prefix} symbolSize(number|Array)
-Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.
-
+Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.
+
**Attention: ** You cannot assgin width and height seperately as normal `symbolSize`.
##${prefix} precision(number) = 2
@@ -56,73 +56,73 @@ Mark line style.
##${prefix} data(*)
-Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.
-
-1. Assign coordinate according to container with [x](~series-${seriesType}.markLine.data.0.x), [y](~series-${seriesType}.markLine.data.0.y) attribute, in which pixel values and percentage are supported.
+Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.
+
+1. Assign coordinate according to container with [x](~series-${seriesType}.markLine.data.0.x), [y](~series-${seriesType}.markLine.data.0.y) attribute, in which pixel values and percentage are supported.
{{ if: ${hasCoord} }}
-2. Assign coordinate position with [coord](~series-${seriesType}.markLine.data.0.coord) attribute, in which `'min'`, `'max'`, `'average'` are supported for each dimension.
+2. Assign coordinate position with [coord](~series-${seriesType}.markLine.data.0.coord) attribute, in which `'min'`, `'max'`, `'average'` are supported for each dimension.
{{ /if }}{{ if: ${hasType} }}
-3. Use [type](~series-${seriesType}.markLine.data.0.type) attribute to mark the maximum and minimum values in the series, in which [valueIndex](~series-${seriesType}.markLine.data.0.valueIndex) or [valueDim](~series-${seriesType}.markLine.data.0.valueDim) can be used to assign the dimension.
-
-4. You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning `xAxis` or `yAxis`. See [scatter-weight](${galleryEditorPath}scatter-weight) for example.
+3. Use [type](~series-${seriesType}.markLine.data.0.type) attribute to mark the maximum and minimum values in the series, in which [valueIndex](~series-${seriesType}.markLine.data.0.valueIndex) or [valueDim](~series-${seriesType}.markLine.data.0.valueDim) can be used to assign the dimension.
+
+4. You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning `xAxis` or `yAxis`. See [scatter-weight](${galleryEditorPath}scatter-weight) for example.
{{ /if }}
-When multiple attributes exist, priority is as the above order.
+When multiple attributes exist, priority is as the above order.
{{ if: ${hasType} }}
-You may also set the type of mark line through `type`, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through `valueIndex`.
+You may also set the type of mark line through `type`, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through `valueIndex`.
{{ /if }}
-```
-data: [
-
-{{ if: ${hasType} }}{
- name: 'average line',
- // 'average', 'min', and 'max' are supported
- type: 'average'
- },
- {
- name: 'Horizontal line with Y value at 100',
- yAxis: 100
- },
- [
- {
- // Use the same name with starting and ending point
- name: 'Minimum to Maximum',
- type: 'min'
- },
- {
- type: 'max'
- }
- ],
-{{ /if }}{{ if: ${hasCoord} }}[
- {
- name: 'Markline between two points',
- coord: [10, 20]
- },
- {
- coord: [20, 30]
- }
- ], [{
- // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.
- yAxis: 'max',
- x: '90%'
- }, {
- type: 'max'
- }],
-{{ /if }}[
- {
- name: 'Mark line between two points',
- x: 100,
- y: 100
- },
- {
- x: 500,
- y: 200
- }
- ]
-]
+```
+data: [
+
+{{ if: ${hasType} }}{
+ name: 'average line',
+ // 'average', 'min', and 'max' are supported
+ type: 'average'
+ },
+ {
+ name: 'Horizontal line with Y value at 100',
+ yAxis: 100
+ },
+ [
+ {
+ // Use the same name with starting and ending point
+ name: 'Minimum to Maximum',
+ type: 'min'
+ },
+ {
+ type: 'max'
+ }
+ ],
+{{ /if }}{{ if: ${hasCoord} }}[
+ {
+ name: 'Markline between two points',
+ coord: [10, 20]
+ },
+ {
+ coord: [20, 30]
+ }
+ ], [{
+ // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.
+ yAxis: 'max',
+ x: '90%'
+ }, {
+ type: 'max'
+ }],
+{{ /if }}[
+ {
+ name: 'Mark line between two points',
+ x: 100,
+ y: 100
+ },
+ {
+ x: 500,
+ y: 200
+ }
+ ]
+]
```
###${prefix} 0(Object)
@@ -165,17 +165,17 @@ Whether show label or not.
#${prefix} position(string) = 'end'
-Positions of labels can be:
-+ `'start'` starting point of the line.
-+ `'middle'` middle point of the line.
-+ `'end'` ending point of the line.
-
-Since version 4.7.0, more label positions are supported: `'start'`, `'middle'`, `'end'`, `'insideStartTop'`, `'insideStartBottom'`, `'insideMiddleTop'`, `'insideMiddleBottom'`, `'insideEndTop'`, `'insideEndBottom'`.
-
-`'insideMiddleBottom'` is the same as `'middle'`. Position is as the following chart.
-
-The distance between labels and mark lines can be set with [label.distance](~series-${seriesType}.markLine.label.distance).
-
+Positions of labels can be:
++ `'start'` starting point of the line.
++ `'middle'` middle point of the line.
++ `'end'` ending point of the line.
+
+Since version 4.7.0, more label positions are supported: `'start'`, `'middle'`, `'end'`, `'insideStartTop'`, `'insideStartBottom'`, `'insideMiddleTop'`, `'insideMiddleBottom'`, `'insideEndTop'`, `'insideEndBottom'`.
+
+`'insideMiddleBottom'` is the same as `'middle'`. Position is as the following chart.
+
+The distance between labels and mark lines can be set with [label.distance](~series-${seriesType}.markLine.label.distance).
+
~[800x500](${galleryViewPath}bar-markline&reset=1&edit=1)
#${prefix} distance(number|Array)
@@ -193,13 +193,13 @@ The distance between labels and mark lines. If it's an array, then the first ele
{{ if: ${hasType} }}
#${prefix} type(string)
-Special label types, are used to label maximum value, minimum value and so on.
-
-**Options are:**
-+ `'min'` minimum value.
-+ `'max'` maximum value.
-+ `'average'` average value.
-+ `'median'` median value.
+Special label types, are used to label maximum value, minimum value and so on.
+
+**Options are:**
++ `'min'` minimum value.
++ `'max'` maximum value.
++ `'average'` average value.
++ `'median'` median value.
{{ /if }}
{{ if: ${hasCoord} }}
@@ -213,7 +213,7 @@ Works only when [type](~series-${seriesType}.markLine.data.type) is assigned. It
#${prefix} coord(Array)
-Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be `x`, and `y` for [rectangular coordinates](~grid), or `radius`, and `angle` for [polar coordinates](~polar).
+Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be `x`, and `y` for [rectangular coordinates](~grid), or `radius`, and `angle` for [polar coordinates](~polar).
{{ use: marker-coord-explain() }}
{{ /if }}
diff --git a/en/option/partial/mark-point.md b/en/option/partial/mark-point.md
index 9ff5728..5f6302d 100644
--- a/en/option/partial/mark-point.md
+++ b/en/option/partial/mark-point.md
@@ -52,54 +52,54 @@ Mark point style.
##${prefix} data(Array)
-Data array for mark points, each of which is an object. Here are some ways to assign mark point position.
-1. Assign coordinate according to container with [x](~series-${seriesType}.markPoint.data.x), [y](~series-${seriesType}.markPoint.data.y) attribute, in which pixel values and percentage are supported.
+Data array for mark points, each of which is an object. Here are some ways to assign mark point position.
+1. Assign coordinate according to container with [x](~series-${seriesType}.markPoint.data.x), [y](~series-${seriesType}.markPoint.data.y) attribute, in which pixel values and percentage are supported.
{{ if: ${hasCoord} }}
-2. Assign coordinate position with [coord](~series-${seriesType}.markPoint.data.coord) attribute, in which `'min'`, `'max'`, `'average'` are supported for each dimension.
+2. Assign coordinate position with [coord](~series-${seriesType}.markPoint.data.coord) attribute, in which `'min'`, `'max'`, `'average'` are supported for each dimension.
{{ /if }}{{ if: ${hasType} }}
-3. Use [type](~series-${seriesType}.markPoint.data.type) attribute to mark the maximum and minimum values in the series, in which [valueIndex](~series-${seriesType}.markPoint.data.valueIndex) or [valueDim](~series-${seriesType}.markPoint.data.valueDim) can be used to assign the dimension.
+3. Use [type](~series-${seriesType}.markPoint.data.type) attribute to mark the maximum and minimum values in the series, in which [valueIndex](~series-${seriesType}.markPoint.data.valueIndex) or [valueDim](~series-${seriesType}.markPoint.data.valueDim) can be used to assign the dimension.
{{ /if }}
-When multiple attributes exist, priority is as the above order.
-
-**For example: **
-```js
+When multiple attributes exist, priority is as the above order.
+
+**For example: **
+```js
data: [{{ if: ${hasType} }}
- {
- name: 'maximum',
- type: 'max'
+ {
+ name: 'maximum',
+ type: 'max'
}, {{ /if }}{{ if: ${hasCoord} }}
- {
- name: 'coordinate',
- coord: [10, 20]
- }, {
- name: 'fixed x position',
- yAxis: 10,
- x: '90%'
+ {
+ name: 'coordinate',
+ coord: [10, 20]
+ }, {
+ name: 'fixed x position',
+ yAxis: 10,
+ x: '90%'
}, {{ /if }}
- {
- name: 'screen coordinate',
- x: 100,
- y: 100
- }
-]
+ {
+ name: 'screen coordinate',
+ x: 100,
+ y: 100
+ }
+]
```
###${prefix} name(string) = ''
-Mark point name.
+Mark point name.
{{ if: ${hasType} }}
###${prefix} type(string)
-Special label types, are used to label maximum value, minimum value and so on.
-
-**Options are:**
-+ `'min'` maximum value.
-+ `'max'` minimum value.
-+ `'average'` average value.
+Special label types, are used to label maximum value, minimum value and so on.
+
+**Options are:**
++ `'min'` maximum value.
++ `'max'` minimum value.
++ `'average'` average value.
{{ /if }}
{{ if: ${hasCoord} }}
@@ -113,7 +113,7 @@ Works only when [type](~series-${seriesType}.markPoint.data.type) is assigned. I
###${prefix} coord(Array)
-Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be `x`, and `y` for [rectangular coordinates](~grid), or `radius`, and `angle` for [polar coordinates](~polar).
+Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be `x`, and `y` for [rectangular coordinates](~grid), or `radius`, and `angle` for [polar coordinates](~polar).
{{ use: marker-coord-explain() }}
{{ /if }}
diff --git a/en/option/partial/padding.md b/en/option/partial/padding.md
index 8b99af6..5d53521 100644
--- a/en/option/partial/padding.md
+++ b/en/option/partial/padding.md
@@ -1,20 +1,20 @@
{{ target: partial-padding }}
-${componentName} space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.
-
-Examples:
-```js
-// Set padding to be 5
-padding: 5
-// Set the top and bottom paddings to be 5, and left and right paddings to be 10
-padding: [5, 10]
-// Set each of the four paddings seperately
-padding: [
- 5, // up
- 10, // right
- 5, // down
- 10, // left
-]
+${componentName} space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.
+
+Examples:
+```js
+// Set padding to be 5
+padding: 5
+// Set the top and bottom paddings to be 5, and left and right paddings to be 10
+padding: [5, 10]
+// Set each of the four paddings seperately
+padding: [
+ 5, // up
+ 10, // right
+ 5, // down
+ 10, // left
+]
```
diff --git a/en/option/partial/parallel.md b/en/option/partial/parallel.md
index 1f87040..a9472a2 100644
--- a/en/option/partial/parallel.md
+++ b/en/option/partial/parallel.md
@@ -1,122 +1,122 @@
{{ target: partial-parallel-introduce }}
-<br>
-
----
-
-**Introduction about Parallel coordinates**
-
+<br>
+
+---
+
+**Introduction about Parallel coordinates**
+
[Parallel Coordinates](https://en.wikipedia.org/wiki/Parallel_coordinates) is a common way of visualizing high-dimensional geometry and analyzing multivariate data.
{{ use: partial-parallel-data-example() }}
-Parallel coordinates are often used to visualize multi-dimension data shown above. Each axis represents a dimension (namely, a column), and each line represents a data item. Data can be brush-selected on axes. For example:
-
-~[600x400](${galleryViewPath}doc-example/parallel-all&edit=1&reset=1)
-
----
-
-**Brief about Configuration**
-
-Basic configuration parallel coordinates is shown as follow:
-
-```javascript
-option = {
- parallelAxis: [ // Definitions of axes.
- {dim: 0, name: schema[0].text}, // Each axis has a 'dim' attribute, representing dimension index in data.
- {dim: 1, name: schema[1].text},
- {dim: 2, name: schema[2].text},
- {dim: 3, name: schema[3].text},
- {dim: 4, name: schema[4].text},
- {dim: 5, name: schema[5].text},
- {dim: 6, name: schema[6].text},
- {dim: 7, name: schema[7].text,
- type: 'category', // Also supports category data.
- data: ['Excellent', 'good', 'light pollution', 'moderate pollution', 'heavy pollution', 'severe pollution']
- }
- ],
- parallel: { // Definition of a parallel coordinate system.
- left: '5%', // Location of parallel coordinate system.
- right: '13%',
- bottom: '10%',
- top: '20%',
- parallelAxisDefault: { // A pattern for axis definition, which can avoid repeating in `parallelAxis`.
- type: 'value',
- nameLocation: 'end',
- nameGap: 20
- }
- },
- series: [ // Here the three series sharing the same parallel coordinate system.
- {
- name: 'Beijing',
- type: 'parallel', // The type of this series is 'parallel'
- data: [
- [1, 55, 9, 56, 0.46, 18, 6, 'good'],
- [2, 25, 11, 21, 0.65, 34, 9, 'excellent'],
- ...
- ]
- },
- {
- name: 'Shanghai',
- type: 'parallel',
- data: [
- [3, 56, 7, 63, 0.3, 14, 5, 'good'],
- [4, 33, 7, 29, 0.33, 16, 6, 'excellent'],
- ...
- ]
- },
- {
- name: 'Guangzhou',
- type: 'parallel',
- data: [
- [4, 33, 7, 29, 0.33, 16, 6, 'excellent'],
- [5, 42, 24, 44, 0.76, 40, 16, 'excellent'],
- ...
- ]
- }
- ]
-};
-```
-
-Three components are involved here: [parallel](~parallel), [parallelAxis](~parallelAxis), [series-parallel](~series-parallel)
-
-+ [parallel](~parallel)
-
- This component is the coordinate system. One or more series (like "Beijing", "Shanghai", and "Guangzhou" in the above example) can share one coordinate system.
-
- Like other coordinate systems, multiple parallel coordinate systems can be created in one echarts instance.
-
- Position setting is also carried out here.
-
-+ [parallelAxis](~parallelAxis)
-
- This is axis configuration. Multiple axes are needed in parallel coordinates.
-
- [parallelAxis.parallelIndex](~parallelAxis.parallelIndex) is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.
-
-+ [series-parallel](~series-parallel)
-
- This is the definition of parallel series, which will be drawn on parallel coordinate system.
-
- [parallelAxis.parallelIndex](~parallelAxis.parallelIndex) is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.
-
-<br>
-
----
-
+Parallel coordinates are often used to visualize multi-dimension data shown above. Each axis represents a dimension (namely, a column), and each line represents a data item. Data can be brush-selected on axes. For example:
+
+~[600x400](${galleryViewPath}doc-example/parallel-all&edit=1&reset=1)
+
+---
+
+**Brief about Configuration**
+
+Basic configuration parallel coordinates is shown as follow:
+
+```javascript
+option = {
+ parallelAxis: [ // Definitions of axes.
+ {dim: 0, name: schema[0].text}, // Each axis has a 'dim' attribute, representing dimension index in data.
+ {dim: 1, name: schema[1].text},
+ {dim: 2, name: schema[2].text},
+ {dim: 3, name: schema[3].text},
+ {dim: 4, name: schema[4].text},
+ {dim: 5, name: schema[5].text},
+ {dim: 6, name: schema[6].text},
+ {dim: 7, name: schema[7].text,
+ type: 'category', // Also supports category data.
+ data: ['Excellent', 'good', 'light pollution', 'moderate pollution', 'heavy pollution', 'severe pollution']
+ }
+ ],
+ parallel: { // Definition of a parallel coordinate system.
+ left: '5%', // Location of parallel coordinate system.
+ right: '13%',
+ bottom: '10%',
+ top: '20%',
+ parallelAxisDefault: { // A pattern for axis definition, which can avoid repeating in `parallelAxis`.
+ type: 'value',
+ nameLocation: 'end',
+ nameGap: 20
+ }
+ },
+ series: [ // Here the three series sharing the same parallel coordinate system.
+ {
+ name: 'Beijing',
+ type: 'parallel', // The type of this series is 'parallel'
+ data: [
+ [1, 55, 9, 56, 0.46, 18, 6, 'good'],
+ [2, 25, 11, 21, 0.65, 34, 9, 'excellent'],
+ ...
+ ]
+ },
+ {
+ name: 'Shanghai',
+ type: 'parallel',
+ data: [
+ [3, 56, 7, 63, 0.3, 14, 5, 'good'],
+ [4, 33, 7, 29, 0.33, 16, 6, 'excellent'],
+ ...
+ ]
+ },
+ {
+ name: 'Guangzhou',
+ type: 'parallel',
+ data: [
+ [4, 33, 7, 29, 0.33, 16, 6, 'excellent'],
+ [5, 42, 24, 44, 0.76, 40, 16, 'excellent'],
+ ...
+ ]
+ }
+ ]
+};
+```
+
+Three components are involved here: [parallel](~parallel), [parallelAxis](~parallelAxis), [series-parallel](~series-parallel)
+
++ [parallel](~parallel)
+
+ This component is the coordinate system. One or more series (like "Beijing", "Shanghai", and "Guangzhou" in the above example) can share one coordinate system.
+
+ Like other coordinate systems, multiple parallel coordinate systems can be created in one echarts instance.
+
+ Position setting is also carried out here.
+
++ [parallelAxis](~parallelAxis)
+
+ This is axis configuration. Multiple axes are needed in parallel coordinates.
+
+ [parallelAxis.parallelIndex](~parallelAxis.parallelIndex) is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.
+
++ [series-parallel](~series-parallel)
+
+ This is the definition of parallel series, which will be drawn on parallel coordinate system.
+
+ [parallelAxis.parallelIndex](~parallelAxis.parallelIndex) is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.
+
+<br>
+
+---
+
**Notes and Best Practices**
{{ use: partial-parallel-axis-default() }}
-**If data is too large and cause bad performance**
-
-It is suggested to set [series-parallel.lineStyle.width](~series-parallel.lineStyle.width) to be `0.5` (or less), which may improve performance significantly.
-
-<br>
-
----
-
+**If data is too large and cause bad performance**
+
+It is suggested to set [series-parallel.lineStyle.width](~series-parallel.lineStyle.width) to be `0.5` (or less), which may improve performance significantly.
+
+<br>
+
+---
+
**Display High-Dimension Data**
{{ use: partial-parallel-high-dim() }}
@@ -125,21 +125,21 @@ It is suggested to set [series-parallel.lineStyle.width](~series-parallel.lineSt
{{ target: partial-parallel-data-example }}
-For example, [series-parallel.data](~series-parallel.data) is the following data:
-
-```javascript
-[
- [1, 55, 9, 56, 0.46, 18, 6, 'good'],
- [2, 25, 11, 21, 0.65, 34, 9, 'excellent'],
- [3, 56, 7, 63, 0.3, 14, 5, 'good'],
- [4, 33, 7, 29, 0.33, 16, 6, 'excellent'],
- { // Data item can also be an Object, so that perticular settings of its line can be set here.
- value: [5, 42, 24, 44, 0.76, 40, 16, 'excellent']
- lineStyle: {...},
- }
- ...
-]
-```
+For example, [series-parallel.data](~series-parallel.data) is the following data:
+
+```javascript
+[
+ [1, 55, 9, 56, 0.46, 18, 6, 'good'],
+ [2, 25, 11, 21, 0.65, 34, 9, 'excellent'],
+ [3, 56, 7, 63, 0.3, 14, 5, 'good'],
+ [4, 33, 7, 29, 0.33, 16, 6, 'excellent'],
+ { // Data item can also be an Object, so that perticular settings of its line can be set here.
+ value: [5, 42, 24, 44, 0.76, 40, 16, 'excellent']
+ lineStyle: {...},
+ }
+ ...
+]
+```
In data above, each row is a "data item", and each column represents a "dimension". For example, the meanings of columns above are: "data", "AQI", "PM2.5", "PM10", "carbon monoxide level", "nitrogen dioxide level", and "sulfur dioxide level".
@@ -152,9 +152,9 @@ When configuring multiple [parallelAxis](~parallelAxis), there might be some com
{{ target: partial-parallel-high-dim }}
-When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.
-
-In this case, you may use [parallel.axisExpandable](~parallel.axisExpandable) to improve the display. See this example:
-
+When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.
+
+In this case, you may use [parallel.axisExpandable](~parallel.axisExpandable) to improve the display. See this example:
+
~[600x460](${galleryViewPath}map-parallel-prices&edit=1&reset=1)
diff --git a/en/option/partial/rect-layout.md b/en/option/partial/rect-layout.md
index 2beb57d..d44a7c0 100644
--- a/en/option/partial/rect-layout.md
+++ b/en/option/partial/rect-layout.md
@@ -11,33 +11,33 @@
#${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'`.
-
+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'`.
-
+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%'`.
+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%'`.
+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 }}
diff --git a/en/option/partial/style-shadow-opacity.md b/en/option/partial/style-shadow-opacity.md
index 2420b0a..97ac128 100644
--- a/en/option/partial/style-shadow-opacity.md
+++ b/en/option/partial/style-shadow-opacity.md
@@ -3,42 +3,42 @@
#${prefix} shadowBlur(number) = ${defaultShadowBlur}
-Size of shadow blur. This attribute should be used along with `shadowColor`,`shadowOffsetX`, `shadowOffsetY` to set shadow to component.
-
-For example:
-```js
-{
- shadowColor: 'rgba(0, 0, 0, 0.5)',
- shadowBlur: 10
-}
-```
+Size of shadow blur. This attribute should be used along with `shadowColor`,`shadowOffsetX`, `shadowOffsetY` to set shadow to component.
+
+For example:
+```js
+{
+ shadowColor: 'rgba(0, 0, 0, 0.5)',
+ shadowBlur: 10
+}
+```
{{ if: ${needShow} }}
-**Attention**: This property works only if `show: true` is configured and `backgroundColor` is defined other than `transparent`.
+**Attention**: This property works only if `show: true` is configured and `backgroundColor` is defined other than `transparent`.
{{ /if }}
#${prefix} shadowColor(Color) = ${defaultShadowColor}
-Shadow color. Support same format as `color`.
+Shadow color. Support same format as `color`.
{{ if: ${needShow} }}
-**Attention**: This property works only if `show: true` configured.
+**Attention**: This property works only if `show: true` configured.
{{ /if }}
#${prefix} shadowOffsetX(number) = ${defaultShadowOffsetX|default(0)}
-Offset distance on the horizontal direction of shadow.
+Offset distance on the horizontal direction of shadow.
{{ if: ${needShow} }}
-**Attention**: This property works only if `show: true` configured.
+**Attention**: This property works only if `show: true` configured.
{{ /if }}
#${prefix} shadowOffsetY(number) = ${defaultShadowOffsetY|default(0)}
-Offset distance on the vertical direction of shadow.
+Offset distance on the vertical direction of shadow.
{{ if: ${needShow} }}
-**Attention**: This property works only if `show: true` configured.
+**Attention**: This property works only if `show: true` configured.
{{ /if }}
diff --git a/en/option/partial/text-style.md b/en/option/partial/text-style.md
index 6812273..62382c2 100644
--- a/en/option/partial/text-style.md
+++ b/en/option/partial/text-style.md
@@ -32,42 +32,42 @@
{{ if: !${noRich} }}
#${prefix} rich(Object)
-"Rich text styles" can be defined in this `rich` property. For example:
-
-```js
-label: {
- // Styles defined in 'rich' can be applied to some fragments
- // of text by adding some markers to those fragment, like
- // `{styleName|text content text content}`.
- // `'\n'` is the newline character.
- formatter: [
- '{a|Style "a" is applied to this snippet}'
- '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'
- ].join('\n'),
-
- rich: {
- a: {
- color: 'red',
- lineHeight: 10
- },
- b: {
- backgroundColor: {
- image: 'xxx/xxx.jpg'
- },
- height: 40
- },
- x: {
- fontSize: 18,
- fontFamily: 'Microsoft YaHei',
- borderColor: '#449933',
- borderRadius: 4
- },
- ...
- }
-}
-```
-
-
+"Rich text styles" can be defined in this `rich` property. For example:
+
+```js
+label: {
+ // Styles defined in 'rich' can be applied to some fragments
+ // of text by adding some markers to those fragment, like
+ // `{styleName|text content text content}`.
+ // `'\n'` is the newline character.
+ formatter: [
+ '{a|Style "a" is applied to this snippet}'
+ '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'
+ ].join('\n'),
+
+ rich: {
+ a: {
+ color: 'red',
+ lineHeight: 10
+ },
+ b: {
+ backgroundColor: {
+ image: 'xxx/xxx.jpg'
+ },
+ height: 40
+ },
+ x: {
+ fontSize: 18,
+ fontFamily: 'Microsoft YaHei',
+ borderColor: '#449933',
+ borderRadius: 4
+ },
+ ...
+ }
+}
+```
+
+
For more details, see [Rich Text](tutorial.html#Rich%20Text) please.
##${prefix} <style_name>(Object)
@@ -84,7 +84,7 @@ For more details, see [Rich Text](tutorial.html#Rich%20Text) please.
#${prefix} color(Color) = ${defaultColor|default('"#fff"')}
-${name} text color.
+${name} text color.
{{ if: ${enableAutoColor} }}
{{ use: partial-text-style-auto-color-desc() }}
@@ -92,43 +92,43 @@ ${name} text color.
#${prefix} fontStyle(string) = 'normal'
-${name} font style.
-
-Options are:
-+ `'normal'`
-+ `'italic'`
+${name} font style.
+
+Options are:
++ `'normal'`
++ `'italic'`
+ `'oblique'`
#${prefix} fontWeight(string|number) = ${defaultFontWeight|default('normal')}
-${name} font thick weight.
-
-Options are:
-+ `'normal'`
-+ `'bold'`
-+ `'bolder'`
-+ `'lighter'`
+${name} font thick weight.
+
+Options are:
++ `'normal'`
++ `'bold'`
++ `'bolder'`
++ `'lighter'`
+ 100 | 200 | 300 | 400...
#${prefix} fontFamily(string) = 'sans-serif'
-${name} font family.
-
+${name} font family.
+
Can also be 'serif' , 'monospace', ...
#${prefix} fontSize(number) = ${defaultFontSize|default(12)}
-${name} font size.
+${name} font size.
{{ if: !${noAlign} }}
#${prefix} align(string) = ${defaultAlign}
-Horizontal alignment of text, automatic by default.
-
-Options are:
-+ `'left'`
-+ `'center'`
-+ `'right'`
+Horizontal alignment of text, automatic by default.
+
+Options are:
++ `'left'`
++ `'center'`
++ `'right'`
{{ use: partial-text-style-rich-inherit(
name = 'align',
@@ -139,12 +139,12 @@ Options are:
{{ if: !${noVerticalAlign} }}
#${prefix} verticalAlign(string) = ${defaultVerticalAlign}
-Vertical alignment of text, automatic by default.
-
-Options are:
-+ `'top'`
-+ `'middle'`
-+ `'bottom'`
+Vertical alignment of text, automatic by default.
+
+Options are:
++ `'top'`
++ `'middle'`
++ `'bottom'`
{{ use: partial-text-style-rich-inherit(
name = 'verticalAlign',
@@ -164,24 +164,24 @@ Line height of the text fragment.
{{ if: !${noBox} }}
#${prefix} backgroundColor(string|Object) = 'transparent'
-Background color of the text fragment.
-
-Can be color string, like `'#123234'`, `'red'`, `'rgba(0,23,11,0.3)'`.
-
-Or image can be used, for example:
-
-```js
-backgroundColor: {
- image: 'xxx/xxx.png'
- // It can be URL of a image,
- // or dataURI,
- // or HTMLImageElement,
- // or HTMLCanvasElement.
-}
-```
-
-`width` or `height` can be specified when using background image, or
-auto adapted by default.
+Background color of the text fragment.
+
+Can be color string, like `'#123234'`, `'red'`, `'rgba(0,23,11,0.3)'`.
+
+Or image can be used, for example:
+
+```js
+backgroundColor: {
+ image: 'xxx/xxx.png'
+ // It can be URL of a image,
+ // or dataURI,
+ // or HTMLImageElement,
+ // or HTMLCanvasElement.
+}
+```
+
+`width` or `height` can be specified when using background image, or
+auto adapted by default.
{{ if: ${enableAutoColor} }}
{{ use: partial-text-style-auto-color-desc() }}
@@ -189,7 +189,7 @@ auto adapted by default.
#${prefix} borderColor(Color) = 'transparent'
-Border color of the text fragment.
+Border color of the text fragment.
{{ if: ${enableAutoColor} }}
{{ use: partial-text-style-auto-color-desc() }}
@@ -205,12 +205,12 @@ Border radius of the text fragment.
#${prefix} padding(number|Array) = 0
-Padding of the text fragment, for example:
-
-+ `padding: [3, 4, 5, 6]`: represents padding of `[top, right, bottom, left]`.
-+ `padding: 4`: represents `padding: [4, 4, 4, 4]`.
-+ `padding: [3, 4]`: represents `padding: [3, 4, 3, 4]`.
-
+Padding of the text fragment, for example:
+
++ `padding: [3, 4, 5, 6]`: represents padding of `[top, right, bottom, left]`.
++ `padding: 4`: represents `padding: [4, 4, 4, 4]`.
++ `padding: [3, 4]`: represents `padding: [3, 4, 3, 4]`.
+
Notice, `width` and `height` specifies the width and height of the content, without `padding`.
#${prefix} shadowColor(Color) = 'transparent'
@@ -227,31 +227,31 @@ Shadow X offset of the text block.
#${prefix} shadowOffsetY(number) = 0
-Shadow Y offset of the text block.
+Shadow Y offset of the text block.
{{ /if }}
#${prefix} width(number|string)
-Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see `backgroundColor`).
-
-Notice, `width` and `height` specifies the width and height of the content, without `padding`.
-
-`width` can also be percent string, like `'100%'`, which represents the percent of `contentWidth` (that is, the width without `padding`) of its container box. It is based on `contentWidth` because that each text fragment is layout based on the `content box`, where it makes no sense that calculating width based on `outerWith` in prectice.
-
-
+Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see `backgroundColor`).
+
+Notice, `width` and `height` specifies the width and height of the content, without `padding`.
+
+`width` can also be percent string, like `'100%'`, which represents the percent of `contentWidth` (that is, the width without `padding`) of its container box. It is based on `contentWidth` because that each text fragment is layout based on the `content box`, where it makes no sense that calculating width based on `outerWith` in prectice.
+
+
Notice, `width` and `height` only work when `rich` specified.
#${prefix} height(number|string)
-Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see `backgroundColor`).
-
-Notice, `width` and `height` specifies the width and height of the content, without `padding`.
-
+Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see `backgroundColor`).
+
+Notice, `width` and `height` specifies the width and height of the content, without `padding`.
+
Notice, `width` and `height` only work when `rich` specified.
#${prefix} textBorderColor(Color) = 'transparent'
-Storke color of the text.
+Storke color of the text.
{{ if: ${enableAutoColor} }}
{{ use: partial-text-style-auto-color-desc() }}
@@ -287,16 +287,16 @@ If set as `'auto'`, the color will assigned as visual color, such as series colo
{{ target: partial-text-style-rich-inherit }}
-If `${name}` is not set in `rich`, `${name}` in parent level will be used. For example:
-
-```js
-{
- ${name}: ${value},
- rich: {
- a: {
- // `${name}` is not set, then it will be ${value}
- }
- }
-}
+If `${name}` is not set in `rich`, `${name}` in parent level will be used. For example:
+
+```js
+{
+ ${name}: ${value},
+ rich: {
+ a: {
+ // `${name}` is not set, then it will be ${value}
+ }
+ }
+}
```
diff --git a/en/option/partial/visual-mapping.md b/en/option/partial/visual-mapping.md
index 3cec028..bed2c9f 100644
--- a/en/option/partial/visual-mapping.md
+++ b/en/option/partial/visual-mapping.md
@@ -1,12 +1,12 @@
{{ target: partial-visual-map-visual-type }}
-+ `symbol`: Type of symbol.
-+ `symbolSize`: Symbol size.
-+ `color`: Symbol color.
-+ `colorAlpha`: Symbol alpha channel.
-+ `opacity`: Opacity of symbol and others (like labels).
-+ `colorLightness`: Lightness in [HSL](https://en.wikipedia.org/wiki/HSL_and_HSV).
-+ `colorSaturation`: Saturation in [HSL](https://en.wikipedia.org/wiki/HSL_and_HSV).
++ `symbol`: Type of symbol.
++ `symbolSize`: Symbol size.
++ `color`: Symbol color.
++ `colorAlpha`: Symbol alpha channel.
++ `opacity`: Opacity of symbol and others (like labels).
++ `colorLightness`: Lightness in [HSL](https://en.wikipedia.org/wiki/HSL_and_HSV).
++ `colorSaturation`: Saturation in [HSL](https://en.wikipedia.org/wiki/HSL_and_HSV).
+ `colorHue`: Hue in [HSL](https://en.wikipedia.org/wiki/HSL_and_HSV).
diff --git a/en/option/partial/z-zlevel.md b/en/option/partial/z-zlevel.md
index b286159..e30a687 100644
--- a/en/option/partial/z-zlevel.md
+++ b/en/option/partial/z-zlevel.md
@@ -3,15 +3,15 @@
#${prefix|default("#")} zlevel(number) = ${defaultZLevel|default(0)}
-`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 separate `zlevel`. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
-
+`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 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`.
#${prefix|default("#")} z(number) = ${defaultZ|default(2)}
-`z` value of all graphical elements in ${componentName}, which controls order of drawing graphical components. Components with smaller `z` values may be overwritten by those with larger `z` values.
-
+`z` value of all graphical elements in ${componentName}, which controls order of drawing graphical components. Components with smaller `z` values may be overwritten by those with larger `z` values.
+
`z` has a lower priority to `zlevel`, and will not create new Canvas.
diff --git a/en/option/series/bar.md b/en/option/series/bar.md
index b46dfa4..22c58ee 100644
--- a/en/option/series/bar.md
+++ b/en/option/series/bar.md
@@ -3,8 +3,8 @@
# series.bar(Object)
-**bar chart**
-
+**bar chart**
+
Bar chart shows different data through the height of a bar, which is used in [rectangular coordinate](~grid) with at least 1 category axis.
## type(string) = 'bar'
@@ -31,8 +31,8 @@ Bar chart shows different data through the height of a bar, which is used in [re
version = "4.5.0"
) }}
-If to add round caps at the end of the bar sectors. Valid only for bar series on polar coordinates.
-
+If to add round caps at the end of the bar sectors. Valid only for bar series on polar coordinates.
+
~[800x500](${galleryViewPath}polar-roundCap&reset=1&edit=1)
## label(Object)
@@ -61,8 +61,8 @@ If to add round caps at the end of the bar sectors. Valid only for bar series on
version = "4.7.0"
) }}
-Whether to show background behind each bar. Use [backgroundStyle](~series-bar.backgroundStyle) to set background style.
-
+Whether to show background behind each bar. Use [backgroundStyle](~series-bar.backgroundStyle) to set background style.
+
~[800x400](${galleryViewPath}bar-background&reset=1&edit=1)
## backgroundStyle(Object)
@@ -71,8 +71,8 @@ Whether to show background behind each bar. Use [backgroundStyle](~series-bar.ba
version = "4.7.0"
) }}
-Background style of each bar if [showBackground](~series-bar.showBackground) is set to be `true`.
-
+Background style of each bar if [showBackground](~series-bar.showBackground) is set to be `true`.
+
~[800x400](${galleryViewPath}bar-background&reset=1&edit=1)
{{ use: partial-bar-item-style(
diff --git a/en/option/series/boxplot.md b/en/option/series/boxplot.md
index 071959d..c68df7d 100644
--- a/en/option/series/boxplot.md
+++ b/en/option/series/boxplot.md
@@ -3,16 +3,16 @@
# series.boxplot(Object)
-[Boxplot](https://en.wikipedia.org/wiki/Box_plot) is a convenient way of graphically depicting groups of numerical data through their quartiles.
-
-**Example:**
-
-~[600x400](${galleryViewPath}boxplot-light-velocity&edit=1&reset=1)
-
-<br>
-Multiple `series` can be displayed in the same coordinate system. Please refer to [this example](${galleryEditorPath}boxplot-multi&edit=1&reset=1).
-
-<br>
+[Boxplot](https://en.wikipedia.org/wiki/Box_plot) is a convenient way of graphically depicting groups of numerical data through their quartiles.
+
+**Example:**
+
+~[600x400](${galleryViewPath}boxplot-light-velocity&edit=1&reset=1)
+
+<br>
+Multiple `series` can be displayed in the same coordinate system. Please refer to [this example](${galleryEditorPath}boxplot-multi&edit=1&reset=1).
+
+<br>
<br>
## type(string) = 'boxplot'
@@ -37,23 +37,23 @@ Whether to enable the animation when hovering on box.
## layout(string) = null
-Layout methods, whose optional values are:
-
-+ `'horizontal'`: horizontally layout all boxes.
-
-+ `'vertical'`: vertically layout all boxes.
-
-The default value is decided by:
-
-+ if there is a `category` axis:
- + if it is horizontal, use `'horizontal'`;
- + otherwise use `'vertical'`;
+Layout methods, whose optional values are:
+
++ `'horizontal'`: horizontally layout all boxes.
+
++ `'vertical'`: vertically layout all boxes.
+
+The default value is decided by:
+
++ if there is a `category` axis:
+ + if it is horizontal, use `'horizontal'`;
+ + otherwise use `'vertical'`;
+ otherwise use `'horizontal'`.
## boxWidth(Array) = [7, 50]
-Up and bottom boundary of box width. The array is in the form of `[min, max]`.
-
+Up and bottom boundary of box width. The array is in the form of `[min, max]`.
+
It could be absolute value in pixel, such as `[7, 50]`, or percentage, such as `['40%', '90%']`. The percentage means the percentage to the maximum possible width.
## itemStyle(Object)
@@ -92,32 +92,32 @@ It could be absolute value in pixel, such as `[7, 50]`, or percentage, such as `
## data(Array)
-Data should be the two-dimensional array shown as follow.
-
-```javascript
-[
- [655, 850, 940, 980, 1175],
- [672.5, 800, 845, 885, 1012.5],
- [780, 840, 855, 880, 940],
- [621.25, 767.5, 815, 865, 1011.25],
- { // the data item could also be an Object, so that it could contains special settings for this data item.
- value: [713.75, 807.5, 810, 870, 963.75],
- itemStyle: {...}
- },
- ...
-]
-```
-
-Every data item (each line in the example above) in the two-dimensional array will be rendered into a box, and each line have five values as:
-
-```javascript
-[min, Q1, median (or Q2), Q3, max]
-```
-
-**Data Processing**
-
-ECharts doesn't contain data processing modules, so the five statistic values should be calculated by yourself and then passes into `boxplot`.
-
+Data should be the two-dimensional array shown as follow.
+
+```javascript
+[
+ [655, 850, 940, 980, 1175],
+ [672.5, 800, 845, 885, 1012.5],
+ [780, 840, 855, 880, 940],
+ [621.25, 767.5, 815, 865, 1011.25],
+ { // the data item could also be an Object, so that it could contains special settings for this data item.
+ value: [713.75, 807.5, 810, 870, 963.75],
+ itemStyle: {...}
+ },
+ ...
+]
+```
+
+Every data item (each line in the example above) in the two-dimensional array will be rendered into a box, and each line have five values as:
+
+```javascript
+[min, Q1, median (or Q2), Q3, max]
+```
+
+**Data Processing**
+
+ECharts doesn't contain data processing modules, so the five statistic values should be calculated by yourself and then passes into `boxplot`.
+
However, ECharts also provide some simple [raw data processing tools](https://github.com/apache/incubator-echarts/tree/master/extension/dataTool). For example, this [example](${galleryEditorPath}boxplot-light-velocity&edit=1&reset=1) uses `echarts.dataTool.prepareBoxplotData` to proceed simple data statistics.
### name(string)
@@ -126,10 +126,10 @@ Name of data item.
### value(Array)
-Value of data item.
-
-```javascript
-[min, Q1, median (or Q2), Q3, max]
+Value of data item.
+
+```javascript
+[min, Q1, median (or Q2), Q3, max]
```
### itemStyle(Object)
diff --git a/en/option/series/candlestick.md b/en/option/series/candlestick.md
index 8bc6149..fc3e548 100644
--- a/en/option/series/candlestick.md
+++ b/en/option/series/candlestick.md
@@ -3,29 +3,29 @@
# series.candlestick(Object)
-A [candlestick](https://en.wikipedia.org/wiki/Candlestick_chart) chart (also called Japanese candlestick chart) is a style of financial chart used to describe price movements of a security, derivative, or currency.
-
-ECharts3 supports both `'candlestick'` and `'k'` in [series.type](~(series.type) (`'k'` would automatically turns into `'candlestick'`).
-
-**An example:**
-
-~[600x400](${galleryViewPath}candlestick-sh&edit=1&reset=1)
-
-
-<br>
-**About color of increase and decrease**
-
-Different countries or regions have different implications on the color of candle stick chart. It may use red to imply increasing with red and decreasing with blue (in China mainland, Taiwan, Japan, Koera, and so on), or to imply increasing with green and decreasing with red (in Europe, North America, Hong Kong, Singapore, and so on). Besides color, the increase and decrease of stock may also be represented with candle stick with or without filling colors.
-
-We use red to represent increasing and blue decreasing by default. If you want to change the configuration, you may change the following parameters.
-
-+ [series-candlestick.itemStyle.color](~series-candlestick.itemStyle.color): fill color for bullish candle stick (namely, increase)
-+ [series-candlestick.itemStyle.color0](~series-candlestick.itemStyle.color0): fill color for bearish candle stick (namely, decrease)
-+ [series-candlestick.itemStyle.borderColor](~series-candlestick.itemStyle.borderColor): border color for bullish candle stick (namely, increase)
-+ [series-candlestick.itemStyle.borderColor0](series-candlestick.itemStyle.borderColor0): border color for bearish candle stick (namely, decrease)
-
-
-<br>
+A [candlestick](https://en.wikipedia.org/wiki/Candlestick_chart) chart (also called Japanese candlestick chart) is a style of financial chart used to describe price movements of a security, derivative, or currency.
+
+ECharts3 supports both `'candlestick'` and `'k'` in [series.type](~(series.type) (`'k'` would automatically turns into `'candlestick'`).
+
+**An example:**
+
+~[600x400](${galleryViewPath}candlestick-sh&edit=1&reset=1)
+
+
+<br>
+**About color of increase and decrease**
+
+Different countries or regions have different implications on the color of candle stick chart. It may use red to imply increasing with red and decreasing with blue (in China mainland, Taiwan, Japan, Koera, and so on), or to imply increasing with green and decreasing with red (in Europe, North America, Hong Kong, Singapore, and so on). Besides color, the increase and decrease of stock may also be represented with candle stick with or without filling colors.
+
+We use red to represent increasing and blue decreasing by default. If you want to change the configuration, you may change the following parameters.
+
++ [series-candlestick.itemStyle.color](~series-candlestick.itemStyle.color): fill color for bullish candle stick (namely, increase)
++ [series-candlestick.itemStyle.color0](~series-candlestick.itemStyle.color0): fill color for bearish candle stick (namely, decrease)
++ [series-candlestick.itemStyle.borderColor](~series-candlestick.itemStyle.borderColor): border color for bullish candle stick (namely, increase)
++ [series-candlestick.itemStyle.borderColor0](series-candlestick.itemStyle.borderColor0): border color for bearish candle stick (namely, decrease)
+
+
+<br>
<br>
## type(string) = 'candlestick'
@@ -50,17 +50,17 @@ Whether to enable animation when hovering on box.
## layout(string) = null
-Layout method, whose values may be:
-
-+ `'horizontal'`: horizontally layout all boxs.
-
-+ `'vertical'`: vertically layout all boxs.
-
-The default value is decided by:
-
-+ if there is a `category` axis:
- + if it is horizontal, use `'horizontal'`;
- + otherwise use `'vertical'`;
+Layout method, whose values may be:
+
++ `'horizontal'`: horizontally layout all boxs.
+
++ `'vertical'`: vertically layout all boxs.
+
+The default value is decided by:
+
++ if there is a `category` axis:
+ + if it is horizontal, use `'horizontal'`;
+ + otherwise use `'vertical'`;
+ otherwise use `'horizontal'`.
## barWidth(number)
@@ -127,24 +127,24 @@ Emphasis style of candlestick.
## data(Array)
-Data should be the two-dimensional array shown as follows.
-
-```javascript
-[
- [2320.26, 2320.26, 2287.3, 2362.94],
- [2300, 2291.3, 2288.26, 2308.38],
- { // the data item could also be an Object, so that it could contains special settings for this data item.
- value: [2300, 2291.3, 2288.26, 2308.38],
- itemStyle: {...}
- },
- ...
-]
-```
-
-Every data item (each line in the example above) represents a box, which contains 4 values. They are:
-
-```javascript
-[open, close, lowest, highest] (namely: [opening value, closing value, lowest value, highest value])
+Data should be the two-dimensional array shown as follows.
+
+```javascript
+[
+ [2320.26, 2320.26, 2287.3, 2362.94],
+ [2300, 2291.3, 2288.26, 2308.38],
+ { // the data item could also be an Object, so that it could contains special settings for this data item.
+ value: [2300, 2291.3, 2288.26, 2308.38],
+ itemStyle: {...}
+ },
+ ...
+]
+```
+
+Every data item (each line in the example above) represents a box, which contains 4 values. They are:
+
+```javascript
+[open, close, lowest, highest] (namely: [opening value, closing value, lowest value, highest value])
```
### name(string)
@@ -153,10 +153,10 @@ Name of data item.
### value(Array)
-Value of data item.
-
-```javascript
-[open, close, lowest, highest] (namely: [opening value, closing value, lowest value, highest value])
+Value of data item.
+
+```javascript
+[open, close, lowest, highest] (namely: [opening value, closing value, lowest value, highest value])
```
### itemStyle(Object)
diff --git a/en/option/series/effectScatter.md b/en/option/series/effectScatter.md
index a05c067..ec5f812 100644
--- a/en/option/series/effectScatter.md
+++ b/en/option/series/effectScatter.md
@@ -3,8 +3,8 @@
# series.effectScatter(Object)
-The scatter (bubble) graph with ripple animation. The special animation effect can visually highlights some data.
-
+The scatter (bubble) graph with ripple animation. The special animation effect can visually highlights some data.
+
**Tip:** The effects of map was achieved through markPoint in ECharts 2.x. However, in ECharts 3, effectScatter on geographic coordinate is recommended for achieving that effects of map.
## type(string) = 'effectScatter'
@@ -23,10 +23,10 @@ Type of effect. Only ripple effect of `'ripple'` is supported currently.
## showEffectOn(string) = 'render'
-When to show the effect.
-
-**Options: **
-+ `'render'` Show the effect when rendering is done.
+When to show the effect.
+
+**Options: **
++ `'render'` Show the effect when rendering is done.
+ `'emphasis'` Show the effect when it is highlight (hover).
## rippleEffect(Object)
diff --git a/en/option/series/funnel.md b/en/option/series/funnel.md
index 64fd0b8..606cb4d 100644
--- a/en/option/series/funnel.md
+++ b/en/option/series/funnel.md
@@ -3,9 +3,9 @@
# series.funnel(Object)
-**Funnel chart**
-
-**sample: **
+**Funnel chart**
+
+**sample: **
~[600x400](${galleryViewPath}funnel&reset=1&edit=1)
## type(string) = 'funnel'
@@ -26,14 +26,14 @@ The specified maximum value.
## minSize(number|string) = '0%'
-The mapped width from minimum data value [min](~series-funnel.min).
-
+The mapped width from minimum data value [min](~series-funnel.min).
+
It can be absolute pixel and also the percentage of [layout width](~series-funnel.width). If you don't want the graph of minimum value to be a triangle, you can set up this property larger than 0.
## maxSize(number|string) = '100%'
-The mapped width from maximum data value [max](~series-funnel.max).
-
+The mapped width from maximum data value [max](~series-funnel.max).
+
It can be absolute pixel and also the percentage of [layout width](~series-funnel.width).
## orient(string) = 'vertical'
@@ -225,35 +225,35 @@ The label configuration of a single data item.
{{ if: ${position} }}
#${prefix} position(string) = 'outside'
-Label position.
-
-**Options: **
-+ `'left'`Left side of funnel chart. Available when [orient](~series-funnel.orient) is `'vertical'`.
-+ `'right'` Right side of funnel chart. Available when [orient](~series-funnel.orient) is `'horizontal'`.
-+ `'top'` Top side of funnel chart. Available when [orient](~series-funnel.orient) is `'vertical'`.
-+ `'bottom'` Bottom side of funnel chart. Available when [orient](~series-funnel.orient) is `'vertical'`.
-+ `'inside'`Inside the trapezoid of funnel chart.
-+ `'insideRight'`Right inside the trapezoid of funnel chart.
-+ `'insideLeft'`Left inside the trapezoid of funnel chart.
-+ `'leftTop'`Top-left of funnel chart.
-+ `'leftBottom'`Bottom-left of funnel chart.
-+ `'rightTop'`Top-right side of funnel chart.
-+ `'rightBottom'`Bottom-right side of funnel chart.
-+ `'inner'` equals to `'inside'`.
-+ `'center'` equals to `'inside'`.
-
-[labelLine](~series-funnel.labelLine) can be used to guide to the corresponding trapezoid when label is not inside.
+Label position.
+
+**Options: **
++ `'left'`Left side of funnel chart. Available when [orient](~series-funnel.orient) is `'vertical'`.
++ `'right'` Right side of funnel chart. Available when [orient](~series-funnel.orient) is `'horizontal'`.
++ `'top'` Top side of funnel chart. Available when [orient](~series-funnel.orient) is `'vertical'`.
++ `'bottom'` Bottom side of funnel chart. Available when [orient](~series-funnel.orient) is `'vertical'`.
++ `'inside'`Inside the trapezoid of funnel chart.
++ `'insideRight'`Right inside the trapezoid of funnel chart.
++ `'insideLeft'`Left inside the trapezoid of funnel chart.
++ `'leftTop'`Top-left of funnel chart.
++ `'leftBottom'`Bottom-left of funnel chart.
++ `'rightTop'`Top-right side of funnel chart.
++ `'rightBottom'`Bottom-right side of funnel chart.
++ `'inner'` equals to `'inside'`.
++ `'center'` equals to `'inside'`.
+
+[labelLine](~series-funnel.labelLine) can be used to guide to the corresponding trapezoid when label is not inside.
{{ /if }}
{{ if: ${formatter} }}
#${prefix} formatter(string|Function)
{{ use: partial-1d-data-label-formatter(
- extra = {
- percent: {
- desc: 'percentage',
- type: 'number'
- }
+ extra = {
+ percent: {
+ desc: 'percentage',
+ type: 'number'
+ }
}
) }}
{{ /if }}
@@ -268,12 +268,12 @@ Label position.
#${prefix} show(boolean)
-Whether to show visual guide line.
+Whether to show visual guide line.
{{ if: ${length} }}
#${prefix} length(number)
-The length of the first part from visual guide line.
+The length of the first part from visual guide line.
{{ /if }}
#${prefix} lineStyle(Object)
diff --git a/en/option/series/gauge.md b/en/option/series/gauge.md
index b1f21ef..594e421 100644
--- a/en/option/series/gauge.md
+++ b/en/option/series/gauge.md
@@ -3,9 +3,9 @@
# series.gauge(Object)
-**Gauge chart**
-
-**Example: **
+**Gauge chart**
+
+**Example: **
~[600x500](${galleryViewPath}gauge-car&reset=1&edit=1)
## type(string) = 'gauge'
@@ -76,11 +76,11 @@ The style of the axis line of gauge chart.
#### color(Array)
-The axis line of gauge chart can be divided to several segments in different colors. The end position and color of each segment can be expressed by an array.
-
-Default value:
-```js
-[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
+The axis line of gauge chart can be divided to several segments in different colors. The end position and color of each segment can be expressed by an array.
+
+Default value:
+```js
+[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
```
#### width(number) = 30
@@ -151,16 +151,16 @@ The distance between the label and tick line.
### formatter(string|Function)
-The content formatter of scale label, which supports both string template and callback function.
-Example:
-```js
-// use string template. the template variable {value} represent the default label text
-formatter: '{value} kg'
-
-// use function callback. the function parameters are scale values.
-formatter: function (value) {
- return value + 'km/h';
-}
+The content formatter of scale label, which supports both string template and callback function.
+Example:
+```js
+// use string template. the template variable {value} represent the default label text
+formatter: '{value} kg'
+
+// use function callback. the function parameters are scale values.
+formatter: function (value) {
+ return value + 'km/h';
+}
```
{{ use: partial-text-style(
@@ -253,12 +253,12 @@ The border width of detail.
### formatter(Function|string)
-Formatter is used to format detail, which supports string template and callback function.
-
-```js
-formatter: function (value) {
- return value.toFixed(0);
-}
+Formatter is used to format detail, which supports string template and callback function.
+
+```js
+formatter: function (value) {
+ return value.toFixed(0);
+}
```
### borderColor(Color) = '#ccc'
diff --git a/en/option/series/graph.md b/en/option/series/graph.md
index 1c6a87b..ea98ac7 100644
--- a/en/option/series/graph.md
+++ b/en/option/series/graph.md
@@ -3,12 +3,12 @@
# series.graph(Object)
-**relation graph**
-
-Graph is a diagram to represent [nodes](~series-graph.nodes) and the [links](~series-graph.links) connecting nodes.
-
-**Example: **
-
+**relation graph**
+
+Graph is a diagram to represent [nodes](~series-graph.nodes) and the [links](~series-graph.links) connecting nodes.
+
+**Example: **
+
~[600x400](${galleryViewPath}graph&reset=1&edit=1)
## type(string) = 'graph'
@@ -37,11 +37,11 @@ Whether to enable the highlight animation effect of mousr hover node.
## center(Array)
-Center of current view-port.
-
-Example:
-```js
-center: [115.97, 29.71]
+Center of current view-port.
+
+Example:
+```js
+center: [115.97, 29.71]
```
## zoom(number) = 1
@@ -50,13 +50,13 @@ Zoom rate of current view-port.
## layout(string) = 'none'
-Graph layout.
-
-**Options: **
-+ `'none'` No any layout, use [x](~series-graph.data.x), [y](~series-graph.data.y) provided in [node](~series-graph.data) as the position of node.
-
-+ `'circular'` Adopt circular layout, see the example [Les Miserables](${galleryEditorPath}graph-circular-layout).
-
+Graph layout.
+
+**Options: **
++ `'none'` No any layout, use [x](~series-graph.data.x), [y](~series-graph.data.y) provided in [node](~series-graph.data) as the position of node.
+
++ `'circular'` Adopt circular layout, see the example [Les Miserables](${galleryEditorPath}graph-circular-layout).
+
+ `'force'` Adopt force-directed layout, see the example [Force](${galleryEditorPath}graph-force), the detail about configrations of layout are in [graph.force](~series-graph.force)
## circular(Object)
@@ -69,22 +69,22 @@ Whether to rotate the label automatically.
## force(Object)
-Configuration items about force-directed layout. Force-directed layout simulates spring/charge model, which will add a repulsion between 2 nodes and add a attraction between 2 nodes of each edge. In each iteration nodes will move under the effect of repulsion and attraction. After several iterations, the nodes will be static in a balanced position. As a result, the energy local minimum of this whole model will be realized.
-
+Configuration items about force-directed layout. Force-directed layout simulates spring/charge model, which will add a repulsion between 2 nodes and add a attraction between 2 nodes of each edge. In each iteration nodes will move under the effect of repulsion and attraction. After several iterations, the nodes will be static in a balanced position. As a result, the energy local minimum of this whole model will be realized.
+
The result of force-directed layout has a good symmetries and clustering, which is also aesthetically pleasing.
### initLayout(string)
-The initial layout before force-directed layout, which will influence on the result of force-directed layout.
-
-It defaults not to do any layout and use [x](~series-graph.data.x), [y](~series-graph.data.y) provided in [node](~series-graph.data) as the position of node. If it doesn't exist, the position will be generated randomly.
-
+The initial layout before force-directed layout, which will influence on the result of force-directed layout.
+
+It defaults not to do any layout and use [x](~series-graph.data.x), [y](~series-graph.data.y) provided in [node](~series-graph.data) as the position of node. If it doesn't exist, the position will be generated randomly.
+
You can also use circular layout `'circular'`.
### repulsion(Array|number) = 50
-The repulsion factor between nodes. The repulsion will be stronger and the distance between 2 nodes becomes further as this value becomes larger.
-
+The repulsion factor between nodes. The repulsion will be stronger and the distance between 2 nodes becomes further as this value becomes larger.
+
It can be an array to represent the range of repulsion. In this case larger value have larger repulsion and smaller value will have smaller repulsion.
### gravity(number) = 0.1
@@ -93,8 +93,8 @@ The gravity factor enforcing nodes approach to the center. The nodes will be clo
### edgeLength(Array|number) = 30
-The distance between 2 nodes on edge. This distance is also affected by [repulsion](~series-graph.force.repulsion).
-
+The distance between 2 nodes on edge. This distance is also affected by [repulsion](~series-graph.force.repulsion).
+
It can be an array to represent the range of edge length. In this case edge with larger value will be shorter, which means two nodes are closer. And edge with smaller value will be longer.
### layoutAnimation(boolean) = true
@@ -107,8 +107,8 @@ Because the force-directed layout will be steady after several iterations, this
version = "4.5.0"
) }}
-It will slow down the nodes' movement. The value range is from 0 to 1.
-
+It will slow down the nodes' movement. The value range is from 0 to 1.
+
But it is still an experimental option, see [#11024](https://github.com/apache/incubator-echarts/issues/11024).
## roam(boolean|string) = false
@@ -137,23 +137,23 @@ Whether to focus/highlight the hover node and it's adjacencies.
## edgeSymbol(Array|string) = ['none', 'none']
-Symbol of two ends of edge line.
-
-For example:
-```js
-edgeSymbol: ['circle', 'arrow']
+Symbol of two ends of edge line.
+
+For example:
+```js
+edgeSymbol: ['circle', 'arrow']
```
## edgeSymbolSize(Array|number) = 10
-Size of symbol of two ends of edge line. Can be an array or a single number.
-
-For example:
-```js
-// Start symbol has size 5 and end symbol has size 10
-symbolSize: [5, 10],
-// All has size 10
-symbolSize: 10
+Size of symbol of two ends of edge line. Can be an array or a single number.
+
+For example:
+```js
+// Start symbol has size 5 and end symbol has size 10
+symbolSize: [5, 10],
+// All has size 10
+symbolSize: 10
```
{{ use: partial-cursor() }}
@@ -226,7 +226,7 @@ The style of edge line. [lineStyle.color](~series-graph.lineStyle.color) can be
## categories(Array)
-The categories of node, which is optional.
+The categories of node, which is optional.
If there is a classification of nodes, the category of each node can be assigned through [data[i].category](~series-graph.data.category). And the style of category will also be applied to the style of nodes. `categories` can also be used in [legend](~legend).
### name(string)
@@ -273,34 +273,34 @@ The label style of node in this category.
## autoCurveness(number|Array) = 20
-For the situation where there are multiple links between nodes, the curveness of each link is automatically calculated.
-
-When set to `number`, it indicates the length of the edge curvenness array between two nodes, and the calculation result is given by the internal algorithm.
-
-When set to `Array`, it means that the curveness array is directly specified, and the multilateral curveness is directly selected from the array.
-
+For the situation where there are multiple links between nodes, the curveness of each link is automatically calculated.
+
+When set to `number`, it indicates the length of the edge curvenness array between two nodes, and the calculation result is given by the internal algorithm.
+
+When set to `Array`, it means that the curveness array is directly specified, and the multilateral curveness is directly selected from the array.
+
**Notice：** if [lineStyle.curveness](~series-graph.lineStyle.curveness) has been set, this property is invalid.
## data(Array)
-Nodes list of graph.
-
-```js
-data: [{
- name: '1',
- x: 10,
- y: 10,
- value: 10
-}, {
- name: '2',
- x: 100,
- y: 100,
- value: 20,
- symbolSize: 20,
- itemStyle: {
- color: 'red'
- }
-}]
+Nodes list of graph.
+
+```js
+data: [{
+ name: '1',
+ x: 10,
+ y: 10,
+ value: 10
+}, {
+ name: '2',
+ x: 100,
+ y: 100,
+ value: 20,
+ symbolSize: 20,
+ itemStyle: {
+ color: 'red'
+ }
+}]
```
### name(string)
@@ -371,15 +371,15 @@ Alias of [data](~series-graph.data)
## links(Array)
-Relational data between nodes. Example:
-```js
-links: [{
- source: 'n1',
- target: 'n2'
-}, {
- source: 'n2',
- target: 'n3'
-}]
+Relational data between nodes. Example:
+```js
+links: [{
+ source: 'n1',
+ target: 'n2'
+}, {
+ source: 'n2',
+ target: 'n3'
+}]
```
### source(string|number)
@@ -481,9 +481,9 @@ If show label on edge.
#${prefix} position(string) = 'middle'
-Label position, options：
-+ `'start'`
-+ `'middle'`
+Label position, options：
++ `'start'`
++ `'middle'`
+ `'end'`
#${prefix} formatter(string|Function)
diff --git a/en/option/series/heatmap.md b/en/option/series/heatmap.md
index 914cac2..2a9aed3 100644
--- a/en/option/series/heatmap.md
+++ b/en/option/series/heatmap.md
@@ -3,15 +3,15 @@
# series.heatmap(Object)
-**heat map**
-
-Heat map mainly use colors to represent values, which must be used along with [visualMap](~visualMap) component.
-
-It can be used in either [rectangular coordinate](~grid) or [geographic coordinate](~geo). But the behaviour on them are quite different. Rectangular coordinate must have two catagories to use it.
-
-Here are the examples using it in rectangular coordinate and geographic coordinate:
-
-**rectangular coordinate: **
+**heat map**
+
+Heat map mainly use colors to represent values, which must be used along with [visualMap](~visualMap) component.
+
+It can be used in either [rectangular coordinate](~grid) or [geographic coordinate](~geo). But the behaviour on them are quite different. Rectangular coordinate must have two catagories to use it.
+
+Here are the examples using it in rectangular coordinate and geographic coordinate:
+
+**rectangular coordinate: **
~[600x400](${galleryViewPath}heatmap-cartesian&edit=1&reset=1)
## type(string) = 'heatmap'
diff --git a/en/option/series/line.md b/en/option/series/line.md
index 94f58ac..71bd19c 100644
--- a/en/option/series/line.md
+++ b/en/option/series/line.md
@@ -3,14 +3,14 @@
# series.line(Object)
-**broken line chart**
-
-Broken line chart relates all the data points [symbol](~series-line.symbol) by broken lines, which is used to show the trend of data changing. It could be used in both [rectangular coordinate](~grid) and[polar coordinate](~polar).
-
-**Tip:** When [areaStyle](~series-line.areaStyle) is set, area chart will be drew.
-
-**Tip:** With [visualMap](~visualMap-piecewise) component, Broken line / area chart can have different colors on different sections, as below:
-
+**broken line chart**
+
+Broken line chart relates all the data points [symbol](~series-line.symbol) by broken lines, which is used to show the trend of data changing. It could be used in both [rectangular coordinate](~grid) and[polar coordinate](~polar).
+
+**Tip:** When [areaStyle](~series-line.areaStyle) is set, area chart will be drew.
+
+**Tip:** With [visualMap](~visualMap-piecewise) component, Broken line / area chart can have different colors on different sections, as below:
+
~[600x400](${galleryViewPath}line-aqi&edit=1&reset=1)
## type(string) = 'line'
@@ -44,9 +44,9 @@ Whether to show symbol. It would be shown during tooltip hover.
## showAllSymbol(boolean) = 'auto'
-Only work when main axis is `'category'` axis (`axis.type` is `'category'`). Optional values:
-+ `'auto'`: Default value. Show all symbols if there is enough space. Otherwise follow the interval strategy with with [axisLabel.interval](~xAxis.axisLabel.interval).
-+ `true`: Show all symbols.
+Only work when main axis is `'category'` axis (`axis.type` is `'category'`). Optional values:
++ `'auto'`: Default value. Show all symbols if there is enough space. Otherwise follow the interval strategy with with [axisLabel.interval](~xAxis.axisLabel.interval).
++ `true`: Show all symbols.
+ `false`: Follow the interval strategy with [axisLabel.interval](~xAxis.axisLabel.interval).
## hoverAnimation(boolean) = true
@@ -57,10 +57,10 @@ Set this to `false` to prevent the animation effect when the mouse is hovering o
## stack(string) = null
-If stack the value. On the same category axis, the series with the same `stack` name would be put on top of each other.
-
-The effect of the below example could be seen through stack switching of [toolbox](~toolbox) on the top right corner:
-
+If stack the value. On the same category axis, the series with the same `stack` name would be put on top of each other.
+
+The effect of the below example could be seen through stack switching of [toolbox](~toolbox) on the top right corner:
+
~[600x400](${galleryViewPath}doc-example/line-stack-tiled&edit=1&reset=1)
{{ use: partial-cursor() }}
@@ -75,10 +75,10 @@ Whether to connect the line across null points.
## step(string|boolean) = false
-Whether to show as a step line. It can be `true`, `false`. Or `'start'`, `'middle'`, `'end'`. Which will configure the turn point of step line.
-
-See the example using different `step` options:
-
+Whether to show as a step line. It can be `true`, `false`. Or `'start'`, `'middle'`, `'end'`. Which will configure the turn point of step line.
+
+See the example using different `step` options:
+
~[600x400](${galleryViewPath}line-step&edit=1&reset=1)
## label(Object)
@@ -138,36 +138,36 @@ Highlight style of the graphic.
## smooth(boolean|number) = false
-Whether to show as smooth curve.
-
-If is typed in `boolean`, then it means whether to enable smoothing. If is typed in `number`, valued from 0 to 1, then it means smoothness. A smaller value makes it less smooth.
-
+Whether to show as smooth curve.
+
+If is typed in `boolean`, then it means whether to enable smoothing. If is typed in `number`, valued from 0 to 1, then it means smoothness. A smaller value makes it less smooth.
+
Please refer to [smoothMonotone](~series-line.smoothMonotone) to change smoothing algorithm.
## smoothMonotone(string)
-Whether the broken line keep the monotonicity when it is smoothed. It can be set as `'x'`, `'y'` to keep the monotonicity on x axis or y axis.
-
-It is usually used on dual value axis.
-
-Here are 2 examples of broken line chart with dual value axis, showing the differences when `smoothMonotone` is without any setting, and `smoothMonotone` is set as `'x'`.
-
-+ No setting about `smoothMonotone`:
-
-
-
-+ It is set as `'x'`:
-
+Whether the broken line keep the monotonicity when it is smoothed. It can be set as `'x'`, `'y'` to keep the monotonicity on x axis or y axis.
+
+It is usually used on dual value axis.
+
+Here are 2 examples of broken line chart with dual value axis, showing the differences when `smoothMonotone` is without any setting, and `smoothMonotone` is set as `'x'`.
+
++ No setting about `smoothMonotone`:
+
+
+
++ It is set as `'x'`:
+
## sampling(string)
-The dowmsampling strategy used when the data size is much larger than pixel size. It will improve the performance when turned on. Defaults to be turned off, indicating that all the data points will be drawn.
-
-Options:
-+ `'average'` Use average value of filter points
-+ `'max'` Use maximum value of filter points
-+ `'min'` Use minimum value of filter points
+The dowmsampling strategy used when the data size is much larger than pixel size. It will improve the performance when turned on. Defaults to be turned off, indicating that all the data points will be drawn.
+
+Options:
++ `'average'` Use average value of filter points
++ `'max'` Use maximum value of filter points
++ `'min'` Use minimum value of filter points
+ `'sum'` Use sum of filter points
{{ use: partial-series-dimensions(
diff --git a/en/option/series/lines.md b/en/option/series/lines.md
index b4870c9..014f40a 100644
--- a/en/option/series/lines.md
+++ b/en/option/series/lines.md
@@ -3,10 +3,10 @@
# series.lines(Object)
-**Lines graph**
-
-It is used to draw the line data with the information about "from" and "to"; and it is applied fot drawing the air routes on map, which visualizes these routes.
-
+**Lines graph**
+
+It is used to draw the line data with the information about "from" and "to"; and it is applied fot drawing the air routes on map, which visualizes these routes.
+
ECharts 2.x uses the `markLine` to draw the migrating effect, while in ECharts 3, the `lines` graph is recommended to be used.
## type(string) = 'lines'
@@ -27,17 +27,17 @@ ECharts 2.x uses the `markLine` to draw the migrating effect, while in ECharts 3
## polyline(boolean) = false
-If draw as a polyline.
-
-Default to be `false`. Can only draw a two end straight line.
-
+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 the special effects 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.
### show(boolean) = false
@@ -62,8 +62,8 @@ The symbol of special effect.
{{ use: partial-icon() }}
-The above example uses a custom path of plane shape.
-
+The above example uses a custom path of plane shape.
+
**Tip:** Ahe angle of symbol changes as the tangent of track changes. If you use a custom path, you should make sure that the path shape are upward oriented. It would ensure that the symbol will always move toward the right moving direction when the symbol moves along the track.
### symbolSize(Array|number) = 3
@@ -84,10 +84,10 @@ Whether to loop the special effect animation.
## large(boolean) = true
-Whether to enable the optimization of large-scale lines graph. It could be enabled when there is a particularly large number of data(>=5k) .
-
-After being enabled, [largeThreshold](~series-lines.largeThreshold) can be used to indicate the minimum number for turning on the optimization.
-
+Whether to enable the optimization of large-scale lines graph. It could be enabled when there is a particularly large number of data(>=5k) .
+
+After being enabled, [largeThreshold](~series-lines.largeThreshold) can be used to indicate the minimum number for turning on the optimization.
+
The style of a single data item can't be customized
## largeThreshold(number) = 2000
@@ -100,8 +100,8 @@ Symbol type at the two ends of the line. It can be an array for two ends, or ass
## symbolSize(number|Array) = 10
-Symbol size at the two ends of the line. It can be an array for two ends, or assigned seperately.
-
+Symbol size at the two ends of the line. It can be an array for two ends, or assigned seperately.
+
**Attention: ** You cannot assgin width and height seperately as normal `symbolSize`.
## lineStyle(Object)
@@ -220,9 +220,9 @@ Whether to show label.
#${prefix} position(string) = 'end'
-the position of label, options:
-+ `'start'`
-+ `'middle'`
+the position of label, options:
++ `'start'`
++ `'middle'`
+ `'end'`
#${prefix} formatter(string|Function)
diff --git a/en/option/series/map.md b/en/option/series/map.md
index 6a75794..40d43bd 100644
--- a/en/option/series/map.md
+++ b/en/option/series/map.md
@@ -3,10 +3,10 @@
# series.map(Object)
-**Map.**
-
-Map is mainly used in the visualization of geographic area data, which can be used with [visualMap](~visualMap) component to visualize the datas such as population distribution density in diffrent areas.
-
+**Map.**
+
+Map is mainly used in the visualization of geographic area data, which can be used with [visualMap](~visualMap) component to visualize the datas such as population distribution density in diffrent areas.
+
Series of same [map type](~series-map.map) will show in one map. At this point, the configuration of the first series will be used for the map configuration.
## type(string) = 'map'
@@ -24,22 +24,22 @@ Series of same [map type](~series-map.map) will show in one map. At this point,
## geoIndex(number) = null
-In default case, map series create exclusive `geo` component for themselves. But `geoIndex` can be used to specify an outer [geo component](~geo), which can be shared with other series like [pie](~series-pie). Moreover, the region color of the outer [geo component](~geo) can be controlled by the map series (via [visualMap](~visualMap)).
-
-When `geoIndex` specified, [series-map.map](~series-map.map) other style configurations like [series-map.itemStyle](~series-map.itemStyle) will not work, but corresponding configurations in [geo component](~geo) will be used.
-
-For example:
+In default case, map series create exclusive `geo` component for themselves. But `geoIndex` can be used to specify an outer [geo component](~geo), which can be shared with other series like [pie](~series-pie). Moreover, the region color of the outer [geo component](~geo) can be controlled by the map series (via [visualMap](~visualMap)).
+
+When `geoIndex` specified, [series-map.map](~series-map.map) other style configurations like [series-map.itemStyle](~series-map.itemStyle) will not work, but corresponding configurations in [geo component](~geo) will be used.
+
+For example:
~[600x400](${galleryViewPath}geo-map-scatter&reset=1&edit=1)
## mapValueCalculation(string) = 'sum'
-Value of multiple series with the same [map type](~series-map.map) can use this option to get a statistical value.
-
-Supported statistical methods:
-
-+ `'sum'`
-+ `'average'`
-+ `'max'`
+Value of multiple series with the same [map type](~series-map.map) can use this option to get a statistical value.
+
+Supported statistical methods:
+
++ `'sum'`
++ `'average'`
++ `'max'`
+ `'min'`
## showLegendSymbol(boolean)
diff --git a/en/option/series/pictorialBar.md b/en/option/series/pictorialBar.md
index d0df976..650d18c 100644
--- a/en/option/series/pictorialBar.md
+++ b/en/option/series/pictorialBar.md
@@ -3,51 +3,51 @@
# series.pictoialBar(Object)
-**pictorial bar chart**
-
-Pictorial bar chart is a type of bar chart that customized glyph (like images, [SVG PathData](http://www.w3.org/TR/SVG/paths.html#PathData)) can be used instead of rectangular bar. This kind of chart is usually used in infographic.
-
-Pictorial bar chart can only be used in [rectangular coordinate](~grid) with at least 1 category axis.
-
-
-**Example:**
-~[800x400](${galleryViewPath}pictorialBar-hill&reset=1&edit=1)
-
-
-**Layout**
-
-Basically `pictoialBar` is a type of bar chart, which follows the bar chart layout. In `pictorialBar`, each bar is named as `reference bar`, which does not be shown, but only be used as a reference for layout of pictorial graphic elements. Each pictorial graphic element is positioned with respect to its `reference bar` according to the setting of [symbolPosition](~series-pictorialBar.symbolPosition)、[symbolOffset](~series-pictorialBar.symbolOffset).
-
-See the example below:
-~[800x600](${galleryViewPath}doc-example/pictorialBar-position&reset=1&edit=1)
-
-[symbolSize](~series-pictorialBar.symbolSize) is used to specify the size of graphic elements.
-
-See the example below:
-~[800x600](${galleryViewPath}doc-example/pictorialBar-symbolSize&reset=1&edit=1)
-
-
-
-**Graphic types**
-
-[symbolRepeat](~series-pictorialBar.symbolRepeat) can be
-
-Graphic elements can be set as 'repeat' or not by [symbolRepeat](~series-pictorialBar.symbolRepeat).
-
-+ If set as `false` (default), a single graphic element is used to represent a data item.
-+ If set as `true`, a group of repeat graphic elements are used to represent a data item.
-
-See the example below:
-~[800x400](${galleryViewPath}doc-example/pictorialBar-repeat&reset=1&edit=1)
-
-Each graphic element can be basic shape (like `'circle'`, `'rect'`, ...), or [SVG PathData](http://www.w3.org/TR/SVG/paths.html#PathData), or image. See [symbolType](~series-pictorialBar.symbolType).
-
-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.
-
-See the example below:
+**pictorial bar chart**
+
+Pictorial bar chart is a type of bar chart that customized glyph (like images, [SVG PathData](http://www.w3.org/TR/SVG/paths.html#PathData)) can be used instead of rectangular bar. This kind of chart is usually used in infographic.
+
+Pictorial bar chart can only be used in [rectangular coordinate](~grid) with at least 1 category axis.
+
+
+**Example:**
+~[800x400](${galleryViewPath}pictorialBar-hill&reset=1&edit=1)
+
+
+**Layout**
+
+Basically `pictoialBar` is a type of bar chart, which follows the bar chart layout. In `pictorialBar`, each bar is named as `reference bar`, which does not be shown, but only be used as a reference for layout of pictorial graphic elements. Each pictorial graphic element is positioned with respect to its `reference bar` according to the setting of [symbolPosition](~series-pictorialBar.symbolPosition)、[symbolOffset](~series-pictorialBar.symbolOffset).
+
+See the example below:
+~[800x600](${galleryViewPath}doc-example/pictorialBar-position&reset=1&edit=1)
+
+[symbolSize](~series-pictorialBar.symbolSize) is used to specify the size of graphic elements.
+
+See the example below:
+~[800x600](${galleryViewPath}doc-example/pictorialBar-symbolSize&reset=1&edit=1)
+
+
+
+**Graphic types**
+
+[symbolRepeat](~series-pictorialBar.symbolRepeat) can be
+
+Graphic elements can be set as 'repeat' or not by [symbolRepeat](~series-pictorialBar.symbolRepeat).
+
++ If set as `false` (default), a single graphic element is used to represent a data item.
++ If set as `true`, a group of repeat graphic elements are used to represent a data item.
+
+See the example below:
+~[800x400](${galleryViewPath}doc-example/pictorialBar-repeat&reset=1&edit=1)
+
+Each graphic element can be basic shape (like `'circle'`, `'rect'`, ...), or [SVG PathData](http://www.w3.org/TR/SVG/paths.html#PathData), or image. See [symbolType](~series-pictorialBar.symbolType).
+
+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.
+
+See the example below:
~[800x600](${galleryViewPath}doc-example/pictorialBar-clip&reset=1&edit=1)
## type(string) = 'pictorialBar'
@@ -208,7 +208,7 @@ Specify the type of graphic elements.
{{ use: partial-icon() }}
-Example:
+Example:
~[800x400](${galleryViewPath}doc-example/pictorialBar-graphicType&reset=1&edit=1)
{{ use: pictorialBar-symbol-attrs-cascade(
@@ -217,24 +217,24 @@ Example:
#${prefix} symbolSize(number|Array) = ['100%', '100%']
-Symbol size.
-
-It can be set as a array, which means [width, height]. For example, `[20, 10]` means width `20` and height `10`. It can also be set as a single number, like `10`, which is equivalent to `[10, 10]`.
-
-Absolute value can be used (like `10`), or percent value can be used (like `'120%'`, `['55%', 23]`).
-
-When percent value is used, final size of the graphic element is calculated based on its [reference bar](~series-pictorialBar).
-
-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%`.
-+ 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%`.
-
-Analogously, the case that based on y axis can be obtained by exchanging them.
-
-For example:
+Symbol size.
+
+It can be set as a array, which means [width, height]. For example, `[20, 10]` means width `20` and height `10`. It can also be set as a single number, like `10`, which is equivalent to `[10, 10]`.
+
+Absolute value can be used (like `10`), or percent value can be used (like `'120%'`, `['55%', 23]`).
+
+When percent value is used, final size of the graphic element is calculated based on its [reference bar](~series-pictorialBar).
+
+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%`.
++ 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%`.
+
+Analogously, the case that based on y axis can be obtained by exchanging them.
+
+For example:
~[800x600](${galleryViewPath}doc-example/pictorialBar-symbolSize&reset=1&edit=1)
{{ use: pictorialBar-symbol-attrs-cascade(
@@ -243,13 +243,13 @@ For example:
#${prefix} symbolPosition(string) = 'start'
-Specify the location of the graphic elements. Optional values:
-
-+ `'start'`: The edge of graphic element inscribes with the start of the reference bar.
-+ `'end'`: The edge of graphic element inscribes with the end of the reference bar.
-+ `'center'`: The graphic element is at the center of the reference bar.
-
-For example:
+Specify the location of the graphic elements. Optional values:
+
++ `'start'`: The edge of graphic element inscribes with the start of the reference bar.
++ `'end'`: The edge of graphic element inscribes with the end of the reference bar.
++ `'center'`: The graphic element is at the center of the reference bar.
+
+For example:
~[800x600](${galleryViewPath}doc-example/pictorialBar-position&reset=1&edit=1)
{{ use: pictorialBar-symbol-attrs-cascade(
@@ -258,13 +258,13 @@ For example:
#${prefix} symbolOffset(Array) = [0, 0]
-Specify the offset of graphic element according to its original position. Adopting `symbolOffset` is the final step in layout, which enables adjustment of graphic element position.
-
-A absolute value can be set (like `10`), or a percent value can be set (like `'120%'`、`['55%', 23]`), which is based on its [symbolSize](~series-pictorialBar.symbolSize).
-
-For example, `[0, '-50%']` means the graphic element will be adjusted upward half of the size of itself.
-
-For example:
+Specify the offset of graphic element according to its original position. Adopting `symbolOffset` is the final step in layout, which enables adjustment of graphic element position.
+
+A absolute value can be set (like `10`), or a percent value can be set (like `'120%'`、`['55%', 23]`), which is based on its [symbolSize](~series-pictorialBar.symbolSize).
+
+For example, `[0, '-50%']` means the graphic element will be adjusted upward half of the size of itself.
+
+For example:
~[800x600](${galleryViewPath}doc-example/pictorialBar-position&reset=1&edit=1)
{{ use: pictorialBar-symbol-attrs-cascade(
@@ -273,8 +273,8 @@ For example:
#${prefix} symbolRotate(number)
-The degree of the rotation of a graphic element.
-
+The degree of the rotation of a graphic element.
+
Notice, `symbolRotate` will not affect the position of the graphic element, but just rotating by its center.
{{ use: pictorialBar-symbol-attrs-cascade(
@@ -283,14 +283,14 @@ Notice, `symbolRotate` will not affect the position of the graphic element, but
#${prefix} symbolRepeat(boolean|number|string)
-Whether to repeat a graphic element. Optional values:
-
-+ `false`/`null`/`undefined`: Do not repeat, that is, each graphic element represents a data item.
-+ `true`: Repeat, that is, a group of repeated graphic elements represent a data item. The repeat times is calculated according to [data](~series-pictorialBar.data).
-+ a number: Repeat, that is a group of repeated graphic elements represent a data item. The repeat times is always the given number.
-+ `'fixed'`: Repeat, that is a group of repeated graphic elements represent a data item. The repeat times is calcuated according to [symbolBoundingData](~series-pictorialBar.symbolBoundingData), that is, the repeat times has nothing to do with [data](~series-pictorialBar.data). The setting is useful when graphic elements are used as background.
-
-For example:
+Whether to repeat a graphic element. Optional values:
+
++ `false`/`null`/`undefined`: Do not repeat, that is, each graphic element represents a data item.
++ `true`: Repeat, that is, a group of repeated graphic elements represent a data item. The repeat times is calculated according to [data](~series-pictorialBar.data).
++ a number: Repeat, that is a group of repeated graphic elements represent a data item. The repeat times is always the given number.
++ `'fixed'`: Repeat, that is a group of repeated graphic elements represent a data item. The repeat times is calcuated according to [symbolBoundingData](~series-pictorialBar.symbolBoundingData), that is, the repeat times has nothing to do with [data](~series-pictorialBar.data). The setting is useful when graphic elements are used as background.
+
+For example:
~[800x400](${galleryViewPath}doc-example/pictorialBar-repeat&reset=1&edit=1)
{{ use: pictorialBar-symbol-attrs-cascade(
@@ -299,15 +299,15 @@ For example:
#${prefix} symbolRepeatDirection(string) = 'start'
-When [symbolRepeat](~series-pictorialBar.symbolRepeat) is used, `symbolRepeatDirection` specifies the render order of the repeated graphic elements. The setting is useful in these cases below:
-
-+ If [symbolMargin](~series-pictorialBar.symbolMargin) is set as a negative value, repeated elements will overlap with each other. `symbolRepeatDirection` can be used to specify the order of overlap.
-
-+ If [animationDelay](~series-pictorialBar.animationDelay) or [animationDelayUpdate](~series-pictorialBar.animationDelayUpdate) is used, `symbolRepeatDirection` specifies the order of index.
-
-Optional values can be `'start'` and `'end'`.
-
-For example:
+When [symbolRepeat](~series-pictorialBar.symbolRepeat) is used, `symbolRepeatDirection` specifies the render order of the repeated graphic elements. The setting is useful in these cases below:
+
++ If [symbolMargin](~series-pictorialBar.symbolMargin) is set as a negative value, repeated elements will overlap with each other. `symbolRepeatDirection` can be used to specify the order of overlap.
+
++ If [animationDelay](~series-pictorialBar.animationDelay) or [animationDelayUpdate](~series-pictorialBar.animationDelayUpdate) is used, `symbolRepeatDirection` specifies the order of index.
+
+Optional values can be `'start'` and `'end'`.
+
+For example:
~[800x400](${galleryViewPath}doc-example/pictorialBar-repeatDirection&reset=1&edit=1)
{{ use: pictorialBar-symbol-attrs-cascade(
@@ -316,22 +316,22 @@ For example:
#${prefix} symbolMargin(number|string)
-Specify margin of both sides of a graphic element. ("both sides" means the two sides in the direction of its value axis). It works only when [symbolRepeat](~series-pictorialBar.symbolRepeat) is used.
-
-Absolute value can be used (like `20`), or percent value can be used (like `'-30%'`), which is based on its [symbolSize](~series-pictorialBar.symbolSize).
-
-`symbolMargin` can be positive value or negative value, which enables overlap of graphic elements when [symbolRepeat](~series-pictorialBar.symbolRepeat) is used.
-
-A `"!"` can be appended on the end of the value, like `"30%!"` or `25!`, which means a extra blank will be added on the both ends, otherwise the graphic elements on both ends will reach the boundary by default.
-
-Notice:
-
-+ When [symbolRepeat](~series-pictorialBar.symbolRepeat) is `true`/`'fixed'`:
- The given `symbolMargin` is just a reference value. The final gap of graphic elements will be calculated according to [symbolRepeat](~series-pictorialBar.symbolRepeat), `symbolMargin` and [symbolBoundingData](~series-pictorialBar.symbolBoundingData).
-+ When [symbolRepeat](~series-pictorialBar.symbolRepeat) is set as a number:
- `symbolMargin` does not work any more.
-
-For example:
+Specify margin of both sides of a graphic element. ("both sides" means the two sides in the direction of its value axis). It works only when [symbolRepeat](~series-pictorialBar.symbolRepeat) is used.
+
+Absolute value can be used (like `20`), or percent value can be used (like `'-30%'`), which is based on its [symbolSize](~series-pictorialBar.symbolSize).
+
+`symbolMargin` can be positive value or negative value, which enables overlap of graphic elements when [symbolRepeat](~series-pictorialBar.symbolRepeat) is used.
+
+A `"!"` can be appended on the end of the value, like `"30%!"` or `25!`, which means a extra blank will be added on the both ends, otherwise the graphic elements on both ends will reach the boundary by default.
+
+Notice:
+
++ When [symbolRepeat](~series-pictorialBar.symbolRepeat) is `true`/`'fixed'`:
+ The given `symbolMargin` is just a reference value. The final gap of graphic elements will be calculated according to [symbolRepeat](~series-pictorialBar.symbolRepeat), `symbolMargin` and [symbolBoundingData](~series-pictorialBar.symbolBoundingData).
++ When [symbolRepeat](~series-pictorialBar.symbolRepeat) is set as a number:
+ `symbolMargin` does not work any more.
+
+For example:
~[800x600](${galleryViewPath}doc-example/pictorialBar-repeatLayout&reset=1&edit=1)
{{ use: pictorialBar-symbol-attrs-cascade(
@@ -340,19 +340,19 @@ For example:
#${prefix} symbolClip(boolean) = false
-Whether to clip graphic elements.
-
-+ `false`/null/undefined: The whole graphic elements represent the size of value.
-+ `true`: The clipped graphic elements reperent the size of value.
-
-`symbolClip` is usually used in this case: both "amount value" and "current value" should be displayed. In this case, tow series can be used. One for background, using complete graphic elements, while another for current value, using clipped graphic elements.
-
-For example:
-~[800x600](${galleryViewPath}doc-example/pictorialBar-clip&reset=1&edit=1)
-
-Notice, in the example above,
-
-+ The same [symbolBoundingData](~series.pictorialBar.symbolBoundingData) is used in "background series" and "current value seires", which makes their graphic elements are the same size.
+Whether to clip graphic elements.
+
++ `false`/null/undefined: The whole graphic elements represent the size of value.
++ `true`: The clipped graphic elements reperent the size of value.
+
+`symbolClip` is usually used in this case: both "amount value" and "current value" should be displayed. In this case, tow series can be used. One for background, using complete graphic elements, while another for current value, using clipped graphic elements.
+
+For example:
+~[800x600](${galleryViewPath}doc-example/pictorialBar-clip&reset=1&edit=1)
+
+Notice, in the example above,
+
++ The same [symbolBoundingData](~series.pictorialBar.symbolBoundingData) is used in "background series" and "current value seires", which makes their graphic elements are the same size.
+ A bigger [z](~series.pictorialBar.z) is set on "current value series", which makes it is over "background series".
{{ use: pictorialBar-symbol-attrs-cascade(
@@ -361,40 +361,40 @@ Notice, in the example above,
#${prefix} symbolBoundingData(number)
-Defines a bounding area availble for the graphic elements. This setting gives a data, which will then be translated to a coordinate on the coordinate system. The coordinate specifies the bounding. Namely, if `symbolBoundingData` is set, the final size (or layout) of the graphic elements depend on the `symbolBoundingData`.
-
-When reference bar is horizontal, `symbolBoundingData` is coresponding to x axis, while reference bar is vertical, `symbolBoundingData` is coresponding to y axis.
-
-Rule:
-
-+ If [symbolRepeat](~series-pictorialBar.symbolRepeat) is not used:
-
- `symbolBoundingData` is the same as the size of reference bar by default. The size of the graphic element is detemined by `symbolBoundingData`. For example, if reference bar is vertical, its data is `24`, `symbolSize` is set as `[30, '50%']`, `symbolBoundingData` is set as `124`, the final size of the graphic element will be `124 * 50% = 62`. If `symbolBoundingData` is not set, the final size will be `24 * 50% = 12`.
-
-+ If [symbolRepeat](~series-pictorialBar.symbolRepeat) is used:
-
- `symbolBoundingData` is the extreme value of the coordinate system. `symbolBoundingData` defines a bounding area, where repeated graphic elements layout according to [symbolMargin](~series-pictorialBar.symbolMargin) and [symbolRepeat](~series-pictorialBar.symbolRepeat) and [symbolSize](~series-pictorialBar.symbolSize). Both these settings determine the gap size of the repeated graphic elements.
-
-`symbolBoundingData` is usually used in these cases:
-
-+ When [symbolCilp](~series-pictorialBar.symbolClip) is used:
-
- And a series is used to display "amont value", while another series is used to display "current value". `symbolBoundingData` can be used to ensure that the graphic elements of these two series are at the same size.
-
-For example:
-~[800x600](${galleryViewPath}doc-example/pictorialBar-clip&reset=1&edit=1)
-
-+ When [symbolRepeat](~series-pictorialBar.symbolRepeat) is used:
-
- `symbolBoundingData` can be use to ensure the gaps of the elements in different bars are the same. Of cource, you can do not set `symbolBoundingData`, whose default value is a stable value (extreme value of the coordinate system).
-
-For example:
-~[800x600](${galleryViewPath}doc-example/pictorialBar-repeatLayout&reset=1&edit=1)
-
-<br>
-`symbolBoundingData` can also be an array, such as `[-40, 60]`, which specifies both negative and positive symbolBoundingData.
-
-Check this example:
+Defines a bounding area availble for the graphic elements. This setting gives a data, which will then be translated to a coordinate on the coordinate system. The coordinate specifies the bounding. Namely, if `symbolBoundingData` is set, the final size (or layout) of the graphic elements depend on the `symbolBoundingData`.
+
+When reference bar is horizontal, `symbolBoundingData` is coresponding to x axis, while reference bar is vertical, `symbolBoundingData` is coresponding to y axis.
+
+Rule:
+
++ If [symbolRepeat](~series-pictorialBar.symbolRepeat) is not used:
+
+ `symbolBoundingData` is the same as the size of reference bar by default. The size of the graphic element is detemined by `symbolBoundingData`. For example, if reference bar is vertical, its data is `24`, `symbolSize` is set as `[30, '50%']`, `symbolBoundingData` is set as `124`, the final size of the graphic element will be `124 * 50% = 62`. If `symbolBoundingData` is not set, the final size will be `24 * 50% = 12`.
+
++ If [symbolRepeat](~series-pictorialBar.symbolRepeat) is used:
+
+ `symbolBoundingData` is the extreme value of the coordinate system. `symbolBoundingData` defines a bounding area, where repeated graphic elements layout according to [symbolMargin](~series-pictorialBar.symbolMargin) and [symbolRepeat](~series-pictorialBar.symbolRepeat) and [symbolSize](~series-pictorialBar.symbolSize). Both these settings determine the gap size of the repeated graphic elements.
+
+`symbolBoundingData` is usually used in these cases:
+
++ When [symbolCilp](~series-pictorialBar.symbolClip) is used:
+
+ And a series is used to display "amont value", while another series is used to display "current value". `symbolBoundingData` can be used to ensure that the graphic elements of these two series are at the same size.
+
+For example:
+~[800x600](${galleryViewPath}doc-example/pictorialBar-clip&reset=1&edit=1)
+
++ When [symbolRepeat](~series-pictorialBar.symbolRepeat) is used:
+
+ `symbolBoundingData` can be use to ensure the gaps of the elements in different bars are the same. Of cource, you can do not set `symbolBoundingData`, whose default value is a stable value (extreme value of the coordinate system).
+
+For example:
+~[800x600](${galleryViewPath}doc-example/pictorialBar-repeatLayout&reset=1&edit=1)
+
+<br>
+`symbolBoundingData` can also be an array, such as `[-40, 60]`, which specifies both negative and positive symbolBoundingData.
+
+Check this example:
~[800x400](${galleryViewPath}doc-example/pictorialBar-symbolBoundingDataArray&reset=1&edit=1)
{{ use: pictorialBar-symbol-attrs-cascade(
@@ -403,25 +403,25 @@ Check this example:
#${prefix} symbolPatternSize(number) = 400
-Image can be used as the pattern of graphic elements.
-
-```js
-var textureImg = new Image();
-textureImg.src = 'data:image/jpeg;base64,...'; // dataURI
-// Or
-// textureImg.src = 'http://xxx.xxx.xxx/xx.png'; // URL
-...
-itemStyle: {
- color: {
- image: textureImg,
- repeat: 'repeat'
- }
-}
-```
-
-`symbolPatternSize` specifies the size of pattern image. For example, if `symbolPatternSize` is `400`, the pattern image will be displayed at the size of `400px * 400px`.
-
-For example:
+Image can be used as the pattern of graphic elements.
+
+```js
+var textureImg = new Image();
+textureImg.src = 'data:image/jpeg;base64,...'; // dataURI
+// Or
+// textureImg.src = 'http://xxx.xxx.xxx/xx.png'; // URL
+...
+itemStyle: {
+ color: {
+ image: textureImg,
+ repeat: 'repeat'
+ }
+}
+```
+
+`symbolPatternSize` specifies the size of pattern image. For example, if `symbolPatternSize` is `400`, the pattern image will be displayed at the size of `400px * 400px`.
+
+For example:
~[800x400](${galleryViewPath}doc-example/pictorialBar-patternSize&reset=1&edit=1)
{{ use: pictorialBar-symbol-attrs-cascade(
@@ -431,7 +431,7 @@ For example:
{{ if: ${useZ2} }}
#${prefix} z(number)
-Specify the relationship of overlap between graphic elements. A bigger value means higher.
+Specify the relationship of overlap between graphic elements. A bigger value means higher.
{{ /if }}
#${prefix} hoverAnimation(boolean) = false
@@ -457,61 +457,61 @@ Whether to enable hover animation.
#${prefix} animationDelay(number|Function) = 0
-Specify the delay time before animation start. Callback function can be used, where different delay time can be used on different element.
-
-For example:
-```js
-animationDelay: function (dataIndex, params) {
- return params.index * 30;
-}
-// Or inverse:
-animationDelay: function (dataIndex, params) {
- return (params.count - 1 - params.index) * 30;
-}
-```
-
-For example:
+Specify the delay time before animation start. Callback function can be used, where different delay time can be used on different element.
+
+For example:
+```js
+animationDelay: function (dataIndex, params) {
+ return params.index * 30;
+}
+// Or inverse:
+animationDelay: function (dataIndex, params) {
+ return (params.count - 1 - params.index) * 30;
+}
+```
+
+For example:
~[800x400](${galleryViewPath}doc-example/pictorialBar-repeatDirection&reset=1&edit=1)
#${prefix} animationDelayUpdate(number|Function) = 0
-Specify the delay time before update animation. Callback function can be used, where different delay time can be used on different element.
-
-For example:
-```js
-animationDelay: function (dataIndex, params) {
- return params.index * 30;
-}
-// Or inverse:
-animationDelay: function (dataIndex, params) {
- return (params.count - 1 - params.index) * 30;
-}
-```
-
-For example:
+Specify the delay time before update animation. Callback function can be used, where different delay time can be used on different element.
+
+For example:
+```js
+animationDelay: function (dataIndex, params) {
+ return params.index * 30;
+}
+// Or inverse:
+animationDelay: function (dataIndex, params) {
+ return (params.count - 1 - params.index) * 30;
+}
+```
+
+For example:
~[800x400](${galleryViewPath}doc-example/pictorialBar-repeatDirection&reset=1&edit=1)
{{ target: pictorialBar-symbol-attrs-cascade }}
-This attribute can be set at the [root level of a series](~series-pictorialBar.${attrName}), where all data items in the series will be affected by this attribute. And this attribute can also be set at [each data item](~series-pictorialBar.data.${attrName}) in [series-pictorialBar.data](series-pictorialBar.data), where only the data item is affected by this attribute.
-
-For example:
-```js
-series: [{
- ${attrName}: ... // Affect all data items.
- data: [23, 56]
-}]
-// Or
-series: [{
- data: [{
- value: 23
- ${attrName}: ... // Only affect this data item.
- }, {
- value: 56
- ${attrName}: ... // Only affect this data item.
- }]
-}]
+This attribute can be set at the [root level of a series](~series-pictorialBar.${attrName}), where all data items in the series will be affected by this attribute. And this attribute can also be set at [each data item](~series-pictorialBar.data.${attrName}) in [series-pictorialBar.data](series-pictorialBar.data), where only the data item is affected by this attribute.
+
+For example:
+```js
+series: [{
+ ${attrName}: ... // Affect all data items.
+ data: [23, 56]
+}]
+// Or
+series: [{
+ data: [{
+ value: 23
+ ${attrName}: ... // Only affect this data item.
+ }, {
+ value: 56
+ ${attrName}: ... // Only affect this data item.
+ }]
+}]
```
diff --git a/en/option/series/pie.md b/en/option/series/pie.md
index b456ce9..7ea7613 100644
--- a/en/option/series/pie.md
+++ b/en/option/series/pie.md
@@ -3,20 +3,20 @@
# series.pie(Object)
-**pie chart**
-
-The pie chart is mainly used for showing proportion of different categories. Each arc length represents the proportion of data quantity.
-
-
-**Tip:** The pie chart is more suitable for illustrating the numerical proportion. If you just to present the numerical differences of various categories, the [bar graph](bar) chart is more suggested. Because compared to tiny length difference, people is less sensitive to the minor radian difference. Otherwise, it can also be shown as Nightingale chart by using the [roseType](~series-pie.roseType) to distinguish different data through radius.
-
-Since ECharts v4.6.0, we provide `'labelLine'` and `'edge'` two extra layouts. Check [label.alignTo](~series-pie.label.alignTo) for more information.
-
-~[900x250](${galleryViewPath}pie-alignTo&reset=1&edit=1)
-
-For multiple pie series in a single chart, you may use [left](~series-pie.left), [right](~series-pie.right), [top](~series-pie.top), [bottom](~series-pie.bottom), [width](~series-pie.width), and [height](~series-pie.height) to locate the pies. Percetage values like [radius](~series-pie.radius) or [label.margin](~series-pie.label.margin) are relative to the viewport defined by this setting.
-
-** The below example shows a customized Nightingale chart: **
+**pie chart**
+
+The pie chart is mainly used for showing proportion of different categories. Each arc length represents the proportion of data quantity.
+
+
+**Tip:** The pie chart is more suitable for illustrating the numerical proportion. If you just to present the numerical differences of various categories, the [bar graph](bar) chart is more suggested. Because compared to tiny length difference, people is less sensitive to the minor radian difference. Otherwise, it can also be shown as Nightingale chart by using the [roseType](~series-pie.roseType) to distinguish different data through radius.
+
+Since ECharts v4.6.0, we provide `'labelLine'` and `'edge'` two extra layouts. Check [label.alignTo](~series-pie.label.alignTo) for more information.
+
+~[900x250](${galleryViewPath}pie-alignTo&reset=1&edit=1)
+
+For multiple pie series in a single chart, you may use [left](~series-pie.left), [right](~series-pie.right), [top](~series-pie.top), [bottom](~series-pie.bottom), [width](~series-pie.width), and [height](~series-pie.height) to locate the pies. Percetage values like [radius](~series-pie.radius) or [label.margin](~series-pie.label.margin) are relative to the viewport defined by this setting.
+
+** The below example shows a customized Nightingale chart: **
~[500x400](${galleryViewPath}pie-custom&edit=1&reset=1)
## type(string) = 'pie'
@@ -39,8 +39,8 @@ The offset distance of hovered sector.
## selectedMode(boolean|string) = false
-Selected mode of pie. It is enabled by default, and you may set it to be `false` to disabled it.
-
+Selected mode of pie. It is enabled by default, and you may set it to be `false` to disabled it.
+
Besides, it can be set to `'single'` or `'multiple'`, for single selection and multiple selections.
## selectedOffset(number) = 10
@@ -65,9 +65,9 @@ If a sector is less than this angle (0 ~ 360), label and labelLine will not be d
## roseType(boolean|string) = false
-Whether to show as Nightingale chart, which distinguishs data through radius. There are 2 optional modes:
-
-+ `'radius'` Use central angle to show the percentage of data, radius to show data size.
+Whether to show as Nightingale chart, which distinguishs data through radius. There are 2 optional modes:
+
++ `'radius'` Use central angle to show the percentage of data, radius to show data size.
+ `'area'` All the sectors will share the same central angle, the data size is shown only through radiuses.
## avoidLabelOverlap(boolean) = true
@@ -102,34 +102,34 @@ Whether to show sector when all data are zero.
### alignTo(string) = 'none'
-Label aligning policy. Valid only when `position` is `'outer'`.
-
-Since ECharts v4.6.0, we provide `'labelLine'` and `'edge'` two extra valid `alignTo` values.
-
-+ `'none'` (default): label lines have fixed length as [labelLine.length](~series-pie.labelLine.length) and [labelLine.length2](~series-pie.labelLine.length2).
-+ `'labelLine'`: aligning to the end of label lines and the length of the shortest horizontal label lines is configured by [labelLine.length2](~series-pie.labelLine.length2).
-+ `'edge'`: aligning to text and the distance between the edges of text and the viewport is configured by [label.margin](~series-pie.label.margin).
-
+Label aligning policy. Valid only when `position` is `'outer'`.
+
+Since ECharts v4.6.0, we provide `'labelLine'` and `'edge'` two extra valid `alignTo` values.
+
++ `'none'` (default): label lines have fixed length as [labelLine.length](~series-pie.labelLine.length) and [labelLine.length2](~series-pie.labelLine.length2).
++ `'labelLine'`: aligning to the end of label lines and the length of the shortest horizontal label lines is configured by [labelLine.length2](~series-pie.labelLine.length2).
++ `'edge'`: aligning to text and the distance between the edges of text and the viewport is configured by [label.margin](~series-pie.label.margin).
+
~[900x250](${galleryViewPath}pie-alignTo&reset=1&edit=1)
### margin(string|number) = '25%'
-The horizontal distance between text edges and viewport when [label.position](~series-pie.label.position) is `'outer'` and [label.alignTo](~series-pie.label.alignTo) is `'edge'`.
-
-~[900x250](${galleryViewPath}doc-example/pie-label-margin&edit=1&reset=1)
-
+The horizontal distance between text edges and viewport when [label.position](~series-pie.label.position) is `'outer'` and [label.alignTo](~series-pie.label.alignTo) is `'edge'`.
+
+~[900x250](${galleryViewPath}doc-example/pie-label-margin&edit=1&reset=1)
+
In most cases, you need a small `margin` value like `10` for mobile devices to make sure more text can be shown instead of being `...`. But on larger resolutions, a percentage value should be applied so that the label lines won't be too long. If your chart is used in varied resolutions, it is advised to set [responsive design](tutorial.html#Responsive%20Mobile-End) for different resolutions.
### bleedMargin(number) = 10
-The horizontal distance between text and viewport when [label.position](~series-pie.label.position) is `'outer'` and [label.alignTo](~series-pie.label.alignTo) is `'none'` or `'labelLine'`. Longer text will be truncated into `'...'`.
-
+The horizontal distance between text and viewport when [label.position](~series-pie.label.position) is `'outer'` and [label.alignTo](~series-pie.label.alignTo) is `'none'` or `'labelLine'`. Longer text will be truncated into `'...'`.
+
~[800x250](${galleryViewPath}doc-example/pie-label-bleedMargin&edit=1&reset=1)
### distanceToLabelLine(number) = 5
-Distance between label line and text.
-
+Distance between label line and text.
+
~[800x250](${galleryViewPath}doc-example/pie-label-distanceToLabelLine&edit=1&reset=1)
## labelLine(Object)
@@ -279,8 +279,8 @@ The label configuration of a single sector.
## animationType(string) = 'expansion'
-Initial animation type.
-+ `'expansion'` Default expansion animation.
+Initial animation type.
++ `'expansion'` Default expansion animation.
+ `'scale'` Scale animation. You can use it with `animationEasing='elasticOut'` to have popup effect.
## animationTypeUpdate(string) = 'transition'
@@ -289,8 +289,8 @@ Initial animation type.
version = "4.4.0"
) }}
-Animation type when data updates.
-+ `'transition'` Changing start and end angle of each sector from the old value to new value.
+Animation type when data updates.
++ `'transition'` Changing start and end angle of each sector from the old value to new value.
+ `'expansion'` The whole pie expands again.
{{ use: partial-animation(
@@ -308,41 +308,41 @@ Animation type when data updates.
{{ if: ${position} }}
#${prefix} position(string) = 'outside'
-The position of label.
-
-**Options: **
-+ `'outside'`
-
- Outside of sectors of pie chart, which relates to corresponding sector through [visual guide line](~series-pie.labelLine).
-
-+ `'inside'`
-
- Inside the sectors of pie chart.
-
-+ `'inner'` is the same with `'inside'`.
-+ `'center'`
-
- In the center of pie chart. See [pie-doughnut example](${galleryEditorPath}pie-doughnut)
+The position of label.
+
+**Options: **
++ `'outside'`
+
+ Outside of sectors of pie chart, which relates to corresponding sector through [visual guide line](~series-pie.labelLine).
+
++ `'inside'`
+
+ Inside the sectors of pie chart.
+
++ `'inner'` is the same with `'inside'`.
++ `'center'`
+
+ In the center of pie chart. See [pie-doughnut example](${galleryEditorPath}pie-doughnut)
{{ /if }}
{{ if: ${formatter} }}
#${prefix} formatter(string|Function)
{{ use: partial-1d-data-label-formatter(
- extra = {
- percent: {
- desc: 'percentage',
- type: 'number'
- }
+ extra = {
+ percent: {
+ desc: 'percentage',
+ type: 'number'
+ }
}
) }}
{{ /if }}
#${prefix} rotate(boolean|number) = null
-Label rotation.
-
-+ If `true`, layout label radically.
+Label rotation.
+
++ If `true`, layout label radically.
+ If `number`, means degree that labels are rotated. From -90 degree to 90 degree. The negative value represents clockwise.
{{ use: partial-text-style(
@@ -357,24 +357,24 @@ The style of visual guide line.
#${prefix} show(boolean)
-Whether to show the visual guide ine.
+Whether to show the visual guide ine.
{{ if: ${length} }}
#${prefix} length(number)
-The length of the first segment of visual guide line.
+The length of the first segment of visual guide line.
{{ /if }}
{{ if: ${length2} }}
#${prefix} length2(number)
-The length of the second segment of visual guide line.
+The length of the second segment of visual guide line.
{{ /if }}
{{ if: ${smooth} }}
#${prefix} smooth(boolean|number) = false
-Whether to smooth the visual guide line. It defaults to be `false` and can be set as `true` or the values from 0 to 1 which indicating the smoothness.
+Whether to smooth the visual guide line. It defaults to be `false` and can be set as `true` or the values from 0 to 1 which indicating the smoothness.
{{ /if }}
#${prefix} lineStyle(Object)
diff --git a/en/option/series/radar.md b/en/option/series/radar.md
index 921af2b..450dd4b 100644
--- a/en/option/series/radar.md
+++ b/en/option/series/radar.md
@@ -3,12 +3,12 @@
# series.radar(Object)
-**radar chart**
-
-Radar chart is mainly used to show multi-variable data, such as the analysis of a football player's varied attributes. It relies [radar](~radar) component.
-
-Here is the example of AQI data which is presented in radar chart.
-
+**radar chart**
+
+Radar chart is mainly used to show multi-variable data, such as the analysis of a football player's varied attributes. It relies [radar](~radar) component.
+
+Here is the example of AQI data which is presented in radar chart.
+
~[600x500](${galleryViewPath}radar-aqi&edit=1&reset=1)
## type(string) = 'radar'
@@ -97,21 +97,21 @@ Area filling style.
## data(Array)
-The data in radar chart is multi-variable (dimension). Here is an example:
-
-```js
-data : [
- {
- value : [4300, 10000, 28000, 35000, 50000, 19000],
- name : 'Allocated Budget'
- },
- {
- value : [5000, 14000, 28000, 31000, 42000, 21000],
- name : 'Actual Spending'
- }
-]
-```
-
+The data in radar chart is multi-variable (dimension). Here is an example:
+
+```js
+data : [
+ {
+ value : [4300, 10000, 28000, 35000, 50000, 19000],
+ name : 'Allocated Budget'
+ },
+ {
+ value : [5000, 14000, 28000, 31000, 42000, 21000],
+ name : 'Actual Spending'
+ }
+]
+```
+
Among them, `value` item array contains data that is corresponding to [radar.indicator](~radar.indicator).
### name(string)
diff --git a/en/option/series/sankey.md b/en/option/series/sankey.md
index 25baaeb..32c13b1 100644
--- a/en/option/series/sankey.md
+++ b/en/option/series/sankey.md
@@ -3,19 +3,19 @@
# series.sankey(Object)
-** Sankey diagram **
-Sankey diagram is a specific type of streamgraph (can also be seen as a directed acyclic graph) in which the width of each branch is shown proportionally to the flow quantity. These graphs are typically used to visualize energy or material or cost transfers between processes. They can also visualize the energy accounts, material flow accounts on a regional or national level, and also the breakdown of cost of item or services.
-
-**Example: **
-
-~[700x580](${galleryViewPath}sankey-energy&edit=1&reset=1)
-
-
-<br>
-**Visual Encoding: **
-
-The Sankey diagram encodes each `node` of the raw data into a small rectangle. Different nodes are presented in different colors as far as possible. The `label` next to the small rectangul encodes the name of the node.
-
+** Sankey diagram **
+Sankey diagram is a specific type of streamgraph (can also be seen as a directed acyclic graph) in which the width of each branch is shown proportionally to the flow quantity. These graphs are typically used to visualize energy or material or cost transfers between processes. They can also visualize the energy accounts, material flow accounts on a regional or national level, and also the breakdown of cost of item or services.
+
+**Example: **
+
+~[700x580](${galleryViewPath}sankey-energy&edit=1&reset=1)
+
+
+<br>
+**Visual Encoding: **
+
+The Sankey diagram encodes each `node` of the raw data into a small rectangle. Different nodes are presented in different colors as far as possible. The `label` next to the small rectangul encodes the name of the node.
+
In addition, the edge between two small rectangles in the diagram encodes the `link` of the raw data. The width of edge is shown proportionally to the `value` of `link`.
## type(string) = 'sankey'
@@ -46,16 +46,16 @@ The gap between any two rectangles in each column of the Sankey diagram.
## nodeAlign(string) = 'justify'
-Controls the horizontal alignment of nodes in the diagram.
-
-May be:
-
-+ `left`: initial nodes (those with no incoming links) are aligned to the left of the diagram.
-
-+ `right`: terminal nodes (those with no outgoing links) are aligned to the right of the diagram.
-
-+ `justify`: initial and terminal nodes are aligned on the left and right edges.
-
+Controls the horizontal alignment of nodes in the diagram.
+
+May be:
+
++ `left`: initial nodes (those with no incoming links) are aligned to the left of the diagram.
+
++ `right`: terminal nodes (those with no outgoing links) are aligned to the right of the diagram.
+
++ `justify`: initial and terminal nodes are aligned on the left and right edges.
+
Note when [orient](~series-sankey.orient) is `vertical`, `nodeAlign` controls vertical alignment.
## layoutIterations(number) = 32
@@ -72,55 +72,55 @@ The drag-and-drop interaction of the node, which is enabled by default. After op
## focusNodeAdjacency(boolean|string) = false
-Support when mouse hovering over a node or an edge, the adjacent nodes and edges are also highlighted. Default off, can be manually opened.
-
-Optional values:
-
-+ `false`: When hovering over a node or an edge, only the hovered node or edge is highlighted.
-+ `true`: the same as `'allEdges'`.
-+ `'allEdges'`: When hovering over a node, all of the adjacent edges and nodes are highlighted. When hovering over an edge, the adjacent nodes are highlighted.
-+ `'outEdges'`: When hovering over a node, the outcoming edges and its adjacent nodes are highlighted. When hovering over an edge, the adjacent nodes are highlighted.
+Support when mouse hovering over a node or an edge, the adjacent nodes and edges are also highlighted. Default off, can be manually opened.
+
+Optional values:
+
++ `false`: When hovering over a node or an edge, only the hovered node or edge is highlighted.
++ `true`: the same as `'allEdges'`.
++ `'allEdges'`: When hovering over a node, all of the adjacent edges and nodes are highlighted. When hovering over an edge, the adjacent nodes are highlighted.
++ `'outEdges'`: When hovering over a node, the outcoming edges and its adjacent nodes are highlighted. When hovering over an edge, the adjacent nodes are highlighted.
+ `'inEdges'`: When hovering over a node, the incoming edges and its adjacent nodes are highlighted. When hovering over an edge, the adjacent nodes are highlighted.
## levels(Array)
-The setting of each layer of Sankey diagram. Can be set layer by layer, as follows:
-
-```js
-levels: [{
- depth: 0,
- itemStyle: {
- color: '#fbb4ae'
- },
- lineStyle: {
- color: 'source',
- opacity: 0.6
- }
-}, {
- depth: 1,
- itemStyle: {
- color: '#b3cde3'
- },
- lineStyle: {
- color: 'source',
- opacity: 0.6
- }
-}]
-```
-
-You can also only set a certain layer:
-
-```js
-levels: [{
- depth: 3,
- itemStyle: {
- color: '#fbb4ae'
- },
- lineStyle: {
- color: 'source',
- opacity: 0.6
- }
-}]
+The setting of each layer of Sankey diagram. Can be set layer by layer, as follows:
+
+```js
+levels: [{
+ depth: 0,
+ itemStyle: {
+ color: '#fbb4ae'
+ },
+ lineStyle: {
+ color: 'source',
+ opacity: 0.6
+ }
+}, {
+ depth: 1,
+ itemStyle: {
+ color: '#b3cde3'
+ },
+ lineStyle: {
+ color: 'source',
+ opacity: 0.6
+ }
+}]
+```
+
+You can also only set a certain layer:
+
+```js
+levels: [{
+ depth: 3,
+ itemStyle: {
+ color: '#fbb4ae'
+ },
+ lineStyle: {
+ color: 'source',
+ opacity: 0.6
+ }
+}]
```
### depth(number)
@@ -197,19 +197,19 @@ The edge style of Sankey diagram, in which [lineStyle.color](~series-sankey.line
## data(Array)
-The nodes list of the sankey diagram.
-
-```js
-data: [{
- name: 'node1',
- // This attribute decides the layer of the current node.
- depth: 0
-}, {
- name: 'node2',
- depth: 1
-}]
-```
-
+The nodes list of the sankey diagram.
+
+```js
+data: [{
+ name: 'node1',
+ // This attribute decides the layer of the current node.
+ depth: 0
+}, {
+ name: 'node2',
+ depth: 1
+}]
+```
+
**Notice:** The name of the node cannot be repeated.
### name(string)
@@ -263,16 +263,16 @@ Equals to [data](~series-sankey.data)
## links(Array)
-The links between nodes. **Notes: The Sankey diagram theoretically only supports Directed Acyclic Graph(DAG), so please make sure that there is no cycle in the links.** For instance:
-
-```js
-links: [{
- source: 'n1',
- target: 'n2'
-}, {
- source: 'n2',
- target: 'n3'
-}]
+The links between nodes. **Notes: The Sankey diagram theoretically only supports Directed Acyclic Graph(DAG), so please make sure that there is no cycle in the links.** For instance:
+
+```js
+links: [{
+ source: 'n1',
+ target: 'n2'
+}, {
+ source: 'n2',
+ target: 'n3'
+}]
```
### source(string)
diff --git a/en/option/series/scatter.md b/en/option/series/scatter.md
index ee84c44..2f7bba4 100644
--- a/en/option/series/scatter.md
+++ b/en/option/series/scatter.md
@@ -3,9 +3,9 @@
# series.scatter(Object)
-Scatter (bubble) chart . The scatter chart in [rectangular coordinate](~grid) could be used to present the relation between `x` and `y`. If data have multiple dimensions, the values of the other dimensions can be visualized through [symbol](~series-scatter.symbol) with various sizes and colors, which becomes a bubble chart. These can be done by using with [visualMap](~visualMap) component.
-
-
+Scatter (bubble) chart . The scatter chart in [rectangular coordinate](~grid) could be used to present the relation between `x` and `y`. If data have multiple dimensions, the values of the other dimensions can be visualized through [symbol](~series-scatter.symbol) with various sizes and colors, which becomes a bubble chart. These can be done by using with [visualMap](~visualMap) component.
+
+
It could be used with [rectangular coordinate](~grid) and [polar coordinate](~polar) and [geographical coordinate](~geo).
## type(string) = 'scatter'
diff --git a/en/option/series/themeRiver.md b/en/option/series/themeRiver.md
index c0cabe8..b1a3913 100644
--- a/en/option/series/themeRiver.md
+++ b/en/option/series/themeRiver.md
@@ -3,20 +3,20 @@
# series.themeRiver(Object)
-** Theme river **
-
-It is a special flow graph which is mainly used to present the changes of an event or theme during a period.
-
-**Sample: **
-
-~[700x580](${galleryViewPath}themeRiver-lastfm&edit=1&reset=1)
-
-
-<br>
-**visual encoding: **
-
-The ribbon-shape river branches in different colors in theme river encode variable events or themes. The width of river branches encode the value of the original dataset.
-
+** Theme river **
+
+It is a special flow graph which is mainly used to present the changes of an event or theme during a period.
+
+**Sample: **
+
+~[700x580](${galleryViewPath}themeRiver-lastfm&edit=1&reset=1)
+
+
+<br>
+**visual encoding: **
+
+The ribbon-shape river branches in different colors in theme river encode variable events or themes. The width of river branches encode the value of the original dataset.
+
What's more, the time attribute of the orinigal dataset would map to a single time axis.
## type(string) = 'themeRiver'
@@ -37,7 +37,7 @@ What's more, the time attribute of the orinigal dataset would map to a single ti
defaultHeight = 'null'
) }}
-** Notes: **
+** Notes: **
The positional information of the whole theme river view reuses the positional information of a single time axis, which are left, top, right and bottom.
## coordinateSystem(string) = "single"
@@ -99,24 +99,24 @@ style of each ribbon-shape river branch in theme river.
## data(Array)
-```js
-data: [
- ["2015/11/09",10,"DQ"],
- ["2015/11/10",10,"DQ"],
- ["2015/11/11",10,"DQ"],
- ["2015/11/08",10,"SS"],
- ["2015/11/09",10,"SS"],
- ["2015/11/10",10,"SS"],
- ["2015/11/11",10,"SS"],
- ["2015/11/12",10,"SS"],
- ["2015/11/13",10,"QG"],
- ["2015/11/08",10,"QG"],
- ["2015/11/11",10,"QG"],
- ["2015/11/13",10,"QG"],
-]
-```
-**data specification: **
-
+```js
+data: [
+ ["2015/11/09",10,"DQ"],
+ ["2015/11/10",10,"DQ"],
+ ["2015/11/11",10,"DQ"],
+ ["2015/11/08",10,"SS"],
+ ["2015/11/09",10,"SS"],
+ ["2015/11/10",10,"SS"],
+ ["2015/11/11",10,"SS"],
+ ["2015/11/12",10,"SS"],
+ ["2015/11/13",10,"QG"],
+ ["2015/11/08",10,"QG"],
+ ["2015/11/11",10,"QG"],
+ ["2015/11/13",10,"QG"],
+]
+```
+**data specification: **
+
As what is shown above, the data format of theme river is double dimensional array. Each item of the inner array consists of the time attribute , the value at a time point and the name of an event or theme. It needs to be noticed that you should provide an event or theme with a complete time quantum as main river. Other events and themes are based on the main river. The default value of time point should be set as 0. That is to say other events or themes are included in the main river. O [...]
### date(string)
diff --git a/en/option/series/treemap.md b/en/option/series/treemap.md
index 707e2bf..a400f84 100644
--- a/en/option/series/treemap.md
+++ b/en/option/series/treemap.md
@@ -3,48 +3,48 @@
# series.treemap(Object)
-[Treemap](https://en.wikipedia.org/wiki/Treemapping) is a common way to present "hierarchical data" or "tree data". It primarily highlights the important nodes at all hierarchies in 『Tree』with area.
-
-
-
-**Example:**
-
-~[700x580](${galleryViewPath}treemap-obama&edit=1&reset=1)
-
-
-<br>
-**Visual Mapping:**
-
-treemap maps the numerical values to area.
-
+[Treemap](https://en.wikipedia.org/wiki/Treemapping) is a common way to present "hierarchical data" or "tree data". It primarily highlights the important nodes at all hierarchies in 『Tree』with area.
+
+
+
+**Example:**
+
+~[700x580](${galleryViewPath}treemap-obama&edit=1&reset=1)
+
+
+<br>
+**Visual Mapping:**
+
+treemap maps the numerical values to area.
+
Moreover, it is able to map some dimensions of data to other visual channel, like colors, lightness of colors and etc.
{{ use: partial-treemap-visual-detial() }}
-<br>
-**Drill Down:**
-
-The feature `drill down` means: when clicking a tree node, this node will be set as root and its children will be shown. When [leafDepth](~series-treemap.leafDepth) is set, this feature is enabled.
-
-**An example about drill down:**
-~[800x500](${galleryViewPath}treemap-drill-down&edit=1&reset=1)
-
-<br>
-<br>
-<br>
-Notice: There are some difference in treemap configuration between ECharts3 and ECharts2. Some immature configuration ways are no longer supported:
-
-+ The position method using `center/size` is no longer supported, and `left/top/bottom/right/width/height` are used to position treemap, as other components do.
-
-+ The configuration item `breadcrumb` is moved outside `itemStyle/itemStyle.emphasis`, and it is in the same level with `itemStyle` now.
-
-+ The configuration item `root` is not avaliable temporarily.User can zoom treemap to see some tiny or deep descendants, or using [leafDepth](~series-treemap.leafDepth) to enable the feature of "drill down".
-
-+ The configuration item `label` is moved outside the `itemStyle/itemStyle.emphasis`, and it is in the same level with `itemStyle` now.
-
-+ The configuration items `itemStyle.childBorderWidth` and `itemStyle.childBorderColor` are not supported anymore (because in this way only 2 levels can be defined). [series-treemap.levels](~series-treemap.levels) is used to define all levels now.
-
-<br>
+<br>
+**Drill Down:**
+
+The feature `drill down` means: when clicking a tree node, this node will be set as root and its children will be shown. When [leafDepth](~series-treemap.leafDepth) is set, this feature is enabled.
+
+**An example about drill down:**
+~[800x500](${galleryViewPath}treemap-drill-down&edit=1&reset=1)
+
+<br>
+<br>
+<br>
+Notice: There are some difference in treemap configuration between ECharts3 and ECharts2. Some immature configuration ways are no longer supported:
+
++ The position method using `center/size` is no longer supported, and `left/top/bottom/right/width/height` are used to position treemap, as other components do.
+
++ The configuration item `breadcrumb` is moved outside `itemStyle/itemStyle.emphasis`, and it is in the same level with `itemStyle` now.
+
++ The configuration item `root` is not avaliable temporarily.User can zoom treemap to see some tiny or deep descendants, or using [leafDepth](~series-treemap.leafDepth) to enable the feature of "drill down".
+
++ The configuration item `label` is moved outside the `itemStyle/itemStyle.emphasis`, and it is in the same level with `itemStyle` now.
+
++ The configuration items `itemStyle.childBorderWidth` and `itemStyle.childBorderColor` are not supported anymore (because in this way only 2 levels can be defined). [series-treemap.levels](~series-treemap.levels) is used to define all levels now.
+
+<br>
<br>
## type(string) = 'treemap'
@@ -67,19 +67,19 @@ Notice: There are some difference in treemap configuration between ECharts3 and
## squareRatio(number)
-The expected square ratio. Layout would approach the ratio as close as possible.
-
+The expected square ratio. Layout would approach the ratio as close as possible.
+
It defaults to be the golden ratio: `0.5 * (1 + Math.sqrt(5))`.
## leafDepth(number) = null
-When `leafDepth` is set, the feature "drill down" is enabled, which means when clicking a tree node, this node will be set as root and its children will be shown.
-
-`leafDepth` represents how many levels are shown at most. For example, when `leafDepth` is set to `1`, only one level will be shown.
-
-`leafDepth` is `null`/`undefined` by default, which means that "drill down" is disabled.
-
-**An example about drill down:**
+When `leafDepth` is set, the feature "drill down" is enabled, which means when clicking a tree node, this node will be set as root and its children will be shown.
+
+`leafDepth` represents how many levels are shown at most. For example, when `leafDepth` is set to `1`, only one level will be shown.
+
+`leafDepth` is `null`/`undefined` by default, which means that "drill down" is disabled.
+
+**An example about drill down:**
~[800x500](${galleryViewPath}treemap-drill-down&edit=1&reset=1)
## drillDownIcon(string) = '▶'
@@ -88,19 +88,19 @@ Marker when the node is able to be drilled down.
## roam(boolean|string) = true
-Whether to enable dragging roam (move and zoom). Optional values are:
-
-+ `false`: roam is disabled.
-+ `'scale'` or `'zoom'`: zoom only.
-+ `'move'` or `'pan'`: move (translation) only.
+Whether to enable dragging roam (move and zoom). Optional values are:
+
++ `false`: roam is disabled.
++ `'scale'` or `'zoom'`: zoom only.
++ `'move'` or `'pan'`: move (translation) only.
+ `true`: both zoom and move (translation) are avaliable.
## nodeClick(boolean|string) = 'zoomToNode'
-The behaviour when clicking a node. Optional values are:
-
-+ `false`: Do nothing after clicked.
-+ `'zoomToNode'`: Zoom to clicked node.
+The behaviour when clicking a node. Optional values are:
+
++ `false`: Do nothing after clicked.
++ `'zoomToNode'`: Zoom to clicked node.
+ `'link'`: If there is [link](~series-treemap.data.link) in node data, do hyperlink jump after clicked.
## zoomToNodeRatio(number) = 0.32*0.32
@@ -109,102 +109,102 @@ The treemap will be auto zoomed to a appropriate ratio when a node is clicked (w
## levels(Array)
-**Multiple Levels Configuration**
-
-treemap adopts 4-level configuration:
-
-```
-"each node" --> "each level" --> "each series".
-```
-
-That is, we can configurate each node, can also configurate each level of the tree, or set overall configurations on each series. The highest priority is node configuration.
-
-`levels` is configurations on each levels, which is used most.
-
-For example:
-
-```javascript
-// Notice that in fact the data structure is not "tree", but is "forest".
-data: [
- {
- name: 'nodeA',
- children: [
- {name: 'nodeAA'},
- {name: 'nodeAB'},
- ]
- },
- {
- name: 'nodeB',
- children: [
- {name: 'nodeBA'}
- ]
- }
-],
-levels: [
- {...}, // configurations of the top level of the data structure "forest"
- // (the level that contains 'nodeA', 'nodeB' shown above).
- {...}, // configurations of the next level
- // (the level that contains 'nodeAA', 'nodeAB', 'nodeBA' shown above)
- {...}, // configurations of the next level
- ...
-]
-```
-
-<br>
-**The Rules about Visual Mapping**
-
-When designing a treemap, we primarily focus on how to visually distinguish "different levels", "different categories in the same level", which requires appropriate settings of "rectangular color", "border thickness", "border color" and even "color saturation of rectangular" and so on on each level.
-
-See [example](${galleryEditorPath}treemap-disk&edit=1&reset=1). The top level is divided into several parts by colors "red", "green", "blue", and etc ... In each color block, `colorSaturation` is used to distinguish nodes in sublevel. The border color of the top level is "white", while the border color of the sublevel is the color that based on the current block color and processed by `borderColorSaturation`.
-
-`treemap` uses this rule of visual configuration: each level computes its visual value based on the configurations (`color`, `colorSaturation`, `borderColor`, `borderColorSaturation`) on this level. If there is no certain configuration in a node, it inherits the configuration from its parent.
-
-In this way, this effect can be configured: set a `color` list on the parent level, and set `colorSaturation` on the child level, and then each node in the parent level would obtain a color from the `color` list, and each node in the child level would obtain a value from `colorSaturation` and compound it with the color inherited from its parent node to get its final color.
-
-
-
-<br>
-**Dimensions and "Extra Visual Mapping"**
-
-See the example below: every `value` field is set as an Array, in which each item in the array represents a dimension respectively.
-
-```javascript
-[
- {
- value: [434, 6969, 8382],
- children: [
- {
- value: [1212, 4943, 5453],
- id: 'someid-1',
- name: 'description of this node',
- children: [...]
- },
- {
- value: [4545, 192, 439],
- id: 'someid-2',
- name: 'description of this node',
- children: [...]
- },
- ...
- ]
- },
- {
- value: [23, 59, 12],
- children: [...]
- },
- ...
-]
-```
-
-`treemap` will map the first dimension (the first item of the array) to "area". If we want to express more information, we could map another dimension (specified by [series-treemap.visualDimension](~series-treemap.viusalDimension)) to another visual types, such as `colorSaturation` and so on. See the [example](${galleryEditorPath}treemap-obama&edit=1&reset=1) and select the legend 'Growth'.
-
+**Multiple Levels Configuration**
+
+treemap adopts 4-level configuration:
+
+```
+"each node" --> "each level" --> "each series".
+```
+
+That is, we can configurate each node, can also configurate each level of the tree, or set overall configurations on each series. The highest priority is node configuration.
+
+`levels` is configurations on each levels, which is used most.
+
+For example:
+
+```javascript
+// Notice that in fact the data structure is not "tree", but is "forest".
+data: [
+ {
+ name: 'nodeA',
+ children: [
+ {name: 'nodeAA'},
+ {name: 'nodeAB'},
+ ]
+ },
+ {
+ name: 'nodeB',
+ children: [
+ {name: 'nodeBA'}
+ ]
+ }
+],
+levels: [
+ {...}, // configurations of the top level of the data structure "forest"
+ // (the level that contains 'nodeA', 'nodeB' shown above).
+ {...}, // configurations of the next level
+ // (the level that contains 'nodeAA', 'nodeAB', 'nodeBA' shown above)
+ {...}, // configurations of the next level
+ ...
+]
+```
+
+<br>
+**The Rules about Visual Mapping**
+
+When designing a treemap, we primarily focus on how to visually distinguish "different levels", "different categories in the same level", which requires appropriate settings of "rectangular color", "border thickness", "border color" and even "color saturation of rectangular" and so on on each level.
+
+See [example](${galleryEditorPath}treemap-disk&edit=1&reset=1). The top level is divided into several parts by colors "red", "green", "blue", and etc ... In each color block, `colorSaturation` is used to distinguish nodes in sublevel. The border color of the top level is "white", while the border color of the sublevel is the color that based on the current block color and processed by `borderColorSaturation`.
+
+`treemap` uses this rule of visual configuration: each level computes its visual value based on the configurations (`color`, `colorSaturation`, `borderColor`, `borderColorSaturation`) on this level. If there is no certain configuration in a node, it inherits the configuration from its parent.
+
+In this way, this effect can be configured: set a `color` list on the parent level, and set `colorSaturation` on the child level, and then each node in the parent level would obtain a color from the `color` list, and each node in the child level would obtain a value from `colorSaturation` and compound it with the color inherited from its parent node to get its final color.
+
+
+
+<br>
+**Dimensions and "Extra Visual Mapping"**
+
+See the example below: every `value` field is set as an Array, in which each item in the array represents a dimension respectively.
+
+```javascript
+[
+ {
+ value: [434, 6969, 8382],
+ children: [
+ {
+ value: [1212, 4943, 5453],
+ id: 'someid-1',
+ name: 'description of this node',
+ children: [...]
+ },
+ {
+ value: [4545, 192, 439],
+ id: 'someid-2',
+ name: 'description of this node',
+ children: [...]
+ },
+ ...
+ ]
+ },
+ {
+ value: [23, 59, 12],
+ children: [...]
+ },
+ ...
+]
+```
+
+`treemap` will map the first dimension (the first item of the array) to "area". If we want to express more information, we could map another dimension (specified by [series-treemap.visualDimension](~series-treemap.viusalDimension)) to another visual types, such as `colorSaturation` and so on. See the [example](${galleryEditorPath}treemap-obama&edit=1&reset=1) and select the legend 'Growth'.
+
<br>
{{ use: partial-treemap-borderColor-setting() }}
-<br>
-**Explanation about borderWidth, gapWidth, borderColor**
-
+<br>
+**Explanation about borderWidth, gapWidth, borderColor**
+
{{ use: partial-treemap-level-props(
@@ -287,63 +287,63 @@ When is no content in breadcrumb, this minimal width need to be set up.
## data(Array)
-the the data format of [series-treemap.data](~series-treemap.data) is a forest. For example:
-
-```javascript
-[ // Tips, the top level is an array.
- {
- value: 1212,
- children: [
- {
- value: 2323, // The value of this node, indicating the area size.
- // it could also be an array, such as [2323, 43, 55], in which the first item of array indicates the area size.
- // The other items of the array can be used for extra visual mapping. See details in series-treemp.levels.
- id: 'someid-1', // id is not mandatory.
- // But if using API, id is used to locate node.
- name: 'description of this node', // show the description text in rectangle.
- children: [...],
- label: { // The label config of this node (if necessary).
- ... // see series-treemap.label.
- },
- itemStyle: { // the itemStyle of this node (if necessary).
- ... // the see series-treemap.itemStyle.
- }
- },
- {
- value: 4545,
- id: 'someid-2',
- name: 'description of this node',
- children: [
- {
- value: 5656,
- id: 'someid-3',
- name: 'description of this node',
- children: [...]
- },
- ...
- ]
- }
- ]
- },
- {
- value: [23, 59, 12]
- // if there is no children, here could be nothing.
- },
- ...
-]
+the the data format of [series-treemap.data](~series-treemap.data) is a forest. For example:
+
+```javascript
+[ // Tips, the top level is an array.
+ {
+ value: 1212,
+ children: [
+ {
+ value: 2323, // The value of this node, indicating the area size.
+ // it could also be an array, such as [2323, 43, 55], in which the first item of array indicates the area size.
+ // The other items of the array can be used for extra visual mapping. See details in series-treemp.levels.
+ id: 'someid-1', // id is not mandatory.
+ // But if using API, id is used to locate node.
+ name: 'description of this node', // show the description text in rectangle.
+ children: [...],
+ label: { // The label config of this node (if necessary).
+ ... // see series-treemap.label.
+ },
+ itemStyle: { // the itemStyle of this node (if necessary).
+ ... // the see series-treemap.itemStyle.
+ }
+ },
+ {
+ value: 4545,
+ id: 'someid-2',
+ name: 'description of this node',
+ children: [
+ {
+ value: 5656,
+ id: 'someid-3',
+ name: 'description of this node',
+ children: [...]
+ },
+ ...
+ ]
+ }
+ ]
+ },
+ {
+ value: [23, 59, 12]
+ // if there is no children, here could be nothing.
+ },
+ ...
+]
```
### value(number|Array)
-The value of this node, indicating the area size.
-
-It could also be an array, such as [2323, 43, 55], in which the first item of array indicates the area size.
-
+The value of this node, indicating the area size.
+
+It could also be an array, such as [2323, 43, 55], in which the first item of array indicates the area size.
+
The other items of the array can be used for extra visual mapping. See details in series-treemp.levels.
### id(string)
-`id` is not mandatory.
+`id` is not mandatory.
But if using API, id is used to locate node.
### name(string)
@@ -356,8 +356,8 @@ Show the description text in rectangle.
### link(string)
-Enable hyperlink jump when clicking on node. It is avaliable when [series-treemap.nodeClick](~series-treemap.nodeClick) is `'link'`.
-
+Enable hyperlink jump when clicking on node. It is avaliable when [series-treemap.nodeClick](~series-treemap.nodeClick) is `'link'`.
+
See [series-treemap.data.target](~series-treemap.data.target).
### target(string) = 'blank'
@@ -388,8 +388,8 @@ child nodes, recursive definition, configurations are the same as [series-treema
#${prefix} visualDimension(number) = 0
-`treemap` is able to map any dimensions of data to visual.
-
+`treemap` is able to map any dimensions of data to visual.
+
The value of [series-treemap.data](~series-treemap.data) can be an array. And each item of the array represents a "dimension". `visualDimension` specifies the dimension on which visual mapping will be performed.
{{ use: partial-treemap-visual-detial() }}
@@ -400,20 +400,20 @@ The value of [series-treemap.data](~series-treemap.data) can be an array. And ea
#${prefix} visualMin(number) = null
-The minimal value of current level. Auto-statistics by default.
-
+The minimal value of current level. Auto-statistics by default.
+
When [colorMappingBy](~series-treemap.levels.colorMappingBy) is set to `'value'`, you are able to specify extent manually for visual mapping by specifying `visualMin` or `visualMax`.
#${prefix} visualMax(number) = null
-The maximal value of current level. Auto-statistics by default.
-
-When [colorMappingBy](~series-treemap.levels.colorMappingBy) is set to `'value'`, you are able to specify extent manually for visual mapping by specifying `visualMin` or `visualMax`.
+The maximal value of current level. Auto-statistics by default.
+
+When [colorMappingBy](~series-treemap.levels.colorMappingBy) is set to `'value'`, you are able to specify extent manually for visual mapping by specifying `visualMin` or `visualMax`.
{{ if: ${prefix} !== '#' }}
#${prefix} color(Array)
-A color list for a level. Each node in the level will obtain a color from the color list (the rule see [colorMappingBy](~series-treemap.levels.colorMappingBy)). It is empty by default, which means the global color list will be used.
+A color list for a level. Each node in the level will obtain a color from the color list (the rule see [colorMappingBy](~series-treemap.levels.colorMappingBy)). It is empty by default, which means the global color list will be used.
{{ use: partial-treemap-visual-detial() }}
@@ -424,8 +424,8 @@ A color list for a level. Each node in the level will obtain a color from the co
#${prefix} colorAlpha(Array) = null
-It indicates the range of tranparent rate (color alpha) {{ if: ${prefix} !== '#' }}for nodes in a level {{ else }} of the series{{ /if }}. The range of values is 0 ~ 1.
-
+It indicates the range of tranparent rate (color alpha) {{ if: ${prefix} !== '#' }}for nodes in a level {{ else }} of the series{{ /if }}. The range of values is 0 ~ 1.
+
For example, `colorAlpha` can be `[0.3, 1]`.
{{ use: partial-treemap-visual-detial() }}
@@ -436,8 +436,8 @@ For example, `colorAlpha` can be `[0.3, 1]`.
#${prefix} colorSaturation(number) = null
-It indicates the range of saturation (color alpha) {{ if: ${prefix} !== '#' }}for nodes in a level {{ else }} of the series{{ /if }}. The range of values is 0 ~ 1.
-
+It indicates the range of saturation (color alpha) {{ if: ${prefix} !== '#' }}for nodes in a level {{ else }} of the series{{ /if }}. The range of values is 0 ~ 1.
+
For example, `colorSaturation` can be `[0.3, 1]`.
{{ use: partial-treemap-visual-detial() }}
@@ -448,27 +448,27 @@ For example, `colorSaturation` can be `[0.3, 1]`.
#${prefix} colorMappingBy(string) = 'index'
-Specify the rule according to which each node obtain color from [color list](~series-treemap.levels.color). Optional values:
-
-* `'value'`:
-
-Map [series-treemap.data.value](~series-treemap.data.value) to color.
-
-In this way, the color of each node indicate its value.
-
-[visualDimension](~series-treemap.levels.visualDimension) can be used to specify which dimension of [data](~series-treemap.data) is used to perform visual mapping.
-
-* `'index'`:
-
-Map the `index` (ordinal number) of nodes to color. Namely, in a level, the first node is mapped to the first color of [color list](~series-treemap.levels.color), and the second node gets the second color.
-
-In this way, adjacent nodes are distinguished by color.
-
-
-* `'id'`:
-
-Map [series-treemap.data.id](~series-treemap.data.id) to color.
-
+Specify the rule according to which each node obtain color from [color list](~series-treemap.levels.color). Optional values:
... 186 lines suppressed ...
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org