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/01 06:02:04 UTC
[incubator-echarts-doc] branch next updated: format option docs
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 6755ba8 format option docs
6755ba8 is described below
commit 6755ba8825f7f2e6a24d8284407664ec41b3f514
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Sep 1 13:59:48 2020 +0800
format option docs
---
.gitignore | 6 +-
en/option/component/angle-axis.md | 72 +-
en/option/component/aria.md | 15 +-
en/option/component/axis-common.md | 793 +-
en/option/component/axisPointer.md | 20 +-
en/option/component/brush.md | 73 +-
en/option/component/calendar.md | 84 +-
en/option/component/data-transform-external.md | 7 +-
en/option/component/data-transform-filter.md | 7 +-
en/option/component/data-transform-sort.md | 7 +-
en/option/component/data-zoom-inside.md | 74 +-
en/option/component/data-zoom-slider.md | 231 +-
en/option/component/data-zoom.md | 248 +-
en/option/component/dataset.md | 32 +-
en/option/component/geo-common.md | 202 +-
en/option/component/geo.md | 138 +-
en/option/component/graphic.md | 36 +-
en/option/component/grid.md | 66 +-
en/option/component/legend.md | 485 +-
en/option/component/parallel-axis.md | 133 +-
en/option/component/parallel.md | 124 +-
en/option/component/polar.md | 37 +-
en/option/component/radar.md | 203 +-
en/option/component/radius-axis.md | 56 +-
en/option/component/single-axis.md | 37 +-
en/option/component/timeline.md | 609 +-
en/option/component/title.md | 191 +-
en/option/component/toolbox.md | 613 +-
en/option/component/tooltip.md | 121 +-
en/option/component/visual-map-continuous.md | 159 +-
en/option/component/visual-map-piecewise.md | 224 +-
en/option/component/visual-map.md | 341 +-
en/option/component/x-axis.md | 100 +-
en/option/component/y-axis.md | 98 +-
en/option/partial/1d-data.md | 26 +-
en/option/partial/2d-data.md | 59 +-
en/option/partial/animation.md | 91 +-
en/option/partial/area-style.md | 45 +-
en/option/partial/axisPointer-common.md | 88 +-
en/option/partial/barGrid.md | 117 +-
en/option/partial/circular-layout.md | 25 +-
en/option/partial/clip.md | 6 +-
en/option/partial/color-desc.md | 8 +-
en/option/partial/component-common-style.md | 69 +-
en/option/partial/coord-sys.md | 91 +-
en/option/partial/cursor.md | 2 +
en/option/partial/data-id-desc.md | 8 +-
en/option/partial/data-name-desc.md | 8 +-
en/option/partial/data-transform.md | 6 +
en/option/partial/encode-dimensions.md | 8 +-
en/option/partial/formatter.md | 12 +-
en/option/partial/icon.md | 64 +-
en/option/partial/id.md | 6 +-
en/option/partial/item-style.md | 73 +-
en/option/partial/label.md | 89 +-
en/option/partial/large.md | 4 +-
en/option/partial/legend-hover-link.md | 10 +-
en/option/partial/line-data.md | 8 +-
en/option/partial/line-style.md | 57 +-
en/option/partial/mark-area.md | 98 +-
en/option/partial/mark-line.md | 345 +-
en/option/partial/mark-point.md | 222 +-
en/option/partial/marker.md | 48 +-
en/option/partial/padding.md | 8 +-
en/option/partial/parallel.md | 66 +-
en/option/partial/progressive.md | 6 +-
en/option/partial/rect-layout-width-height.md | 36 +-
en/option/partial/rect-layout.md | 46 +-
en/option/partial/roam.md | 31 +-
en/option/partial/series-name.md | 10 +-
en/option/partial/show.md | 8 +-
en/option/partial/silent.md | 3 +
en/option/partial/style-shadow-opacity.md | 108 +-
en/option/partial/symbol.md | 53 +-
en/option/partial/text-style.md | 387 +-
en/option/partial/tooltip-common.md | 151 +-
en/option/partial/version.md | 2 +-
en/option/partial/visual-mapping.md | 7 +-
en/option/partial/z-zlevel.md | 20 +-
en/option/partial/zr-graphic.md | 1124 +-
en/option/series/bar.md | 404 +-
en/option/series/boxplot.md | 283 +-
en/option/series/candlestick.md | 436 +-
en/option/series/custom.md | 164 +-
en/option/series/effectScatter.md | 336 +-
en/option/series/funnel.md | 446 +-
en/option/series/gauge.md | 452 +-
en/option/series/graph.md | 734 +-
en/option/series/heatmap.md | 253 +-
en/option/series/line.md | 409 +-
en/option/series/lines.md | 389 +-
en/option/series/map.md | 228 +-
en/option/series/parallel.md | 220 +-
en/option/series/pictorialBar.md | 590 +-
en/option/series/pie.md | 570 +-
en/option/series/radar.md | 334 +-
en/option/series/sankey.md | 488 +-
en/option/series/scatter.md | 333 +-
en/option/series/series.md | 10 +-
en/option/series/sunburst.md | 176 +-
en/option/series/themeRiver.md | 202 +-
en/option/series/tree.md | 180 +-
en/option/series/treemap.md | 825 +-
package-lock.json | 12 +-
package.json | 1 +
public/en/css/SourceCodePro-Regular.woff | Bin 0 -> 89796 bytes
public/en/css/doc-bundle.css | 1679 +++
public/en/css/doc-bundle.css.map | 1 +
public/en/css/element-icons.ttf | Bin 0 -> 55956 bytes
public/en/css/element-icons.woff | Bin 0 -> 28200 bytes
public/en/css/icon.eot | Bin 0 -> 1440 bytes
public/en/css/icon.svg | 11 +
public/en/css/icon.ttf | Bin 0 -> 1276 bytes
public/en/css/icon.woff | Bin 0 -> 1352 bytes
public/en/js/doc-bundle.js | 14704 +++++++++++++++++++++++
public/zh/css/SourceCodePro-Regular.woff | Bin 0 -> 89796 bytes
public/zh/css/doc-bundle.css | 1679 +++
public/zh/css/doc-bundle.css.map | 1 +
public/zh/css/element-icons.ttf | Bin 0 -> 55956 bytes
public/zh/css/element-icons.woff | Bin 0 -> 28200 bytes
public/zh/css/icon.eot | Bin 0 -> 1440 bytes
public/zh/css/icon.svg | 11 +
public/zh/css/icon.ttf | Bin 0 -> 1276 bytes
public/zh/css/icon.woff | Bin 0 -> 1352 bytes
public/zh/js/doc-bundle.js | 14704 +++++++++++++++++++++++
tool/format.js | 4 +
tool/patchEnOption.js | 5 +
zh/option/component/angle-axis.md | 32 +-
zh/option/component/aria.md | 13 +-
zh/option/component/axis-common.md | 222 +-
zh/option/component/axisPointer.md | 20 +-
zh/option/component/brush.md | 77 +-
zh/option/component/calendar.md | 70 +-
zh/option/component/data-transform-external.md | 8 +-
zh/option/component/data-transform-filter.md | 7 +-
zh/option/component/data-transform-sort.md | 7 +-
zh/option/component/data-zoom-inside.md | 15 +-
zh/option/component/data-zoom-slider.md | 71 +-
zh/option/component/data-zoom.md | 58 +-
zh/option/component/dataset.md | 32 +-
zh/option/component/geo-common.md | 65 +-
zh/option/component/geo.md | 57 +-
zh/option/component/graphic.md | 33 +-
zh/option/component/grid.md | 28 +-
zh/option/component/legend.md | 104 +-
zh/option/component/parallel-axis.md | 32 +-
zh/option/component/parallel.md | 38 +-
zh/option/component/polar.md | 19 +-
zh/option/component/radar.md | 59 +-
zh/option/component/radius-axis.md | 28 +-
zh/option/component/single-axis.md | 37 +-
zh/option/component/timeline.md | 146 +-
zh/option/component/title.md | 54 +-
zh/option/component/toolbox.md | 175 +-
zh/option/component/tooltip.md | 24 +-
zh/option/component/visual-map-continuous.md | 25 +-
zh/option/component/visual-map-piecewise.md | 32 +-
zh/option/component/visual-map.md | 124 +-
zh/option/component/x-axis.md | 34 +-
zh/option/component/y-axis.md | 35 +-
zh/option/partial/1d-data.md | 10 +-
zh/option/partial/2d-data.md | 13 +-
zh/option/partial/animation.md | 25 +-
zh/option/partial/area-style.md | 29 +-
zh/option/partial/axisPointer-common.md | 90 +-
zh/option/partial/barGrid.md | 41 +-
zh/option/partial/circular-layout.md | 5 +-
zh/option/partial/clip.md | 6 +-
zh/option/partial/color-desc.md | 4 +-
zh/option/partial/component-common-style.md | 30 +-
zh/option/partial/coord-sys.md | 51 +-
zh/option/partial/cursor.md | 2 +
zh/option/partial/data-id-desc.md | 4 +-
zh/option/partial/data-name-desc.md | 4 +-
zh/option/partial/data-transform.md | 6 +-
zh/option/partial/encode-dimensions.md | 10 +-
zh/option/partial/focus-blur-scope.md | 14 +-
zh/option/partial/formatter.md | 5 +-
zh/option/partial/icon.md | 16 +-
zh/option/partial/id.md | 6 +-
zh/option/partial/item-style.md | 32 +-
zh/option/partial/label-layout.md | 9 +-
zh/option/partial/label.md | 36 +-
zh/option/partial/large.md | 4 +-
zh/option/partial/legend-hover-link.md | 3 +
zh/option/partial/line-data.md | 2 +
zh/option/partial/line-style.md | 22 +-
zh/option/partial/mark-area.md | 97 +-
zh/option/partial/mark-line.md | 121 +-
zh/option/partial/mark-point.md | 103 +-
zh/option/partial/marker.md | 46 +-
zh/option/partial/padding.md | 6 +-
zh/option/partial/parallel.md | 19 +-
zh/option/partial/progressive.md | 6 +-
zh/option/partial/rect-layout-width-height.md | 12 +-
zh/option/partial/rect-layout.md | 12 +-
zh/option/partial/roam.md | 10 +
zh/option/partial/selected-mode.md | 4 +-
zh/option/partial/series-name.md | 4 +
zh/option/partial/show.md | 4 +-
zh/option/partial/silent.md | 3 +
zh/option/partial/style-shadow-opacity.md | 61 +-
zh/option/partial/symbol.md | 12 +-
zh/option/partial/text-style.md | 160 +-
zh/option/partial/tooltip-common.md | 161 +-
zh/option/partial/version.md | 2 +-
zh/option/partial/visual-mapping.md | 5 +-
zh/option/partial/z-zlevel.md | 4 +-
zh/option/partial/zr-graphic.md | 1115 +-
zh/option/series/bar.md | 226 +-
zh/option/series/boxplot.md | 163 +-
zh/option/series/candlestick.md | 207 +-
zh/option/series/custom.md | 162 +-
zh/option/series/effectScatter.md | 183 +-
zh/option/series/funnel.md | 244 +-
zh/option/series/gauge.md | 130 +-
zh/option/series/graph.md | 305 +-
zh/option/series/heatmap.md | 121 +-
zh/option/series/line.md | 197 +-
zh/option/series/lines.md | 136 +-
zh/option/series/map.md | 113 +-
zh/option/series/parallel.md | 93 +-
zh/option/series/pictorialBar.md | 282 +-
zh/option/series/pie.md | 260 +-
zh/option/series/radar.md | 171 +-
zh/option/series/sankey.md | 149 +-
zh/option/series/scatter.md | 194 +-
zh/option/series/series.md | 2 -
zh/option/series/sunburst.md | 178 +-
zh/option/series/themeRiver.md | 93 +-
zh/option/series/tree.md | 181 +-
zh/option/series/treemap.md | 326 +-
232 files changed, 46622 insertions(+), 12396 deletions(-)
diff --git a/.gitignore b/.gitignore
index 1fe965f..b28f93f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -182,5 +182,7 @@ slides/webgl
# Editor temporal files
-/editor/server/blocks.json
-/editor/server/test.json
\ No newline at end of file
+/editor/common/blocks.json
+/editor/server/test
+
+/zh-src
\ No newline at end of file
diff --git a/en/option/component/angle-axis.md b/en/option/component/angle-axis.md
index 474a797..844ae79 100644
--- a/en/option/component/angle-axis.md
+++ b/en/option/component/angle-axis.md
@@ -1,44 +1,44 @@
-
-{{target: component-angle-axis}}
-
-# angleAxis(Object)
-
-The angle axis in Polar Coordinate.
-
-{{use: partial-component-id(prefix="#")}}
-
-## polarIndex(number) = 0
-
-The index of angle axis in Polar Coordinate. The first axis is used by default.
-
-## startAngle(number) = 90
-
+
+{{ target: component-angle-axis }}
+
+# angleAxis(Object)
+
+The angle axis in Polar Coordinate.
+
+{{ use: partial-component-id(
+ prefix = "#"
+) }}
+
+## polarIndex(number) = 0
+
+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.
-~[400x400](${galleryViewPath}doc-example/polar-start-angle&edit=1&reset=1)
-
-## clockwise(boolean) = true
-
+~[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`.
-~[400x400](${galleryViewPath}doc-example/polar-anticlockwise&edit=1&reset=1)
-
-{{ use: axis-common(
- prefix='#',
- componentType='angleAxis',
- axisTypeDefault="'category'",
- hasSplitLineAndArea=true,
- galleryViewPath=${galleryViewPath},
- galleryEditorPath=${galleryEditorPath}
-)}}
-
-
-{{use:partial-z-zlevel(
- prefix="#",
- componentName="Angle Axis",
- defaultZ=0
-) }}
+~[400x400](${galleryViewPath}doc-example/polar-anticlockwise&edit=1&reset=1)
+
+{{ use: axis-common(
+ prefix = '#',
+ componentType = 'angleAxis',
+ axisTypeDefault = "'category'",
+ hasSplitLineAndArea = true
+) }}
+
+{{ use: partial-z-zlevel(
+ prefix = "#",
+ componentName = "Angle Axis",
+ defaultZ = 0
+) }}
+
diff --git a/en/option/component/aria.md b/en/option/component/aria.md
index 6799142..09e5aa1 100644
--- a/en/option/component/aria.md
+++ b/en/option/component/aria.md
@@ -1,6 +1,7 @@
-{{target: component-aria}}
-# aria
+{{ target: component-aria }}
+
+# aria(*)
W3C defined the Accessible Rich Internet Applications Suite ([WAI-ARIA](https://www.w3.org/WAI/intro/aria)) to make Web content and Web applications more accessible to the disabled. From ECharts 4.0, we support ARIA by generating description for charts automatically.
@@ -45,7 +46,6 @@ This is a chart of "Source of user access to a site." The chart type is a pie ch
The default language is in Chinese, but you can configure it with templates. The following document shows how to do it.
-
## show(boolean) = false
Whether to enable ARIA. When enabled, there should be an `aria-label` label.
@@ -56,7 +56,6 @@ By default, the description is generated by our algorithm based on charts. If us
This is useful when single data values cannot represent what the chart means. For example, if the chart is a map containing many scatter points. Default description can only show the data, but the users may find it hard to interpret. In this case, `description` should be set to describe the meaning of chart.
-
## general(Object)
General description of chart.
@@ -71,7 +70,6 @@ If [title.text](~title.text) exists, then this is used. Template variable:
If [title.text](~title.text) does not exist, then this is used.
-
## series(Object)
Series-related configures.
@@ -103,12 +101,11 @@ If chart doesn't contain `name` attribute, then this is used. Template variable:
- `{seriesType}`: will be replaced by series type name.
-
### multiple(Object)
Description used when there are more than one chart.
-#### prefix(string) = 'It consists of {seriesCount} chart series. '
+#### prefix(string) = 'It consists of {seriesCount} chart series. '
General description for all series. This displays before all series descriptions. Template variable:
@@ -139,9 +136,6 @@ Separators other than the last one.
The last series seperator.
-
-
-
## data(Object)
Data-related configures.
@@ -186,3 +180,4 @@ Separators other than the last one.
The last data separator.
Note that since series `separator.end` is used after the last data, `data.separator.end` is not needed in most cases.
+
diff --git a/en/option/component/axis-common.md b/en/option/component/axis-common.md
index 9f46bdc..ea4be0e 100644
--- a/en/option/component/axis-common.md
+++ b/en/option/component/axis-common.md
@@ -1,10 +1,12 @@
-{{target: partial-axis-common-axis-line}}
-#${prefix} silent(boolean) = false
-
-Set this to `true`, to prevent interaction with the axis.
-
-#${prefix} triggerEvent(boolean) = false
-
+
+{{ target: partial-axis-common-axis-line }}
+
+#${prefix} silent(boolean) = false
+
+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:
@@ -21,97 +23,119 @@ Parameters of the event include:
// Click on laben name to trigger event.
name: ''
}
-```
-
-
-#${prefix} axisLine(Object)
-
-Settings related to axis line.
-
-##${prefix} show(boolean) = ${defaultShow|default(true)}
-
+```
+
+#${prefix} axisLine(Object)
+
+Settings related to axis line.
+
+##${prefix} show(boolean) = ${defaultShow|default(true)}
+
Set this to `false` to prevent the axis line from showing.
-{{ if: ${componentType} == 'xAxis' || ${componentType} == 'yAxis' }}
-##${prefix} onZero(boolean) = true
-Specifies whether X or Y axis lies on the other's origin position, where value is 0 on axis. Valid only if the other axis is of value type, and contains 0 value.
-
-##${prefix} onZeroAxisIndex(number)
+{{ if: ${componentType} == 'xAxis' || ${componentType} == 'yAxis' }}
+
+##${prefix} onZero(boolean) = true
+
+Specifies whether X or Y axis lies on the other's origin position, where value is 0 on axis. Valid only if the other axis is of value type, and contains 0 value.
+
+##${prefix} onZeroAxisIndex(number)
+
When mutiple axes exists, this option can be used to specify which axis can be "onZero" to.
-{{ /if }}
-
-##${prefix} symbol(string|Array) = 'none'
-Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It's set to be `'none'` by default, meaning no arrow for either end. If it is set to be `'arrow'`, there shall be two arrows. If there should only one arrow at the end, it should set to be `['none', 'arrow']`.
-
-##${prefix} symbolSize(Array) = [10, 15]
-Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.
-
-##${prefix} symbolOffset(Array|number) = [0, 0]
-Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.
-
-##${prefix} lineStyle(Object)
-{{ use: partial-line-style(prefix='##' + ${prefix}, defaultColor="'#333'", defaultWidth=1, defaultType="'solid'", name="line style") }}
-
-
-{{target: partial-axis-common-axis-label}}
-#${prefix} axisLabel(Object)
-
+{{ /if }}
+
+##${prefix} symbol(string|Array) = 'none'
+
+Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It's set to be `'none'` by default, meaning no arrow for either end. If it is set to be `'arrow'`, there shall be two arrows. If there should only one arrow at the end, it should set to be `['none', 'arrow']`.
+
+##${prefix} symbolSize(Array) = [10, 15]
+
+Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.
+
+##${prefix} symbolOffset(Array|number) = [0, 0]
+
+Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.
+
+##${prefix} lineStyle(Object)
+
+{{ use: partial-line-style(
+ prefix = '##' + ${prefix},
+ defaultColor = "'#333'",
+ defaultWidth = 1,
+ defaultType = "'solid'",
+ name = "line style"
+) }}
+
+
+
+
+{{ target: partial-axis-common-axis-label }}
+
+#${prefix} axisLabel(Object)
+
Settings related to axis label.
-{{if: !${hideShow} }}
-
-##${prefix} show(boolean) = ${defaultShow|default(true)}
-
+{{ if: !${hideShow} }}
+
+##${prefix} show(boolean) = ${defaultShow|default(true)}
+
Set this to `false` to prevent the axis label from appearing.
{{ /if }}
-{{ if: ${hasLabelInterval|default(true)} }}
-##${prefix} interval(number|Function) = 'auto'
-{{ use: partial-axis-interval(
+{{ if: ${hasLabelInterval|default(true)} }}
+
+##${prefix} interval(number|Function) = 'auto'
+
+{{ use: partial-axis-interval(
name="Axis label",
isAxisLabel=true,
componentType=${componentType}
-) }}
+) }}
{{ /if }}
-{{ if: ${hasInside|default(true)} }}
-##${prefix} inside(boolean) = false
-
+{{ if: ${hasInside|default(true)} }}
+
+##${prefix} inside(boolean) = false
+
Set this to `true` so the axis labels face the `inside` direction.
{{ /if }}
-{{ if: ${componentType} !== 'angleAxis' }}
-##${prefix} rotate(number) = 0
+{{ 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.
-{{ /if }}
-
-##${prefix} margin(number) = 8
-
-The margin between the axis label and the axis line.
-
-##${prefix} formatter(string|Function) = null
-
-{{use: axis-common-formatter-desc}}
-
-##${prefix} showMinLabel(boolean) = null
-Whether to show the label of the min tick. Optional values: `true`, `false`, `null`. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.
-
-##${prefix} showMaxLabel(boolean) = null
-Whether to show the label of the max tick. Optional values: `true`, `false`, `null`. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.
-
-{{ use: partial-text-style(
- prefix='#' + ${prefix},
- defaultColor="'#333'"
-)}}
-
-
-<!-- Overwrite color -->
-##${prefix} color(Color|Function)
-
+{{ /if }}
+
+##${prefix} margin(number) = 8
+
+The margin between the axis label and the axis line.
+
+##${prefix} formatter(string|Function) = null
+
+{{ use: axis-common-formatter-desc() }}
+
+##${prefix} showMinLabel(boolean) = null
+
+Whether to show the label of the min tick. Optional values: `true`, `false`, `null`. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.
+
+##${prefix} showMaxLabel(boolean) = null
+
+Whether to show the label of the max tick. Optional values: `true`, `false`, `null`. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.
+
+{{ use: partial-text-style(
+ prefix = '#' + ${prefix},
+ defaultColor = "'#333'"
+) }}
+
+<!-- Overwrite color -->
+
+##${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
@@ -126,61 +150,78 @@ textStyle: {
return value >= 0 ? 'green' : 'red';
}
}
-```
-
-
-
-{{target: partial-axis-common-axis-tick}}
-
-#${prefix} axisTick(Object)
-Settings related to axis tick.
-
-##${prefix} show(boolean) = ${defaultShow|default(true)}
-
+```
+
+
+
+
+{{ target: partial-axis-common-axis-tick }}
+
+#${prefix} axisTick(Object)
+
+Settings related to axis tick.
+
+##${prefix} show(boolean) = ${defaultShow|default(true)}
+
Set this to `false` to prevent the axis tick from showing.
-{{ if: ${hasAlignWithLabel|default(true)} }}
-##${prefix} alignWithLabel(boolean) = false
+{{ 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:
{{ /if }}
-{{ if: ${hasLabelInterval|default(true)} }}
-##${prefix} interval(number|Function) = 'auto'
-{{ use: partial-axis-interval(
+{{ if: ${hasLabelInterval|default(true)} }}
+
+##${prefix} interval(number|Function) = 'auto'
+
+{{ use: partial-axis-interval(
name="axisTick",
componentType=${componentType}
-) }}
+) }}
{{ /if }}
-{{ if: ${hasInside|default(true)} }}
-##${prefix} inside(boolean) = false
+{{ if: ${hasInside|default(true)} }}
+
+##${prefix} inside(boolean) = false
+
Set this to `true` so the axis labels face the `inside` direction.
-{{ /if }}
-
-##${prefix} length(number) = 5
-The length of the axis tick.
-
-##${prefix} lineStyle(Object)
-{{ use: partial-line-style(
- prefix='##' + ${prefix},
- defaultColor="'#333'",
- defaultWidth=1,
- defaultType="'solid'",
- name="axisTick"
-) }}
-<!-- Overwrite color -->
-###${prefix} color(Color)
-
-Color of axis label is set to be [axisLine.lineStyle.color](~${componentType}.axisLine.lineStyle.color) by default.
-
-
-
-{{target: partial-axis-common-minor-tick}}
-
-#${prefix} minorTick(Object)
-{{ use: partial-version(version = "4.6.0") }}
+{{ /if }}
+
+##${prefix} length(number) = 5
+
+The length of the axis tick.
+
+##${prefix} lineStyle(Object)
+
+{{ use: partial-line-style(
+ prefix = '##' + ${prefix},
+ defaultColor = "'#333'",
+ defaultWidth = 1,
+ defaultType = "'solid'",
+ name = "axisTick"
+) }}
+
+<!-- Overwrite color -->
+
+###${prefix} color(Color)
+
+Color of axis label is set to be [axisLine.lineStyle.color](~${componentType}.axisLine.lineStyle.color) by default.
+
+
+
+
+{{ target: partial-axis-common-minor-tick }}
+
+#${prefix} minorTick(Object)
+
+{{ use: partial-version(
+ version = "4.6.0"
+) }}
+
Settings related minor ticks.
Note: `minorTick` is not available in the `category` type axis.
@@ -191,60 +232,73 @@ Examples:
~[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)}
-If show minor ticks.
-
-##${prefix} splitNumber(number) = 5
-Number of interval splited by minor ticks.
-
-##${prefix} length(number) = 3
-Length of minor ticks lines。
-
-##${prefix} lineStyle(Object)
-
-{{ use: partial-line-style(
- prefix='##' + ${prefix},
- defaultWidth=1,
- defaultType="'solid'",
- name="minorTick"
-) }}
-<!-- Overwrite color -->
-###${prefix} color(Color)
-Style configuration of minor ticks lines [axisLine.lineStyle.color](~${componentType}.axisLine.lineStyle.color)。
-
-
-
-{{target: partial-axis-common-split-line}}
-
-#${prefix} splitLine(Object)
-Split line of axis in [grid](~grid) area.
-
-##${prefix} show(boolean) = ${defaultShow|default(true)}
-
+~[600x350](${galleryViewPath}line-log&edit=1&reset=1)
+
+##${prefix} show(boolean) = ${defaultShow|default(false)}
+
+If show minor ticks.
+
+##${prefix} splitNumber(number) = 5
+
+Number of interval splited by minor ticks.
+
+##${prefix} length(number) = 3
+
+Length of minor ticks lines。
+
+##${prefix} lineStyle(Object)
+
+{{ use: partial-line-style(
+ prefix = '##' + ${prefix},
+ defaultWidth = 1,
+ defaultType = "'solid'",
+ name = "minorTick"
+) }}
+
+<!-- Overwrite color -->
+
+###${prefix} color(Color)
+
+Style configuration of minor ticks lines [axisLine.lineStyle.color](~${componentType}.axisLine.lineStyle.color)。
+
+
+
+
+{{ target: partial-axis-common-split-line }}
+
+#${prefix} splitLine(Object)
+
+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.
-{{ if: ${hasLabelInterval|default(true)} }}
-##${prefix} interval(number|Function) = 'auto'
-{{ use: partial-axis-interval(
+{{ if: ${hasLabelInterval|default(true)} }}
+
+##${prefix} interval(number|Function) = 'auto'
+
+{{ use: partial-axis-interval(
name="Axis splitLine",
componentType=${componentType}
-) }}
-{{ /if }}
-
-##${prefix} lineStyle(Object)
-{{ use: partial-line-style(
- prefix='##' + ${prefix},
- defaultColor="'#333'",
- defaultWidth=1,
- defaultType="'solid'",
- name="splitLine"
-) }}
-
-<!-- overwrite color -->
-###${prefix} color(Array|string) = ['#ccc']
+) }}
+{{ /if }}
+
+##${prefix} lineStyle(Object)
+
+{{ use: partial-line-style(
+ prefix = '##' + ${prefix},
+ defaultColor = "'#333'",
+ defaultWidth = 1,
+ defaultType = "'solid'",
+ name = "splitLine"
+) }}
+
+<!-- overwrite color -->
+
+###${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.
@@ -257,56 +311,77 @@ splitLine: {
color: ['#aaa', '#ddd']
}
}
-```
-
-
-{{target: partial-axis-common-minor-split-line}}
-
-#${prefix} minorSplitLine(Object)
-{{ use: partial-version(version = "4.6.0") }}
-Minor split lines of axis in the [grid](~grid) area。It will align to the [minorTick](~${componentType}.minorTick)
-
-##${prefix} show(boolean) = ${defaultShow|default(false)}
-If show minor split lines.
-
-##${prefix} lineStyle(Object)
-{{ use: partial-line-style(
- prefix='##' + ${prefix},
- defaultColor="'#eee'",
- defaultWidth=1,
- defaultType="'solid'",
- name="minorSplitLine"
-) }}
-
-
-
-{{target: partial-axis-common-split-area}}
-
-#${prefix} splitArea(Object)
-
+```
+
+
+
+
+{{ target: partial-axis-common-minor-split-line }}
+
+#${prefix} minorSplitLine(Object)
+
+{{ use: partial-version(
+ version = "4.6.0"
+) }}
+
+Minor split lines of axis in the [grid](~grid) area。It will align to the [minorTick](~${componentType}.minorTick)
+
+##${prefix} show(boolean) = ${defaultShow|default(false)}
+
+If show minor split lines.
+
+##${prefix} lineStyle(Object)
+
+{{ use: partial-line-style(
+ prefix = '##' + ${prefix},
+ defaultColor = "'#eee'",
+ defaultWidth = 1,
+ defaultType = "'solid'",
+ name = "minorSplitLine"
+) }}
+
+
+
+
+{{ target: partial-axis-common-split-area }}
+
+#${prefix} splitArea(Object)
+
Split area of axis in [grid](~grid) area, not shown by default.
-{{ if: ${hasLabelInterval|default(true)} }}
-##${prefix} interval(number|Function) = 'auto'
-{{ use: partial-axis-interval(
+{{ if: ${hasLabelInterval|default(true)} }}
+
+##${prefix} interval(number|Function) = 'auto'
+
+{{ use: partial-axis-interval(
name="Axis splitArea",
componentType=${componentType}
-) }}
-{{ /if }}
-
-##${prefix} show(boolean) = ${defaultShow|default(false)}
-Set this to `true` to show the splitArea.
-##${prefix} areaStyle(Object)
-Split area style.
-###${prefix} color(Array) = ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
+) }}
+{{ /if }}
+
+##${prefix} show(boolean) = ${defaultShow|default(false)}
+
+Set this to `true` to show the splitArea.
+
+##${prefix} areaStyle(Object)
+
+Split area style.
+
+###${prefix} color(Array) = ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
+
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(prefix='##' + ${prefix}) }}
-
-
-
-{{target: partial-axis-type-content}}
+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(
+ prefix = '##' + ${prefix}
+) }}
+
+
+
+
+{{ target: partial-axis-type-content }}
+
Type of axis.
Option:
@@ -314,61 +389,68 @@ Option:
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}}.
+ 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.
-
-
-{{target: axis-common}}
-
-#${prefix} type(string) = ${axisTypeDefault|default('value')}
-{{use: partial-axis-type-content(
- componentType=${componentType}
-) }}
-
-{{ if: ${componentType} !== 'angleAxis' }}
-#${prefix} name(string)
-
-Name of axis.
-
-#${prefix} nameLocation(string) = 'end'
-
+ Log axis, suitable for log data.
+
+
+
+
+{{ target: axis-common }}
+
+#${prefix} type(string) = ${axisTypeDefault|default('value')}
+
+{{ use: partial-axis-type-content(
+ componentType = ${componentType}
+) }}
+
+{{ if: ${componentType} !== 'angleAxis' }}
+
+#${prefix} name(string)
+
+Name of axis.
+
+#${prefix} nameLocation(string) = 'end'
+
Location of axis name.
**Options: **
+ `'start'`
+ `'middle'` or `'center'`
-+ `'end'`
-
-#${prefix} nameTextStyle(Object)
-
++ `'end'`
+
+#${prefix} nameTextStyle(Object)
+
Text style of axis name.
-{{use: partial-text-style(prefix='#' + ${prefix}, name="axis name")}}
-<!-- Overwrite color -->
-##${prefix} color(Color)
-Color of axis name uses [axisLine.lineStyle.color](~${componentType}.axisLine.lineStyle.color) by default.
-
-#${prefix} nameGap(number) = 15
-
-Gap between axis name and axis line.
-
-#${prefix} nameRotate(number) = null
-
-Rotation of axis name.
-
-#${prefix} inverse(boolean) = false
-
+{{ use: partial-text-style(prefix='#' + ${prefix}, name="axis name") }}
+<!-- Overwrite color -->
+
+##${prefix} color(Color)
+
+Color of axis name uses [axisLine.lineStyle.color](~${componentType}.axisLine.lineStyle.color) by default.
+
+#${prefix} nameGap(number) = 15
+
+Gap between axis name and axis line.
+
+#${prefix} nameRotate(number) = null
+
+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.
-{{/if}}
-
-#${prefix} boundaryGap(boolean|Array)
+{{ /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*.
@@ -377,10 +459,10 @@ For non-category axis, including time, numerical value, and log axes, `boundaryG
**Example: **
```js
boundaryGap: ['20%', '20%']
-```
-
-#${prefix} min(number|string|Function) = null
-
+```
+
+#${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.
@@ -396,10 +478,10 @@ min: function (value) {
}
```
-`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
-
+`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.
@@ -415,25 +497,24 @@ max: function (value) {
}
```
-`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
-
+`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.
-This configuration item is unavailable when the [min](~${componentType}.min) and [max](~${componentType}.max) are set.
-
-#${prefix} splitNumber(number) = 5
-
+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.
-This is unavailable for category axis.
-
-#${prefix} minInterval(number) = 0
-
+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.
@@ -444,10 +525,10 @@ For example, it can be set to be `1` to make sure axis label is show as integer.
}
```
-It is available only for axis of [type](~${componentType}.type) 'value' or 'time'.
-
-#${prefix} maxInterval(number)
-
+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.
@@ -458,62 +539,61 @@ For example, in time axis ([type](~${componentType}.type) is 'time'), it can be
}
```
-It is available only for axis of [type](~${componentType}.type) 'value' or 'time'.
-
-#${prefix} interval(number)
-
+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.
-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
-Base of logarithm, which is valid only for numeric axes with [type](~${componentType}.type): 'log'.
-
-{{ use: partial-axis-common-axis-line(
- prefix=${prefix},
- componentType=${componentType}
-) }}
-
-{{ use: partial-axis-common-axis-tick(
- prefix=${prefix},
- componentType=${componentType}
-) }}
-
-{{ use: partial-axis-common-minor-tick(
- prefix=${prefix},
- componentType=${componentType}
-) }}
-
-{{ use: partial-axis-common-axis-label(
- prefix=${prefix},
- componentType=${componentType}
-) }}
-
+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
+
+Base of logarithm, which is valid only for numeric axes with [type](~${componentType}.type): 'log'.
+
+{{ use: partial-axis-common-axis-line(
+ prefix = ${prefix},
+ componentType = ${componentType}
+) }}
+
+{{ use: partial-axis-common-axis-tick(
+ prefix = ${prefix},
+ componentType = ${componentType}
+) }}
+
+{{ use: partial-axis-common-minor-tick(
+ prefix = ${prefix},
+ componentType = ${componentType}
+) }}
+
+{{ use: partial-axis-common-axis-label(
+ prefix = ${prefix},
+ componentType = ${componentType}
+) }}
+
{{ if: ${hasSplitLineAndArea} }}
-{{ use: partial-axis-common-split-line(
+{{ use: partial-axis-common-split-line(
prefix=${prefix},
componentType=${componentType}
-) }}
+) }}
-{{ use: partial-axis-common-minor-split-line(
+{{ use: partial-axis-common-minor-split-line(
prefix=${prefix},
componentType=${componentType}
-) }}
+) }}
-{{ use: partial-axis-common-split-area(
+{{ use: partial-axis-common-split-area(
prefix=${prefix},
componentType=${componentType}
-) }}
-
-{{ /if }}
-
-
-
-#${prefix} data(Array)
+) }}
+{{ /if }}
+
+#${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'`.
@@ -536,44 +616,38 @@ data: [{
color: 'red'
}
}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
-```
-
-##${prefix} value(string)
-
-Name of a category.
-
-##${prefix} textStyle(Object)
-
-Text style of the category.
-
-{{ use:partial-text-style(
- prefix='##' + ${prefix}
-) }}
-
-{{if: !${noAxisPointer} }}
-#${prefix} axisPointer(Object)
-
+```
+
+##${prefix} value(string)
+
+Name of a category.
+
+##${prefix} textStyle(Object)
+
+Text style of the category.
+
+{{ use: partial-text-style(
+ prefix = '##' + ${prefix}
+) }}
+
+{{ if: !${noAxisPointer} }}
+
+#${prefix} axisPointer(Object)
+
axisPointer settings on the axis.
-{{ use: partial-axisPointer-common(
+{{ use: partial-axisPointer-common(
prefix="#" + ${prefix},
galleryViewPath=${galleryViewPath},
galleryEditorPath=${galleryEditorPath}
-)}}
-{{/if}}
-
-
-
-
-
-
-
-
-
-
-
-
-{{ target: partial-axis-interval }}
+) }}
+{{ /if }}
+
+
+
+
+{{ target: partial-axis-interval }}
+
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.
@@ -586,11 +660,13 @@ On the other hand, you can control by callback function, whose format is shown b
```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}}
-
+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:
@@ -608,4 +684,5 @@ formatter: function (value, index) {
}
return texts.join('/');
}
-```
+```
+
diff --git a/en/option/component/axisPointer.md b/en/option/component/axisPointer.md
index c806109..3cfae77 100644
--- a/en/option/component/axisPointer.md
+++ b/en/option/component/axisPointer.md
@@ -1,5 +1,5 @@
-{{target: component-axisPointer}}
+{{ target: component-axisPointer }}
# axisPointer(Object)
@@ -8,21 +8,17 @@ This is the global configurations of axisPointer.
---
-{{ use: partial-axisPointer-introduction(
- galleryViewPath=${galleryViewPath},
- galleryEditorPath=${galleryEditorPath}
-) }}
+{{ use: partial-axisPointer-introduction() }}
---
-{{use: partial-component-id(prefix="#")}}
+{{ use: partial-component-id(
+ prefix = "#"
+) }}
{{ use: partial-axisPointer-common(
- prefix="#",
- galleryViewPath=${galleryViewPath},
- galleryEditorPath=${galleryEditorPath}
-)}}
-
+ prefix = "#"
+) }}
## link(Array)
@@ -100,7 +96,6 @@ Return of mapper:
`{number}` The result of conversion.
-
## triggerOn(string) = 'mousemove|click'
Conditions to trigger tooltip. Options:
@@ -120,3 +115,4 @@ Conditions to trigger tooltip. Options:
+ `'none'`
Do not triggered by `'mousemove'` and `'click'`
+
diff --git a/en/option/component/brush.md b/en/option/component/brush.md
index 93b6315..44954ad 100644
--- a/en/option/component/brush.md
+++ b/en/option/component/brush.md
@@ -1,5 +1,5 @@
-{{target: component-brush}}
+{{ target: component-brush }}
# brush(Object)
@@ -39,7 +39,7 @@ The following types of brushes are supported: `rect`, `polygon`, `lineX`, `lineY
**Relationship between brush-selecting and coordinates**
-{{use: partial-brush-coord}}
+{{ use: partial-brush-coord() }}
<br>
@@ -71,7 +71,7 @@ Please refer to [action.brush](api.html#action.brush) for more information.
**brushLink**
-{{use: partial-brush-brushLink (galleryViewPath=${galleryViewPath})}}
+{{ use: partial-brush-brushLink() }}
Please refer to [brush.brushLink](~brush.brushLink).
@@ -83,8 +83,7 @@ Please refer to [brush.brushLink](~brush.brushLink).
**throttle / debounce**
-{{use: partial-brush-throttle (galleryViewPath=${galleryViewPath})}}
-
+{{ use: partial-brush-throttle() }}
<br>
@@ -101,19 +100,19 @@ Refer to [brush.inBrush](~brush.inBrush) and [brush.outOfBrush](~brush.outOfBrus
Here is the configuration in detail.
-
-{{use: partial-component-id(prefix="#")}}
+{{ use: partial-component-id(
+ prefix = "#"
+) }}
## toolbox(Array) = ['rect', 'polygon', 'keep', 'clear']
Use the buttons in toolbox.
-{{use: partial-brush-toolbox-buttons}}
-
+{{ use: partial-brush-toolbox-buttons() }}
## brushLink(Array|string) = null
-{{use: partial-brush-brushLink (galleryViewPath=${galleryViewPath})}}
+{{ use: partial-brush-brushLink() }}
## seriesIndex(Array|number|string) = 'all'
@@ -127,27 +126,25 @@ Assigns which of the series can use brush selecting, whose value can be:
Assigns which of the geo can use brush selecting.
-{{use: partial-brush-coord}}
+{{ use: partial-brush-coord() }}
## xAxisIndex(Array|number|string) = null
Assigns which of the xAxisIndex can use brush selecting.
-{{use: partial-brush-coord}}
+{{ use: partial-brush-coord() }}
## yAxisIndex(Array|number|string) = null
Assigns which of the yAxisIndex can use brush selecting.
-{{use: partial-brush-coord}}
-
+{{ use: partial-brush-coord() }}
## brushType(string) = 'rect'
Default type of brush.
-{{use: partial-brush-type}}
-
+{{ use: partial-brush-type() }}
## brushMode(string) = 'single'
@@ -174,13 +171,13 @@ Default brush style, whose value is:
## throttleType(string) = 'fixRate'
-{{use: partial-brush-throttle (galleryViewPath=${galleryViewPath})}}
+{{ use: partial-brush-throttle() }}
## throttleDelay(number) = 0
`0` for disabling throttle.
-{{use: partial-brush-throttle (galleryViewPath=${galleryViewPath})}}
+{{ use: partial-brush-throttle() }}
## removeOnClick(boolean) = true
@@ -192,19 +189,17 @@ Defines visual effects of items in selection.
Available visual effects include:
-{{use: partial-visual-map-visual-type}}
+{{ use: partial-visual-map-visual-type() }}
In most cases, inBrush can be left unassigned, in which case default visual configuration remains.
-
-
## outOfBrush(Object)
Defines visual effects of items out of selection.
Available visual effects include:
-{{use: partial-visual-map-visual-type}}
+{{ use: partial-visual-map-visual-type() }}
**Note:** If `outOfBrush` is not assigned, `color` will be set to be `'#ddd'` by default. If the color is not desired, you can use:
@@ -224,24 +219,7 @@ z-index of brush cover box. It can be adjust when incorrect overlap occurs.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{{target: partial-brush-coord}}
+{{ target: partial-brush-coord }}
`brush` can be set to be *global*, or *belonging to a particular coordinate*.
@@ -297,7 +275,10 @@ option = {
};
```
-{{target: partial-brush-brushLink}}
+
+
+
+{{ target: partial-brush-brushLink }}
Links interaction between selected items in different series.
@@ -333,7 +314,9 @@ option = {
```
-{{target: partial-brush-throttle}}
+
+
+{{ target: partial-brush-throttle }}
By default, `brushSelected` is always triggered when selection-box is selected or moved, to tell the outside about the event.
@@ -349,7 +332,7 @@ In this [example](${galleryViewPath}scatter-map-brush&edit=1&reset=1), `debounce
-{{target: partial-brush-toolbox-buttons}}
+{{ target: partial-brush-toolbox-buttons }}
Buttons in toolbox that is related to brush includes:
@@ -361,7 +344,9 @@ Buttons in toolbox that is related to brush includes:
+ `'clear'`: for clearing all selections.
-{{target: partial-brush-type}}
+
+
+{{ target: partial-brush-type }}
+ `'rect'`: for selection-box in rectangle shape;
+ `'polygon'`: for selection-box in polygon shape;
diff --git a/en/option/component/calendar.md b/en/option/component/calendar.md
index 6b90c17..35fc50b 100644
--- a/en/option/component/calendar.md
+++ b/en/option/component/calendar.md
@@ -1,3 +1,4 @@
+
{{ target: component-calendar }}
# calendar(Object)
@@ -38,15 +39,18 @@ Calendar coordinate system can be configured to adapt to container size, which i
---
-{{use: partial-component-id(prefix="#")}}
+{{ use: partial-component-id(
+ prefix = "#"
+) }}
{{ use: partial-rect-layout-width-height(
- componentName="calendar",
- defaultLeft="80",
- defaultTop="60"
+ componentName = "calendar",
+ defaultLeft = "80",
+ defaultTop = "60"
) }}
## range(number|string|Array)
+
Required, range of Calendar coordinates, support multiple formats.
Examples:
@@ -66,7 +70,6 @@ range: ['2017-01', '2017-02']
```
-
## cellSize(number|Array) = 20
The size of each rect of calendar coordinates, can be set to a single value or array, the first element is width and the second element is height.
@@ -95,18 +98,19 @@ cellSize: ['auto', 40]
```
## width(number|string) = auto
+
The height of calendar coordinates.
Note: `cellSize` is 20 by default. If `width` is set,
`cellSize[0]` will be forced to `auto`;
## height(number|string) = auto
+
The height of calendar coordinates.
Note: `cellSize` is 20 by default. If `height` is set,
`cellSize[1]` will be forced to `auto`;
-
## orient(string) = 'horizontal'
The layout orientation of calendar.
@@ -115,8 +119,8 @@ Options:
+ 'horizontal'
+ 'vertical'
-
## splitLine(Object)
+
Calendar coordinates splitLine style.
### show(boolean) = ${defaultShow|default(true)}
@@ -126,14 +130,13 @@ Set this to `false` to prevent the splitLine from showing
### lineStyle(Object)
{{ use: partial-line-style(
- prefix='###',
- defaultColor="#000",
- defaultWidth=1,
- defaultType="solid",
- name="splitLine"
+ prefix = '###',
+ defaultColor = "#000",
+ defaultWidth = 1,
+ defaultType = "solid",
+ name = "splitLine"
) }}
-
Examples:
```js
calendar: [{
@@ -149,17 +152,17 @@ calendar: [{
```
## itemStyle(Object)
+
Every rect style in calendar coordinates.
-{{ use:partial-item-style(
- prefix="##",
- name="calendar",
- defaultColor="#fff",
- defaultBorderWidth=1,
- defaultBorderColor="'#ccc'"
+{{ use: partial-item-style(
+ prefix = "##",
+ name = "calendar",
+ defaultColor = "#fff",
+ defaultBorderWidth = 1,
+ defaultBorderColor = "'#ccc'"
) }}
-
Examples:
```js
calendar: [{
@@ -172,6 +175,7 @@ calendar: [{
```
## dayLabel(Object)
+
Day style in calendar coordinates.
### show(boolean) = true
@@ -179,6 +183,7 @@ Day style in calendar coordinates.
Set this to `false` to prevent dayLabel from showing.
### firstDay(number) = 0
+
A week from the beginning of the week, the default starting on Sunday.
Examples:
@@ -194,9 +199,11 @@ calendar: [{
```
### margin(number) = 0
+
The margin between the day label and the axis line.
### position(string) = 'start'
+
Position of week, at the beginning or end of the range.
Options:
@@ -204,6 +211,7 @@ Options:
+ 'end'
### nameMap(string|Array) = 'en'
+
Week text content, defaults to 'en';
It supports Chinese, English, and custom;
index 0 always means Sunday;
@@ -227,10 +235,13 @@ calendar: [{
}]
```
-{{ use: partial-text-style(prefix='##', defaultColor="#000",) }}
-
+{{ use: partial-text-style(
+ prefix = '##',
+ defaultColor = "#000"
+) }}
## monthLabel(Object)
+
Month label in calendar coordinates.
### show(boolean) = true
@@ -238,6 +249,7 @@ Month label in calendar coordinates.
Set this to `false` to prevent monthLabel from showing.
### align(string) = 'center'
+
Set the month text location in the month interval.
Options:
@@ -245,9 +257,11 @@ Options:
+ 'left'
### margin(number) = 5
+
The margin between the month label and the axis line.
### position(string) = 'start'
+
Position of week, at the beginning or end of the range.
Options:
@@ -255,6 +269,7 @@ Options:
+ 'end'
### nameMap(string|Array) = 'en'
+
Month text content, defaults to 'en';
It supports Chinese, English, and custom;
Index 0 always means Jan;
@@ -295,6 +310,7 @@ calendar: [{
```
### formatter(string|Function) = null
+
Formatter of month text label, which supports string template and callback function.
@@ -326,10 +342,13 @@ formatter: function (param) {
}
```
-{{ use: partial-text-style(prefix='##', defaultColor="#000") }}
-
+{{ use: partial-text-style(
+ prefix = '##',
+ defaultColor = "#000"
+) }}
## yearLabel(Object)
+
Year label in calendar coordinates.
### show(boolean) = true
@@ -337,9 +356,11 @@ Year label in calendar coordinates.
Set this to `false` to stop yearLabel from showing
### margin(number) = 30
+
The margin between the month label and the axis line.
### position(string)
+
Position of year.
Default:
@@ -353,6 +374,7 @@ Options:
+ 'right'
### formatter(string|Function) = null
+
Formatter of year text label, which supports string template and callback function.
By default, the current range of the year, if the interval across the year, showing the first year and the last year
@@ -382,11 +404,13 @@ formatter: function (param) {
}
```
-{{ use: partial-text-style(prefix='##') }}
-
+{{ use: partial-text-style(
+ prefix = '##'
+) }}
-{{ use:partial-silent(
- prefix="#",
- defaultFontWeight="bolder",
- defaultFontSize="20"
+{{ use: partial-silent(
+ prefix = "#",
+ defaultFontWeight = "bolder",
+ defaultFontSize = "20"
) }}
+
diff --git a/en/option/component/data-transform-external.md b/en/option/component/data-transform-external.md
index 6b7f1d9..b227a10 100644
--- a/en/option/component/data-transform-external.md
+++ b/en/option/component/data-transform-external.md
@@ -1,10 +1,11 @@
+
{{ target: component-data-transform-external }}
## transform.xxx:xxx(Object)
Besides built-in transforms (like 'filter', 'sort'), we can also use external transforms to provide more powerful functionalities.
-{{ use: partial-data-transform-tutorial-ref }}
+{{ use: partial-data-transform-tutorial-ref() }}
### type(string) = 'xxx:xxx'
@@ -12,9 +13,9 @@ Built-in transform has no namespace (like `type: 'filter'`, `type: 'sort'`).
External transform has namespace (like `type: 'ecStat:regression'`).
-### config
+### config(*)
The needed parameters of this data transform. Each type of transform has its own definition of `config`.
+{{ use: partial-data-transform-print() }}
-{{ use: partial-data-transform-print }}
diff --git a/en/option/component/data-transform-filter.md b/en/option/component/data-transform-filter.md
index 698da5d..9a6568b 100644
--- a/en/option/component/data-transform-filter.md
+++ b/en/option/component/data-transform-filter.md
@@ -1,14 +1,15 @@
+
{{ target: component-data-transform-filter }}
## transform.filter(Object)
### type(string) = 'filter'
-### config
+### config(*)
The condition of transform "filter".
-{{ use: partial-data-transform-tutorial-ref }}
+{{ use: partial-data-transform-tutorial-ref() }}
+{{ use: partial-data-transform-print() }}
-{{ use: partial-data-transform-print }}
diff --git a/en/option/component/data-transform-sort.md b/en/option/component/data-transform-sort.md
index a8d3007..40570d1 100644
--- a/en/option/component/data-transform-sort.md
+++ b/en/option/component/data-transform-sort.md
@@ -1,14 +1,15 @@
+
{{ target: component-data-transform-sort }}
## transform.sort(Object)
### type(string) = 'sort'
-### config
+### config(*)
The condition of transform "sort".
-{{ use: partial-data-transform-tutorial-ref }}
+{{ use: partial-data-transform-tutorial-ref() }}
+{{ use: partial-data-transform-print() }}
-{{ use: partial-data-transform-print }}
diff --git a/en/option/component/data-zoom-inside.md b/en/option/component/data-zoom-inside.md
index f62aab2..9116fc7 100644
--- a/en/option/component/data-zoom-inside.md
+++ b/en/option/component/data-zoom-inside.md
@@ -1,7 +1,8 @@
-{{target: component-data-zoom-inside}}
-
-# dataZoom.inside(Object)
-
+
+{{ target: component-data-zoom-inside }}
+
+# dataZoom.inside(Object)
+
**dataZoomInside**
Data zoom component of *inside* type.
@@ -16,54 +17,53 @@ The *inside* means it's inside the coordinates.
+ Mobile: when touches and moved with two fingers in coordinates on touch screens.
<br>
-<br>
-
-
-## type(string) = 'inside'
-
-{{use: partial-component-id(prefix="#")}}
-
-## disabled(boolean) = false
-
-Whether disable inside zoom.
-
-{{ use: partial-data-zoom-common(
- dataZoomName='dataZoom-inside',
- galleryEditorPath=${galleryEditorPath},
- galleryViewPath=${galleryViewPath}
-) }}
-
-
-## zoomOnMouseWheel(boolean|string) = true
-
+<br>
+
+## type(string) = 'inside'
+
+{{ use: partial-component-id(
+ prefix = "#"
+) }}
+
+## disabled(boolean) = false
+
+Whether disable inside zoom.
+
+{{ use: partial-data-zoom-common(
+ dataZoomName = 'dataZoom-inside'
+) }}
+
+## 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.
-+ `'alt'`：Holding `alt` and mouse wheel triggers zoom.
-
-## moveOnMouseMove(boolean|string) = true
-
++ `'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.
-+ `'alt'`：Holding `alt` and mouse move triggers data window move.
-
-## moveOnMouseWheel(boolean|string) = false
-
++ `'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.
-+ `'alt'`：Holding `alt` and mouse wheel triggers data window move.
-
-## preventDefaultMouseMove(boolean) = true
-
-Whether to prevent default behavior of mouse move event.
\ No newline at end of file
++ `'alt'`：Holding `alt` and mouse wheel triggers data window move.
+
+## preventDefaultMouseMove(boolean) = true
+
+Whether to prevent default behavior of mouse move event.
+
diff --git a/en/option/component/data-zoom-slider.md b/en/option/component/data-zoom-slider.md
index c045527..e1513a7 100644
--- a/en/option/component/data-zoom-slider.md
+++ b/en/option/component/data-zoom-slider.md
@@ -1,94 +1,93 @@
-{{target: component-data-zoom-slider}}
-
-# dataZoom.slider(Object)
-
+
+{{ target: component-data-zoom-slider }}
+
+# dataZoom.slider(Object)
+
**dataZoomSlider**
(Please refer to the [introduction of dataZoom](~dataZoom).)
<br>
-<br>
-
-
-## type(string) = 'slider'
-
-{{use: partial-component-id(prefix="#")}}
-
-## show(boolean) = true
-
-Whether to show the ${dataZoomName} component. If is set to be `false`, it will not show, but its data filtering function still works.
-
-
-## backgroundColor(Color) = 'rgba(47,69,84,0)'
-
-The background color of the component.
-
-## dataBackground(Object)
-
-The style of data shadow.
-
-### lineStyle(Object)
-
-Line style of shadow
-
-{{use:partial-line-style(
- prefix="###",
- defaultWidth=0.5,
- defaultOpacity=0.3,
- defaultColor='#2f4554'
-)}}
-
-### areaStyle(Object)
-
-Area style of shadow
-
-{{use:partial-area-style(
- prefix="###",
- defaultOpacity=0.3,
- defaultColor='rgba(47,69,84,0.3)'
-)}}
-
-## fillerColor(Color) = 'rgba(47,69,84,0.25)'
-
-The color to fill selected area.
-
-## borderColor(Color) = '#ddd'
-
-The color of border.
-
-## handleIcon(string)
-
+<br>
+
+## type(string) = 'slider'
+
+{{ use: partial-component-id(
+ prefix = "#"
+) }}
+
+## show(boolean) = true
+
+Whether to show the ${dataZoomName} component. If is set to be `false`, it will not show, but its data filtering function still works.
+
+## backgroundColor(Color) = 'rgba(47,69,84,0)'
+
+The background color of the component.
+
+## dataBackground(Object)
+
+The style of data shadow.
+
+### lineStyle(Object)
+
+Line style of shadow
+
+{{ use: partial-line-style(
+ prefix = "###",
+ defaultWidth = 0.5,
+ defaultOpacity = 0.3,
+ defaultColor = '#2f4554'
+) }}
+
+### areaStyle(Object)
+
+Area style of shadow
+
+{{ use: partial-area-style(
+ prefix = "###",
+ defaultOpacity = 0.3,
+ defaultColor = 'rgba(47,69,84,0.3)'
+) }}
+
+## fillerColor(Color) = 'rgba(47,69,84,0.25)'
+
+The color to fill selected area.
+
+## borderColor(Color) = '#ddd'
+
+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'
-```
-
-{{ use: partial-icon-image-path }}
-
-Refer to [area-simple example](${galleryEditorPath}area-simple) for customized icon.
-
-
-## handleSize(number|string) = '100%'
-
-The size of control handle. It can be in pixels, or in percentage relative to the width of dataZoom component. By default, it's the same as the width of dataZoom component.
-
-## handleStyle(Object)
-
-Style of handle. Please refer to [area-simple example](${galleryEditorPath}area-simple).
-
-{{use: partial-item-style(
- prefix="##",
- defaultColor="#a7b7cc"
-)}}
-
-## labelPrecision(number|string) = 'auto'
-
-Precision of label if in number form. By default, it is decided based on the number of data.
-
-
-## labelFormatter(string|Function) = null
-
+```
+
+{{ use: partial-icon-image-path() }}
+
+Refer to [area-simple example](${galleryEditorPath}area-simple) for customized icon.
+
+## handleSize(number|string) = '100%'
+
+The size of control handle. It can be in pixels, or in percentage relative to the width of dataZoom component. By default, it's the same as the width of dataZoom component.
+
+## handleStyle(Object)
+
+Style of handle. Please refer to [area-simple example](${galleryEditorPath}area-simple).
+
+{{ use: partial-item-style(
+ prefix = "##",
+ defaultColor = "#a7b7cc"
+) }}
+
+## labelPrecision(number|string) = 'auto'
+
+Precision of label if in number form. By default, it is decided based on the number of data.
+
+## 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.
@@ -105,41 +104,33 @@ The formatter tool for the label.
labelFormatter: function (value, valueStr) {
return 'aaa' + value + 'bbb';
}
-```
-
-
-## showDetail(boolean) = true
-
-Whether to show detail, that is, show the detailed data information when dragging.
-
-
-## showDataShadow(string) = 'auto'
-
-Whether to show data shadow in `dataZoom-silder` component, to indicate the data tendency in brief.
-
-## realtime(boolean) = true
-
-Whether to update view while dragging. If it is set as `false`, the view will be updated only at the end of dragging.
-
-
-## textStyle
-
-{{ use:partial-simple-text-style(
- prefix='##',
- name='dataZoom ',
- defaultColor='#333'
-) }}
-
-
-
-
-
-{{ use: partial-data-zoom-common(
- dataZoomName='dataZoom-slider',
- galleryEditorPath=${galleryEditorPath},
- galleryViewPath=${galleryViewPath}
-) }}
-
-{{ use: partial-rect-layout(
- componentName='dataZoom-slider'
-) }}
+```
+
+## showDetail(boolean) = true
+
+Whether to show detail, that is, show the detailed data information when dragging.
+
+## showDataShadow(string) = 'auto'
+
+Whether to show data shadow in `dataZoom-silder` component, to indicate the data tendency in brief.
+
+## realtime(boolean) = true
+
+Whether to update view while dragging. If it is set as `false`, the view will be updated only at the end of dragging.
+
+## textStyle(*)
+
+{{ use: partial-simple-text-style(
+ prefix = '##',
+ name = 'dataZoom ',
+ defaultColor = '#333'
+) }}
+
+{{ use: partial-data-zoom-common(
+ dataZoomName = 'dataZoom-slider'
+) }}
+
+{{ use: partial-rect-layout(
+ componentName = 'dataZoom-slider'
+) }}
+
diff --git a/en/option/component/data-zoom.md b/en/option/component/data-zoom.md
index ffaa06a..f3ee924 100644
--- a/en/option/component/data-zoom.md
+++ b/en/option/component/data-zoom.md
@@ -1,8 +1,8 @@
-{{target: component-data-zoom}}
-
-# dataZoom(Array|Object)
-
-
+
+{{ target: component-data-zoom }}
+
+# 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:
@@ -35,10 +35,10 @@ A single chart instance can contain several `dataZoom` components, each of which
---
-**✦ How dataZoom componets operates axes and data ✦**
-
-{{use: partial-data-zoom-filterMode}}
-
+**✦ 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>
@@ -121,19 +121,17 @@ What is the exact meaning of `start: 20, end: 80` in `dataZoomY` in the example
If you want to change the process sequence, you can just change the sequence of the definitions apearing in `option`.
<br>
-<br>
-
-
-
-{{import: component-data-zoom-inside}}
-{{import: component-data-zoom-slider}}
-
-
-
-
-
-
-{{target: partial-data-zoom-axis-example}}
+<br>
+
+{{ use: component-data-zoom-inside() }}
+
+{{ use: component-data-zoom-slider() }}
+
+
+
+
+{{ 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:
@@ -157,157 +155,144 @@ option: {
}
]
}
-```
-
-
-
-
-{{target: partial-data-zoom-common}}
-
-
-
-## xAxisIndex(number|Array) = null
-
+```
+
+
+
+
+{{ target: partial-data-zoom-common }}
+
+## xAxisIndex(number|Array) = null
+
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(
- axisName='xAxis'
-)}}
-
-
-## yAxisIndex(number|Array) = null
-
+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(
+ axisName = 'xAxis'
+) }}
+
+## yAxisIndex(number|Array) = null
+
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(
- axisName='yAxis'
-)}}
-
-
-## radiusAxisIndex(number|Array) = null
-
-Specify which [radiusAxis](~radiusAxis) is/are controlled by the `${dataZoomName}` when [polar coordinate system](~polar) is used.
-
-{{use: partial-data-zoom-axis-example(
- axisName='radiusAxis'
-)}}
-
-
-## angleAxisIndex(number|Array) = null
-
-Specify which [angleAxis](~angleAxis) is/are controlled by the `${dataZoomName}` when [polar coordinate system](~polar) is used.
-
-{{use: partial-data-zoom-axis-example(
- axisName='angleAxis'
-)}}
-
-
-## filterMode(string) = 'filter'
-
-{{use: partial-data-zoom-filterMode}}
-
-
-## start(number) = 0
-
+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(
+ axisName = 'yAxis'
+) }}
+
+## radiusAxisIndex(number|Array) = null
+
+Specify which [radiusAxis](~radiusAxis) is/are controlled by the `${dataZoomName}` when [polar coordinate system](~polar) is used.
+
+{{ use: partial-data-zoom-axis-example(
+ axisName = 'radiusAxis'
+) }}
+
+## angleAxisIndex(number|Array) = null
+
+Specify which [angleAxis](~angleAxis) is/are controlled by the `${dataZoomName}` when [polar coordinate system](~polar) is used.
+
+{{ use: partial-data-zoom-axis-example(
+ axisName = 'angleAxis'
+) }}
+
+## filterMode(string) = 'filter'
+
+{{ use: partial-data-zoom-filterMode() }}
+
+## 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.
-More info about the relationship between `${dataZoomName}.start` and axis extent can be checked in [${dataZoomName}.rangeMode](~${dataZoomName}.rangeMode).
-
-
-## end(number) = 100
-
+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.
-More info about the relationship between `${dataZoomName}.end` and axis extent can be checked in [${dataZoomName}.rangeMode](~${dataZoomName}.rangeMode).
-
-
-## startValue(number|string|Date) = null
-
+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.
-More info about the relationship between `${dataZoomName}.startValue` and axis extent can be checked in [${dataZoomName}.rangeMode](~${dataZoomName}.rangeMode).
-
-
-## endValue(number|string|Date) = null
-
+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.
-More info about the relationship between `${dataZoomName}.endValue` and axis extent can be checked in [${dataZoomName}.rangeMode](~${dataZoomName}.rangeMode).
-
-
-## minSpan(number) = null
-
+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].
-If [${dataZoomName}.minValueSpan](~${dataZoomName}.minValueSpan) is set, `minSpan` does not work any more.
-
-## maxSpan(number) = null
-
+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].
-If [${dataZoomName}.maxValueSpan](~${dataZoomName}.maxValueSpan) is set, `maxSpan` does not work any more.
-
-## minValueSpan(number|string|Date) = null
-
+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".
-In category axis it can be set as `5` to represent 5 categories.
-
-## maxValueSpan(number|string|Date) = null
-
+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".
-In category axis it can be set as `5` to represent 5 categories.
-
-## orient(string) = null
-
+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.
-+ `'vertical'`: vertical.
-
-
-## zoomLock(boolean) = false
-
++ `'vertical'`: vertical.
+
+## zoomLock(boolean) = false
+
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
-
+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.
-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)
-
+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`.
@@ -321,11 +306,13 @@ Optional value for each item: `'value'`, `'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}}
-
+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)).
@@ -413,4 +400,5 @@ Then let's review the sample from the beginning, `dataZoomY` is set as `filterMo
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)
+~[600x400](${galleryViewPath}doc-example/bar-dataZoom-filterMode&edit=1&reset=1)
+
diff --git a/en/option/component/dataset.md b/en/option/component/dataset.md
index 6729866..3b5d756 100644
--- a/en/option/component/dataset.md
+++ b/en/option/component/dataset.md
@@ -1,5 +1,5 @@
-{{target: component-dataset}}
+{{ target: component-dataset }}
# dataset(Object)
@@ -7,8 +7,9 @@
More details about `dataset` can be checked in the [tutorial](tutorial.html#Dataset).
-
-{{use: partial-component-id(prefix="#")}}
+{{ use: partial-component-id(
+ prefix = "#"
+) }}
## source(Array|Object)
@@ -49,10 +50,9 @@ Column based key-value format, where each value represents a column of a table.
More details about `dataset` can be checked in the [tutorial](tutorial.html#dataset).
-
-{{use:partial-series-dimensions(
- prefix="#"
-)}}
+{{ use: partial-series-dimensions(
+ prefix = "#"
+) }}
## sourceHeader(boolean)
@@ -64,27 +64,28 @@ Whether the first row/column of `dataset.source` represents [dimension names](da
Note: "the first row/column" means that if [series.seriesLayoutBy](~series.seriesLayoutBy) is set as `'column'`, pick the first row, otherwise, if it is set as `'row'`, pick the first column.
-
## transform(Object)
-{{ use: partial-data-transform-tutorial-ref }}
+{{ use: partial-data-transform-tutorial-ref() }}
-{{ import: component-data-transform-filter }}
-{{ import: component-data-transform-sort }}
-{{ import: component-data-transform-external }}
+{{ use: component-data-transform-filter() }}
+
+{{ use: component-data-transform-sort() }}
+
+{{ use: component-data-transform-external() }}
## fromDatasetIndex(number)
Specify the input dataset for [dataset.transform](~dataset.transform).
If [dataset.transform](~dataset.transform) specified but both `fromDatasetIndex` and `fromDatasetId` are not specified, `fromDatasetIndex: 0` will be used by default.
-{{ use: partial-data-transform-tutorial-ref }}
+{{ use: partial-data-transform-tutorial-ref() }}
## fromDatasetId(string)
Specify the input dataset for [dataset.transform](~dataset.transform).
-{{ use: partial-data-transform-tutorial-ref }}
+{{ use: partial-data-transform-tutorial-ref() }}
## fromTransformResult(number)
@@ -92,4 +93,5 @@ If a [dataset.transform](~dataset.transform) produces more than one result, we c
In most cases, `fromTransformResult` do not need to be specified because most transforms only produce one result. If `fromTransformResult` is not specified, we use `fromTransformResult: 0` by default.
-{{ use: partial-data-transform-tutorial-ref }}
+{{ use: partial-data-transform-tutorial-ref() }}
+
diff --git a/en/option/component/geo-common.md b/en/option/component/geo-common.md
index d1e82a1..ac1cc61 100644
--- a/en/option/component/geo-common.md
+++ b/en/option/component/geo-common.md
@@ -1,7 +1,8 @@
-{{ target: geo-common }}
-
-#${prefix} map(string) = ''
-
+
+{{ target: geo-common }}
+
+#${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.
@@ -42,26 +43,29 @@ $.get('map/json/china.json', function (chinaJson) {
});
```
-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
-{{ use: partial-roam }}
-
-#${prefix} center(Array)
+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
+
+{{ use: partial-roam() }}
+
+#${prefix} center(Array)
+
Center of current view-port, in longitude and latitude.
Example:
```js
center: [115.97, 29.71]
-```
-
-#${prefix} aspectScale(number) = 0.75
-
+```
+
+#${prefix} aspectScale(number) = 0.75
+
Used to scale aspect of geo.
-The final aspect is calculated by: `geoBoundingRect.width / geoBoundingRect.height * aspectScale`.
-
-#${prefix} boundingCoords(Array) = null
+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
@@ -74,27 +78,33 @@ boundingCoords: [
// [lng, lat] of right-bottom corner
[180, -90]
],
-```
-
-#${prefix} zoom(number) = 1
-Zoom rate of current view-port.
-
-#${prefix} scaleLimit(Object)
-{{ use: partial-scale-limit(prefix="#" + ${prefix}) }}
-
-#${prefix} nameMap(Object)
-
+```
+
+#${prefix} zoom(number) = 1
+
+Zoom rate of current view-port.
+
+#${prefix} scaleLimit(Object)
+
+{{ use: partial-scale-limit(
+ prefix = "#" + ${prefix}
+) }}
+
+#${prefix} nameMap(Object)
+
Name mapping for customized areas. For example:
```js
{
'China' : '中国'
}
-```
-
-#${prefix} nameProperty(string) = 'name'
-
-{{ use: partial-version(version="4.8.0") }}
-
+```
+
+#${prefix} nameProperty(string) = 'name'
+
+{{ use: partial-version(
+ 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
@@ -105,60 +115,66 @@ For example:
{name: 'Alaska', value: 731449},
]
}
-```
-
-
-
-#${prefix} selectedMode(boolean|string) = false
-Selected mode decides whether multiple selecting is supported. By default, `false` is used for disabling selection. Its value can also be `'single'` for selecting single area, or `'multiple'` for selecting multiple areas.
-
-
-
-#${prefix} label(Object)
-{{use: partial-label-desc}}
-{{use: partial-label(
- prefix="#" + ${prefix},
- formatter=true
-)}}
-
-
-
-#${prefix} itemStyle(Object)
-
-{{ use: partial-item-style-desc(name='Map Area Border') }}
-
-
-##${prefix} areaColor(Color) = '#eee'
-Area filling color.
-
-{{ use: partial-color-desc }}
-
-{{ use: partial-item-style(prefix=${prefix} + '#') }}
-
-#${prefix} emphasis(Object)
-
-Map area style in highlighted state.
-
-##${prefix} itemStyle(Object)
-
-###${prefix} areaColor(Color) = '#eee'
-Area filling color.
-
-{{ use: partial-color-desc }}
-
-{{ use: partial-item-style(prefix=${prefix} + '##') }}
-
-##${prefix} label(Object)
-{{use: partial-label(
- prefix="##" + ${prefix},
- formatter=true
-)}}
-
-{{ use: partial-rect-layout(prefix=${prefix}) }}
-
-
-#${prefix} layoutCenter(Array) = null
-
+```
+
+#${prefix} selectedMode(boolean|string) = false
+
+Selected mode decides whether multiple selecting is supported. By default, `false` is used for disabling selection. Its value can also be `'single'` for selecting single area, or `'multiple'` for selecting multiple areas.
+
+#${prefix} label(Object)
+
+{{ use: partial-label-desc() }}
+
+{{ use: partial-label(
+ prefix = "#" + ${prefix},
+ formatter = true
+) }}
+
+#${prefix} itemStyle(Object)
+
+{{ use: partial-item-style-desc(
+ name = 'Map Area Border'
+) }}
+
+##${prefix} areaColor(Color) = '#eee'
+
+Area filling color.
+
+{{ use: partial-color-desc() }}
+
+{{ use: partial-item-style(
+ prefix = ${prefix} + '#'
+) }}
+
+#${prefix} emphasis(Object)
+
+Map area style in highlighted state.
+
+##${prefix} itemStyle(Object)
+
+###${prefix} areaColor(Color) = '#eee'
+
+Area filling color.
+
+{{ use: partial-color-desc() }}
+
+{{ use: partial-item-style(
+ prefix = ${prefix} + '##'
+) }}
+
+##${prefix} label(Object)
+
+{{ use: partial-label(
+ prefix = "##" + ${prefix},
+ formatter = true
+) }}
+
+{{ use: partial-rect-layout(
+ prefix = ${prefix}
+) }}
+
+#${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:
@@ -171,9 +187,9 @@ layoutCenter: ['30%', '30%'],
layoutSize: 100
```
-After setting these two values, `left/right/top/bottom/width/height` becomes invalid.
-
-#${prefix} layoutSize(number|string)
-
-Size of map, see `layoutCenter` for more information. Percentage relative to screen width, and absolute pixel values are supported.
-
+After setting these two values, `left/right/top/bottom/width/height` becomes invalid.
+
+#${prefix} layoutSize(number|string)
+
+Size of map, see `layoutCenter` for more information. Percentage relative to screen width, and absolute pixel values are supported.
+
diff --git a/en/option/component/geo.md b/en/option/component/geo.md
index cbe8ead..59393e7 100644
--- a/en/option/component/geo.md
+++ b/en/option/component/geo.md
@@ -1,7 +1,8 @@
-{{ target: component-geo }}
-
-# geo(Object)
-
+
+{{ target: component-geo }}
+
+# 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).
@@ -22,21 +23,22 @@ From `3.1.10`, geo component also supports mouse events, whose parameters are:
```
**Tip:**
-The region color can also be controlled by map series. See [series-map.geoIndex](~series-map.geoIndex).
-
-{{use: partial-component-id(prefix="#")}}
-
-## show(boolean) = true
-
-Whether to show the geo component.
-
-{{ use: geo-common(
- prefix='#',
- galleryEditorPath=${galleryEditorPath},
- galleryViewPath=${galleryViewPath}
-) }}
-
-## regions(Array)
+The region color can also be controlled by map series. See [series-map.geoIndex](~series-map.geoIndex).
+
+{{ use: partial-component-id(
+ prefix = "#"
+) }}
+
+## show(boolean) = true
+
+Whether to show the geo component.
+
+{{ use: geo-common(
+ prefix = '#'
+) }}
+
+## regions(Array)
+
Configure style for specified regions.
For example:
```js
@@ -49,45 +51,59 @@ regions: [{
}]
```
-The region color can also be controlled by map series. See [series-map.geoIndex](~series-map.geoIndex).
-
-
-### name(string)
-Name of area in map, like `'Guangdong'`, or `'Zhejiang'`.
-
-### selected(boolean) = false
-Whether this area is selected.
-
-### itemStyle(Object)
-Item style of this area.
-#### areaColor(Color)
-Area color in the map.
-{{ use: partial-color-desc }}
-
-{{ use: partial-item-style(prefix='###') }}
-
-#### emphasis(Object)
-##### areaColor(Color)
-Area color in the map.
-{{ use: partial-color-desc }}
-
-{{ use: partial-item-style(prefix='####') }}
-
-
-### label(Object)
-{{use: partial-label-desc}}
-{{use: partial-label(
- prefix="###",
- formatter=true
-)}}
-#### emphasis(Object)
-{{use: partial-label(
- prefix="####",
- formatter=true
-)}}
-
-
-
-{{ use:partial-silent(
- prefix="#"
-) }}
+The region color can also be controlled by map series. See [series-map.geoIndex](~series-map.geoIndex).
+
+### name(string)
+
+Name of area in map, like `'Guangdong'`, or `'Zhejiang'`.
+
+### selected(boolean) = false
+
+Whether this area is selected.
+
+### itemStyle(Object)
+
+Item style of this area.
+
+#### areaColor(Color)
+
+Area color in the map.
+
+{{ use: partial-color-desc() }}
+
+{{ use: partial-item-style(
+ prefix = '###'
+) }}
+
+#### emphasis(Object)
+
+##### areaColor(Color)
+
+Area color in the map.
+
+{{ use: partial-color-desc() }}
+
+{{ use: partial-item-style(
+ prefix = '####'
+) }}
+
+### label(Object)
+
+{{ use: partial-label-desc() }}
+
+{{ use: partial-label(
+ prefix = "###",
+ formatter = true
+) }}
+
+#### emphasis(Object)
+
+{{ use: partial-label(
+ prefix = "####",
+ formatter = true
+) }}
+
+{{ use: partial-silent(
+ prefix = "#"
+) }}
+
diff --git a/en/option/component/graphic.md b/en/option/component/graphic.md
index bafd8ad..e68dcd9 100644
--- a/en/option/component/graphic.md
+++ b/en/option/component/graphic.md
@@ -1,21 +1,20 @@
-{{target: component-graphic}}
+{{ target: component-graphic }}
-# graphic
+# graphic(*)
`graphic` component enables creating graphic elements in ECharts.
Those graphic type are supported.
{{ use: partial-graphic-cpt-type-list(
- optionPath='graphic',
- hostName='elements',
- symbolVisit='-',
- symbolDeclare='.',
- usageType='graphicComponent'
+ optionPath = 'graphic',
+ hostName = 'elements',
+ symbolVisit = '-',
+ symbolDeclare = '.',
+ usageType = 'graphicComponent'
) }}
-
This example shows how to make a watermark and text block:
~[600x400](${galleryViewPath}line-graphic&edit=1&reset=1)
@@ -353,8 +352,9 @@ For example:
Note, [bounding](graphic.elements.bounding) can be used to specify whether the entire transformed element (containing children if is group) is confined in its container.
-
-{{use: partial-component-id(prefix="#")}}
+{{ use: partial-component-id(
+ prefix = "#"
+) }}
## elements(Array)
@@ -390,12 +390,12 @@ Or:
}
```
+{{ use: partial-zr-graphic-elements(
+ prefix = '#',
+ optionPath = 'graphic',
+ hostName = 'elements',
+ symbolVisit = '-',
+ symbolDeclare = '.',
+ usageType = 'graphicComponent'
+) }}
-{{use: partial-zr-graphic-elements(
- prefix='#',
- optionPath='graphic',
- hostName='elements',
- symbolVisit='-',
- symbolDeclare='.',
- usageType='graphicComponent'
-)}}
diff --git a/en/option/component/grid.md b/en/option/component/grid.md
index 2a68ea8..cd05f31 100644
--- a/en/option/component/grid.md
+++ b/en/option/component/grid.md
@@ -1,32 +1,34 @@
-
-{{target: component-grid}}
-
-# grid(Object)
-
+
+{{ target: component-grid }}
+
+# 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:**
-~[600x400](${galleryViewPath}scatter-anscombe-quartet&edit=1&reset=1)
-
-{{use: partial-component-id(prefix="#")}}
-
-## show(boolean) = false
-
-Whether to show the grid in rectangular coordinate.
-
-{{ use: partial-rect-layout-width-height(
- componentName="grid ",
- defaultLeft="'10%'",
- defaultTop=60,
- defaultRight="'10%'",
- defaultBottom=60
-) }}
-
-## containLabel(boolean) = false
-
+~[600x400](${galleryViewPath}scatter-anscombe-quartet&edit=1&reset=1)
+
+{{ use: partial-component-id(
+ prefix = "#"
+) }}
+
+## show(boolean) = false
+
+Whether to show the grid in rectangular coordinate.
+
+{{ use: partial-rect-layout-width-height(
+ componentName = "grid ",
+ defaultLeft = "'10%'",
+ defaultTop = 60,
+ defaultRight = "'10%'",
+ defaultBottom = 60
+) }}
+
+## containLabel(boolean) = false
+
Whether the grid region contains [axis tick label](~yAxis.axisLabel) of axis.
+ When containLabel is `false`:
@@ -34,11 +36,13 @@ Whether the grid region contains [axis tick label](~yAxis.axisLabel) of axis.
+ 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(componentName="grid", prefix='#', needShow=true) }}
-
-{{use: partial-tooltip-in-coords(
- galleryViewPath=${galleryViewPath},
- galleryEditorPath=${galleryEditorPath}
-)}}
\ No newline at end of file
+ + 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(
+ componentName = "grid",
+ prefix = '#',
+ needShow = true
+) }}
+
+{{ use: partial-tooltip-in-coords() }}
+
diff --git a/en/option/component/legend.md b/en/option/component/legend.md
index b7666f8..d03b312 100644
--- a/en/option/component/legend.md
+++ b/en/option/component/legend.md
@@ -1,18 +1,18 @@
-{{target: component-legend}}
-
-# legend(Object)
-
+
+{{ target: component-legend }}
+
+# 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.
-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)
-
+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)
@@ -33,55 +33,59 @@ When `'scroll'` used, these options below can be used for detailed configuration
+ [legend.pageIconSize](~legend.pageIconSize)
+ [legend.pageTextStyle](~legend.pageTextStyle)
+ [legend.animation](~legend.animation)
-+ [legend.animationDurationUpdate](~legend.animationDurationUpdate)
-
-
-{{use: partial-component-id(prefix="#")}}
-
-## show(boolean) = true
-
-
-{{use: partial-rect-layout-width-height(componentName="legend")}}
-
-## orient(string) = 'horizontal'
-
++ [legend.animationDurationUpdate](~legend.animationDurationUpdate)
+
+{{ use: partial-component-id(
+ prefix = "#"
+) }}
+
+## show(boolean) = true
+
+{{ use: partial-rect-layout-width-height(
+ componentName = "legend"
+) }}
+
+## orient(string) = 'horizontal'
+
The layout orientation of legend.
Options:
+ 'horizontal'
-+ 'vertical'
-
-## align(string) = 'auto'
-
++ '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'
-+ 'right'
-
-## padding(number|Array) = 5
-
-{{ use: partial-padding(componentName="legend")}}
-
-## itemGap(number) = 10
-
-The distance between each legend, horizontal distance in horizontal layout, and vertical distance in vertical layout.
-
-## itemWidth(number) = 25
-
-Image width of legend symbol.
-
-## itemHeight(number) = 14
-
-Image height of legend symbol.
-
-## symbolKeepAspect(boolean) = true
-
-Whether to keep aspect for icons (from `series.symbol` or user-defined `legend.data.icon`) in the form of `path://`.
-
-## formatter(string|Function) = null
-
++ 'right'
+
+## padding(number|Array) = 5
+
+{{ use: partial-padding(
+ componentName = "legend"
+) }}
+
+## itemGap(number) = 10
+
+The distance between each legend, horizontal distance in horizontal layout, and vertical distance in vertical layout.
+
+## itemWidth(number) = 25
+
+Image width of legend symbol.
+
+## itemHeight(number) = 14
+
+Image height of legend symbol.
+
+## symbolKeepAspect(boolean) = true
+
+Whether to keep aspect for icons (from `series.symbol` or user-defined `legend.data.icon`) in the form of `path://`.
+
+## formatter(string|Function) = null
+
Formatter is used to format label of legend, which supports string template and callback function.
Example:
@@ -92,20 +96,20 @@ formatter: 'Legend {name}'
formatter: function (name) {
return 'Legend ' + name;
}
-```
-
-## selectedMode(string|boolean) = true
-
+```
+
+## 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.
-Besides, it can be set to `'single'` or `'multiple'`, for single selection and multiple selection.
-
-## inactiveColor(Color) = '#ccc'
-
-Legend color when not selected.
-
-## selected(Object)
-
+Besides, it can be set to `'single'` or `'multiple'`, for single selection and multiple selection.
+
+## inactiveColor(Color) = '#ccc'
+
+Legend color when not selected.
+
+## selected(Object)
+
State table of selected legend.
example:
@@ -116,26 +120,29 @@ selected: {
// unselected'series 2'
'series 2': false
}
-```
-
-## textStyle(Object)
-
-Legend text style.
-
-{{ use: partial-text-style(componentName='legend', prefix='##') }}
-
-## tooltip(Object)
-
-Tooltip configuration for legend tooltip, which is similar to [tooltip](~tooltip).
-
-## icon(string)
-
-Icon of the legend items.
-
-{{ use: partial-icon }}
-
-## data(Array)
-
+```
+
+## textStyle(Object)
+
+Legend text style.
+
+{{ use: partial-text-style(
+ componentName = 'legend',
+ prefix = '##'
+) }}
+
+## tooltip(Object)
+
+Tooltip configuration for legend tooltip, which is similar to [tooltip](~tooltip).
+
+## icon(string)
+
+Icon of the legend items.
+
+{{ use: partial-icon() }}
+
+## 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`.
@@ -153,63 +160,57 @@ data: [{
color: 'red'
}
}]
-```
-
-### name(string)
-Name of legend, which should be the `name` value of a certain series. If it is a pie chart, legend name can also be the name of a single data item.
-
-### icon(string)
-
-Icon of the legend.
-
-{{ use: partial-icon }}
-
-### textStyle(Object)
-
-Text style of legend.
-
-{{ use: partial-component-common-style(
- componentName='legend',
- prefix='#',
- defaultBorderColor="'#ccc'",
- hasBorderRadius=true
-) }}
-
-
-
-
-
-
-## scrollDataIndex(number) = 0
-
+```
+
+### name(string)
+
+Name of legend, which should be the `name` value of a certain series. If it is a pie chart, legend name can also be the name of a single data item.
+
+### icon(string)
+
+Icon of the legend.
+
+{{ use: partial-icon() }}
+
+### textStyle(Object)
+
+Text style of legend.
+
+{{ use: partial-component-common-style(
+ componentName = 'legend',
+ prefix = '#',
+ defaultBorderColor = "'#ccc'",
+ hasBorderRadius = true
+) }}
+
+## 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.
-See [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1) or [horizontally scrollable legend](${galleryEditorPath}radar2&edit=1&reset=1).
-
-## pageButtonItemGap(number) = 5
-
+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.
-See [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1) or [horizontally scrollable legend](${galleryEditorPath}radar2&edit=1&reset=1).
-
-
-## pageButtonGap(number) = null
-
+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.
-See [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1) or [horizontally scrollable legend](${galleryEditorPath}radar2&edit=1&reset=1).
-
-
-## pageButtonPosition(string) = 'end'
-
+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:
@@ -217,11 +218,10 @@ 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}'
-
+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.
@@ -235,108 +235,104 @@ If `pageFormatter` is a function, it should return a string. The parameters is:
```
-See [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1) or [horizontally scrollable legend](${galleryEditorPath}radar2&edit=1&reset=1).
-
-
-## pageIcons(Object)
-
+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'`.
-The icons of page buttons.
-
-### horizontal(Array)
-
+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.
-For the each item of the array,
-
-{{ use: partial-icon-image-path }}
-
-See [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1) or [horizontally scrollable legend](${galleryEditorPath}radar2&edit=1&reset=1).
-
-
-### vertical(Array)
-
+For the each item of the array,
+
+{{ use: partial-icon-image-path() }}
+
+See [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1) or [horizontally scrollable legend](${galleryEditorPath}radar2&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.
-For the each item of the array,
-
-{{ use: partial-icon-image-path }}
-
-See [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1) or [horizontally scrollable legend](${galleryEditorPath}radar2&edit=1&reset=1).
-
-
-## pageIconColor(string) = '#2f4554'
-
+For the each item of the array,
+
+{{ use: partial-icon-image-path() }}
+
+See [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1) or [horizontally scrollable legend](${galleryEditorPath}radar2&edit=1&reset=1).
+
+## pageIconColor(string) = '#2f4554'
+
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'
-
+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.
-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
-
+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]`.
-See [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1) or [horizontally scrollable legend](${galleryEditorPath}radar2&edit=1&reset=1).
-
-
-## pageTextStyle(Object)
-
+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'`.
-The text style of page info.
-
-{{ use: partial-simple-text-style(
- componentName='图例页信息',
- prefix='##',
- defaultColor="#333"
-)}}
-
-## animation(boolean)
-
-Whether to use animation when page scrolls.
-
-## animationDurationUpdate(number) = 800
-
-Duration of the page scroll animation.
-
-
-## emphasis(Object)
-
-### selectorLabel(Object)
-
-{{ use: partial-version(version = "4.4.0") }}
-
-{{use:partial-label(
- prefix='###',
- defaultShowLabel=true,
- noPosition=true,
- formatter=false,
- formatter1d=false
-)}}
-
-
-## selector(boolean|Array) = false
-
-{{ use: partial-version(version = "4.4.0") }}
-
+The text style of page info.
+
+{{ use: partial-simple-text-style(
+ componentName = '图例页信息',
+ prefix = '##',
+ defaultColor = "#333"
+) }}
+
+## animation(boolean)
+
+Whether to use animation when page scrolls.
+
+## animationDurationUpdate(number) = 800
+
+Duration of the page scroll animation.
+
+## emphasis(Object)
+
+### selectorLabel(Object)
+
+{{ use: partial-version(
+ version = "4.4.0"
+) }}
+
+{{ use: partial-label(
+ prefix = '###',
+ defaultShowLabel = true,
+ noPosition = true,
+ formatter = false,
+ formatter1d = false
+) }}
+
+## selector(boolean|Array) = false
+
+{{ use: partial-version(
+ 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:
@@ -359,36 +355,45 @@ selector: true
// or
selector: ['all', 'inverse']
-```
-
-## selectorLabel(Object)
-
-{{ use: partial-version(version = "4.4.0") }}
-
-The text label style of the selector button, which is displayed by default.
-
-{{use:partial-label(
- prefix='##',
- defaultShowLabel=true,
- noPosition=true,
- formatter=false,
- formatter1d=false
-)}}
-
-## selectorPosition(string) = 'auto'
-
-{{ use: partial-version(version = "4.4.0") }}
-
-The position of the selector button, which can be placed at the end or start of the legend component, the corresponding values are `'end'` and `'start'`. By default, when the legend is laid out horizontally, the selector is placed at the end of it, and when the legend is laid out vertically, the selector is placed at the start of it.
-
-## selectorItemGap(number) = 7
-
-{{ use: partial-version(version = "4.4.0") }}
-
-The gap between the selector button.
-
-## selectorButtonGap(number) = 10
-
-{{ use: partial-version(version = "4.4.0") }}
-
-The gap between selector button and legend component.
+```
+
+## selectorLabel(Object)
+
+{{ use: partial-version(
+ version = "4.4.0"
+) }}
+
+The text label style of the selector button, which is displayed by default.
+
+{{ use: partial-label(
+ prefix = '##',
+ defaultShowLabel = true,
+ noPosition = true,
+ formatter = false,
+ formatter1d = false
+) }}
+
+## selectorPosition(string) = 'auto'
+
+{{ use: partial-version(
+ version = "4.4.0"
+) }}
+
+The position of the selector button, which can be placed at the end or start of the legend component, the corresponding values are `'end'` and `'start'`. By default, when the legend is laid out horizontally, the selector is placed at the end of it, and when the legend is laid out vertically, the selector is placed at the start of it.
+
+## selectorItemGap(number) = 7
+
+{{ use: partial-version(
+ version = "4.4.0"
+) }}
+
+The gap between the selector button.
+
+## selectorButtonGap(number) = 10
+
+{{ use: partial-version(
+ version = "4.4.0"
+) }}
+
+The gap between selector button and legend component.
+
diff --git a/en/option/component/parallel-axis.md b/en/option/component/parallel-axis.md
index 3e419fe..101f862 100644
--- a/en/option/component/parallel-axis.md
+++ b/en/option/component/parallel-axis.md
@@ -1,33 +1,31 @@
-
-{{target: component-parallel-axis}}
-
-# parallelAxis(Object)
-
-This component is the coordinate axis for parallel coordinate.
-
-{{ use: partial-parallel-introduce(
- galleryViewPath=${galleryViewPath}
-)}}
-
-
-<br>
+
+{{ target: component-parallel-axis }}
+
+# parallelAxis(Object)
+
+This component is the coordinate axis for parallel coordinate.
+
+{{ use: partial-parallel-introduce() }}
+
<br>
-
-{{use: partial-component-id(prefix="#")}}
-
-## dim(number)
-
-Dimension index of coordinate axis.
-
-{{use: partial-parallel-data-example}}
-
+<br>
+
+{{ use: partial-component-id(
+ prefix = "#"
+) }}
+
+## dim(number)
+
+Dimension index of coordinate axis.
+
+{{ use: partial-parallel-data-example() }}
+
`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
-
+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:
@@ -48,52 +46,43 @@ myChart.setOption({
});
```
-If there is only one parallel coordinate, you don't have to configure it, whose default value is `0`.
-
-## realtime(boolean) = true
-
+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.
-When data amount is large, it is suggested to set to be `false` to avoid efficiency problems.
-
-## areaSelectStyle(Object)
-
+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.
-<br>
-
-
-### width(number) = 20
-
-Width of selecting box.
-
-
-### borderWidth(number) = 1
-
-
-Border width of the select box.
-
-
-### borderColor(Color) = 'rgba(160,197,232)'
-
-Border color of the select box.
-
-
-### color(Color) = 'rgba(160,197,232)'
-
-Border fill color of the select box.
-
-
-### opacity(number) = 0.3
-
-Opacity of the select box.
-
-
-
-{{ use: axis-common(
- prefix='#',
- componentType='parallelAxis',
- noAxisPointer=true,
- galleryViewPath=${galleryViewPath},
- galleryEditorPath=${galleryEditorPath}
-) }}
+<br>
+
+### width(number) = 20
+
+Width of selecting box.
+
+### borderWidth(number) = 1
+
+Border width of the select box.
+
+### borderColor(Color) = 'rgba(160,197,232)'
+
+Border color of the select box.
+
+### color(Color) = 'rgba(160,197,232)'
+
+Border fill color of the select box.
+
+### opacity(number) = 0.3
+
+Opacity of the select box.
+
+{{ use: axis-common(
+ prefix = '#',
+ componentType = 'parallelAxis',
+ noAxisPointer = true
+) }}
+
diff --git a/en/option/component/parallel.md b/en/option/component/parallel.md
index 0089363..59d9ce2 100644
--- a/en/option/component/parallel.md
+++ b/en/option/component/parallel.md
@@ -1,80 +1,74 @@
-
-{{target: component-parallel}}
-
-# parallel(Object)
-
-{{ use: partial-parallel-introduce(
- galleryViewPath=${galleryViewPath}
-)}}
-
+
+{{ target: component-parallel }}
+
+# parallel(Object)
+
+{{ use: partial-parallel-introduce() }}
+
<br>
-<br>
-
-{{use: partial-component-id(prefix="#")}}
-
-{{ use: partial-rect-layout-width-height(
- componentName='parallel ',
- defaultLeft: 80,
- defaultRight: 80,
- defaultTop: 60,
- defaultBottom: 60
-) }}
-
-
-## layout(string) = 'horizontal'
-
+<br>
+
+{{ use: partial-component-id(
+ prefix = "#"
+) }}
+
+{{ use: partial-rect-layout-width-height(
+ componentName = 'parallel ',
+ defaultLeft = 80,
+ defaultRight = 80,
+ defaultTop = 60,
+ defaultBottom = 60
+) }}
+
+## layout(string) = 'horizontal'
+
Layout modes, whose optional values are:
+ `'horizontal'`: place each axis horizontally.
-+ `'vertical'`: place each axis vertically.
-
-
-## axisExpandable(boolean) = false
-
-{{use: partial-parallel-high-dim (
- galleryViewPath=${galleryViewPath}
-)}}
-
-Whether to enable toggling axis on clicking.
-
-## axisExpandCenter(number) = null
-
++ `'vertical'`: place each axis vertically.
+
+## axisExpandable(boolean) = false
+
+{{ use: partial-parallel-high-dim() }}
+
+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.
-Please refer to [parallel.axisExpandable](parallel.axisExpandable) for more information.
-
-## axisExpandCount(number) = 0
-
+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.
-Please refer to [parallel.axisExpandCenter](parallel.axisExpandCenter) and [parallel.axisExpandable](parallel.axisExpandable).
-
-## axisExpandWidth(number) = 50
-
+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.
-Please refer to [parallel.axisExpandable](parallel.axisExpandable) for more information.
-
-## axisExpandTriggerOn(string) = 'click'
-
+Please refer to [parallel.axisExpandable](parallel.axisExpandable) for more information.
+
+## axisExpandTriggerOn(string) = 'click'
+
Optional values:
+ `'click'`: Trigger expanding when mouse clicking.
-+ `'mousemove'`: Trigger expanding when mouse hovering.
-
-
-## parallelAxisDefault(Object)
-
-{{use: partial-parallel-axis-default}}
-
++ `'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).
-<br>
-
-{{ use: axis-common(
- prefix='##',
- componentType='parallelAxis',
- noAxisPointer=true,
- galleryViewPath=${galleryViewPath},
- galleryEditorPath=${galleryEditorPath}
-) }}
+<br>
+
+{{ use: axis-common(
+ prefix = '##',
+ componentType = 'parallelAxis',
+ noAxisPointer = true
+) }}
+
diff --git a/en/option/component/polar.md b/en/option/component/polar.md
index 2377326..90b467b 100644
--- a/en/option/component/polar.md
+++ b/en/option/component/polar.md
@@ -1,23 +1,22 @@
-
-{{target: component-polar}}
-
-# polar(Object)
-
+
+{{ target: component-polar }}
+
+# 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: **
-~[600x400](${galleryViewPath}scatter-polar-punchCard&edit=1&reset=1)
-
-{{use: partial-component-id(prefix="#")}}
-
-{{use: component-circular-layout(
- componentName="Polar coordinate",
- disableArray=false
-)}}
-
-
-{{use: partial-tooltip-in-coords(
- galleryViewPath=${galleryViewPath},
- galleryEditorPath=${galleryEditorPath}
-)}}
\ No newline at end of file
+~[600x400](${galleryViewPath}scatter-polar-punchCard&edit=1&reset=1)
+
+{{ use: partial-component-id(
+ prefix = "#"
+) }}
+
+{{ use: component-circular-layout(
+ componentName = "Polar coordinate",
+ disableArray = false
+) }}
+
+{{ use: partial-tooltip-in-coords() }}
+
diff --git a/en/option/component/radar.md b/en/option/component/radar.md
index 291e286..b5fc485 100644
--- a/en/option/component/radar.md
+++ b/en/option/component/radar.md
@@ -1,7 +1,8 @@
-{{target: component-radar}}
-
-# radar(Object)
-
+
+{{ target: component-radar }}
+
+# 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).
@@ -9,28 +10,30 @@ Radar chart coordinate is different from polar coordinate, in that every axis in
Here is a custom example of radar component.
-~[400x400](${galleryViewPath}doc-example/radar&edit=1&reset=1)
-
-{{use: partial-component-id(prefix="#")}}
-
-{{use: component-circular-layout(
- defaultRadius="75%"
-)}}
-
-## startAngle(number) = 90
-
-The start angle of coordinate, which is the angle of the first indicator axis.
-
-## name(Object)
-
-Name of radar chart.
-
-### show(boolean) = true
-
-Whether to display the indicator's name.
-
-### formatter(string|Function)
-
+~[400x400](${galleryViewPath}doc-example/radar&edit=1&reset=1)
+
+{{ use: partial-component-id(
+ prefix = "#"
+) }}
+
+{{ use: component-circular-layout(
+ defaultRadius = "75%"
+) }}
+
+## startAngle(number) = 90
+
+The start angle of coordinate, which is the angle of the first indicator axis.
+
+## name(Object)
+
+Name of radar chart.
+
+### show(boolean) = true
+
+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
@@ -40,62 +43,63 @@ formatter: '【{value}】'
formatter: function (value, indicator) {
return '【' + value + '】';
}
-```
-## textStyle(Object)
-
-{{ use: partial-text-style(
- prefix='##',
- defaultColor="'#333'",
- noAlign=true,
- noVerticalAlign=true
-)}}
-
-## nameGap(number) = 15
-
-Distance between the indicator's name and axis.
-
-## splitNumber(number) = 5
-
-Segments of indicator axis.
-
-## shape(string) = 'polygon'
-
-Radar render type, in which `'polygon'` and `'circle'` are supported.
-
-## scale(boolean) = false
-
-Whether to prevent calculating the scaling relative to zero. If it is set to be `true`, the coordinate tick would not compulsorily contain zero value, which is usually useful in scatter diagram of double numerical values axis.
-
-{{ use: partial-axis-common-axis-line(
- prefix="#"
-)}}
-
-{{ use: partial-axis-common-axis-tick(
- prefix="#",
- hasLabelInterval=false,
- hasAlignWithLabel=false,
- hasInside=false
-) }}
-
-{{ use: partial-axis-common-axis-label(
- prefix="#",
- hasLabelInterval=false,
- hasInside=false
-) }}
-
-{{ use: partial-axis-common-split-line(
- prefix="#",
- hasLabelInterval=false
-)}}
-
-{{ use: partial-axis-common-split-area(
- prefix="#",
- hasLabelInterval=false,
- defaultShow=true
-)}}
-
-## indicator(Array)
-
+```
+
+## textStyle(Object)
+
+{{ use: partial-text-style(
+ prefix = '##',
+ defaultColor = "'#333'",
+ noAlign = true,
+ noVerticalAlign = true
+) }}
+
+## nameGap(number) = 15
+
+Distance between the indicator's name and axis.
+
+## splitNumber(number) = 5
+
+Segments of indicator axis.
+
+## shape(string) = 'polygon'
+
+Radar render type, in which `'polygon'` and `'circle'` are supported.
+
+## scale(boolean) = false
+
+Whether to prevent calculating the scaling relative to zero. If it is set to be `true`, the coordinate tick would not compulsorily contain zero value, which is usually useful in scatter diagram of double numerical values axis.
+
+{{ use: partial-axis-common-axis-line(
+ prefix = "#"
+) }}
+
+{{ use: partial-axis-common-axis-tick(
+ prefix = "#",
+ hasLabelInterval = false,
+ hasAlignWithLabel = false,
+ hasInside = false
+) }}
+
+{{ use: partial-axis-common-axis-label(
+ prefix = "#",
+ hasLabelInterval = false,
+ hasInside = false
+) }}
+
+{{ use: partial-axis-common-split-line(
+ prefix = "#",
+ hasLabelInterval = false
+) }}
+
+{{ use: partial-axis-common-split-area(
+ prefix = "#",
+ hasLabelInterval = false,
+ defaultShow = true
+) }}
+
+## indicator(Array)
+
Indicator of radar chart, which is used to assign multiple variables(dimensions) in radar chart. Here is the example.
```js
@@ -107,20 +111,21 @@ indicator: [
{ name: 'Development (Development) ', max: 52000},
{ name: 'Marketing (Marketing) ', max: 25000}
]
-```
-
-### name(string)
-
-Indicator's name.
-
-### max(number)
-
-The maximum value of indicator. It is an optional configuration, but we recommend to set it manually.
-
-### min(number)
-
-The minimum value of indicator. It it an optional configuration, with default value of 0.
-
-## color(string)
-
-Specfy a color the the indicator.
\ No newline at end of file
+```
+
+### name(string)
+
+Indicator's name.
+
+### max(number)
+
+The maximum value of indicator. It is an optional configuration, but we recommend to set it manually.
+
+### min(number)
+
+The minimum value of indicator. It it an optional configuration, with default value of 0.
+
+## color(string)
+
+Specfy a color the the indicator.
+
diff --git a/en/option/component/radius-axis.md b/en/option/component/radius-axis.md
index 2ea334d..0b80a49 100644
--- a/en/option/component/radius-axis.md
+++ b/en/option/component/radius-axis.md
@@ -1,28 +1,28 @@
-
-{{target: component-radius-axis}}
-
-# radiusAxis(Object)
-
-Radial axis of polar coordinate.
-
-{{use: partial-component-id(prefix="#")}}
-
-## polarIndex(number) = 0
-
-Index of radial axis in polor coordinate. It's the first axis by default.
-
-{{ use: axis-common(
- prefix='#',
- componentType='radiusAxis',
- axisTypeDefault="'value'",
- hasSplitLineAndArea=true,
- galleryViewPath=${galleryViewPath},
- galleryEditorPath=${galleryEditorPath}
-)}}
-
-
-{{use:partial-z-zlevel(
- prefix="#",
- componentName="Radial axis",
- defaultZ=0
-) }}
+
+{{ target: component-radius-axis }}
+
+# radiusAxis(Object)
+
+Radial axis of polar coordinate.
+
+{{ use: partial-component-id(
+ prefix = "#"
+) }}
+
+## polarIndex(number) = 0
+
+Index of radial axis in polor coordinate. It's the first axis by default.
+
+{{ use: axis-common(
+ prefix = '#',
+ componentType = 'radiusAxis',
+ axisTypeDefault = "'value'",
+ hasSplitLineAndArea = true
+) }}
+
+{{ use: partial-z-zlevel(
+ prefix = "#",
+ componentName = "Radial axis",
+ defaultZ = 0
+) }}
+
diff --git a/en/option/component/single-axis.md b/en/option/component/single-axis.md
index 9ed917f..4237036 100644
--- a/en/option/component/single-axis.md
+++ b/en/option/component/single-axis.md
@@ -1,5 +1,5 @@
-{{target: component-single-axis}}
+{{ target: component-single-axis }}
# singleAxis(Object)
@@ -7,14 +7,16 @@ An axis with a single dimension. It can be used to display data in one dimension
~[700x500](${galleryViewPath}scatter-single-axis&edit=1&reset=1)
-{{use: partial-component-id(prefix="#")}}
+{{ use: partial-component-id(
+ prefix = "#"
+) }}
{{ use: partial-rect-layout-width-height(
- componentName="grid ",
- defaultLeft="'5%'",
- defaultTop="'5%'",
- defaultRight="'5%'",
- defaultBottom="'5%'"
+ componentName = "grid ",
+ defaultLeft = "'5%'",
+ defaultTop = "'5%'",
+ defaultRight = "'5%'",
+ defaultBottom = "'5%'"
) }}
## orient(string) = 'horizontal'
@@ -22,16 +24,11 @@ An axis with a single dimension. It can be used to display data in one dimension
Orientation of the axis. By default, it's `'horizontal'`. You can set it to be `'vertical'` to make a vertical axis.
{{ use: axis-common(
- prefix='#',
- componentType='singleAxis',
- axisTypeDefault="'value'",
- hasSplitLineAndArea=true,
- galleryViewPath=${galleryViewPath},
- galleryEditorPath=${galleryEditorPath}
-)}}
-
-
-{{use: partial-tooltip-in-coords(
- galleryViewPath=${galleryViewPath},
- galleryEditorPath=${galleryEditorPath}
-)}}
\ No newline at end of file
+ prefix = '#',
+ componentType = 'singleAxis',
+ axisTypeDefault = "'value'",
+ hasSplitLineAndArea = true
+) }}
+
+{{ use: partial-tooltip-in-coords() }}
+
diff --git a/en/option/component/timeline.md b/en/option/component/timeline.md
index 7bd277f..007bf68 100644
--- a/en/option/component/timeline.md
+++ b/en/option/component/timeline.md
@@ -1,8 +1,8 @@
-
-{{target: component-timeline}}
-
-# timeline(Object)
-
+
+{{ target: component-timeline }}
+
+# timeline(Object)
+
`timeline` component, which provides functions like switching and playing between multiple ECharts `options`.
Here is an example:
@@ -97,21 +97,18 @@ In the above example, each item in `timeline.data` corresponds to each `option`
+ 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
-
-Whether to show the `timeline` component. It would not show with a setting of `false`, but its functions still remain.
-
-
-## type(string) = 'slider'
-
-This attribute has only one valid value as `slider` by now. You don't have to change it.
-
-
-## axisType(string) = 'time'
-
++ 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
+
+Whether to show the `timeline` component. It would not show with a setting of `false`, but its functions still remain.
+
+## type(string) = 'slider'
+
+This attribute has only one valid value as `slider` by now. You don't have to change it.
+
+## axisType(string) = 'time'
+
Type of axis, whose values may be:
+ `'value'`
@@ -119,97 +116,83 @@ Type of axis, whose values may be:
+ `'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
-
-Indicates which is the currently selected item. For instance, if `currentIndex` is `0`, it indicates that the currently selected item is `timeline.data[0]` (namely, using `options[0]`).
-
-
-## autoPlay(boolean) = false
-
-Whether to play automatically.
-
-
-## rewind(boolean) = false
-
-Whether supports playing reversely.
-
-
-## loop(boolean) = true
-
-Whether to loop playing.
-
-
-## playInterval(number) = 2000
-
-Indicates play speed (gap time between two state), whose unit is millisecond.
-
-
-## realtime(boolean) = true
-
-Whether the view updates in real time during dragging the control dot.
-
-
-## controlPosition(string) = 'left'
-
-Position of the play button, whose valid values are `'left'` and `'right'`.
-
-
-{{ use: partial-rect-layout(
- componentName='timeline'
-) }}
-
-
-## padding(number|Array) = 5
-
-{{ use: partial-padding(componentName='timeline')}}
-
-
-## orient(string) = 'horizontal'
-
+ 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
+
+Indicates which is the currently selected item. For instance, if `currentIndex` is `0`, it indicates that the currently selected item is `timeline.data[0]` (namely, using `options[0]`).
+
+## autoPlay(boolean) = false
+
+Whether to play automatically.
+
+## rewind(boolean) = false
+
+Whether supports playing reversely.
+
+## loop(boolean) = true
+
+Whether to loop playing.
+
+## playInterval(number) = 2000
+
+Indicates play speed (gap time between two state), whose unit is millisecond.
+
+## realtime(boolean) = true
+
+Whether the view updates in real time during dragging the control dot.
+
+## controlPosition(string) = 'left'
+
+Position of the play button, whose valid values are `'left'` and `'right'`.
+
+{{ use: partial-rect-layout(
+ componentName = 'timeline'
+) }}
+
+## padding(number|Array) = 5
+
+{{ use: partial-padding(
+ componentName = 'timeline'
+) }}
+
+## orient(string) = 'horizontal'
+
Orientation of the component, whose valid values are:
+ `'vertical'`: vertical layout.
-+ `'horizontal'`: horizontal layout.
-
-
-## inverse(boolean) = false
-
-+ Whether to put the `timeline` component reversely, which makes the elements in the front to be at the end.
-
-
-{{ use: partial-symbol(
- prefix='#',
- defaultSymbol="'emptyCircle'",
- defaultSymbolSize=10,
- name='timeline'
-) }}
-
-
-## lineStyle(Object)
-
-
-### show(boolean) = true
-
-Whether to show the axis. It can be set to be `false` to hide the axis line to make a different style.
-
-{{ use:partial-line-style(
- prefix="##",
- name="timeline ",
- defaultWidth=2,
- defaultColor="'#304654'"
-)}}
-
-
-## label(Object)
-
-Label axis, `emphasis` is the highlighted style of text. For instance, text style in `emphasis` would be used when mouse hovers or legend connects.
-
-
-### position(string|number) = 'auto'
-
++ `'horizontal'`: horizontal layout.
+
+## inverse(boolean) = false
+
++ Whether to put the `timeline` component reversely, which makes the elements in the front to be at the end.
+
+{{ use: partial-symbol(
+ prefix = '#',
+ defaultSymbol = "'emptyCircle'",
+ defaultSymbolSize = 10,
+ name = 'timeline'
+) }}
+
+## lineStyle(Object)
+
+### show(boolean) = true
+
+Whether to show the axis. It can be set to be `false` to hide the axis line to make a different style.
+
+{{ use: partial-line-style(
+ prefix = "##",
+ name = "timeline ",
+ defaultWidth = 2,
+ defaultColor = "'#304654'"
+) }}
+
+## label(Object)
+
+Label axis, `emphasis` is the highlighted style of text. For instance, text style in `emphasis` would be used when mouse hovers or legend connects.
+
+### position(string|number) = 'auto'
+
Configurations:
+ `'auto'`:
@@ -232,199 +215,169 @@ Configurations:
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(
- prefix="##",
- state="normal",
- textStyleDefaultColor="'#304654'"
-) }}
-
-
-### emphasis(Object)
-
-{{ use: partial-timeline-label(
- prefix="###",
- state="emphasis",
- textStyleDefaultColor="'#c23531'"
-) }}
-
-
-## itemStyle(Object)
-
-{{use:partial-item-style-desc(
- name="timeline "
-) }}
-
-
-{{ use:partial-item-style(
- prefix="##",
- name="timeline ",
- defaultColor="'#304654'",
- defaultBorderWidth=1
-) }}
-
-
-### emphasis(Object)
-
-{{ use:partial-item-style(
- prefix="###",
- name="timeline ",
- defaultColor="'#c23531'",
- defaultBorderWidth=1
-) }}
-
-
-## checkpointStyle(Object)
-
-Style of the selected item (`checkpoint`).
-
-{{ use: partial-symbol(
- prefix='##',
- defaultSymbol="'circle'",
- defaultSymbolSize=13,
- name='timeline.checkpointStyle '
-) }}
-
-
-### color(Color) = '#c23531'
-
-Color of `checkpoint` in `timeline` component.
-
-### borderWidth(number) = 5
-
-
-The border-width of `checkpoint` in `timeline` component.
-
-
-### borderColor(Color) = 'rgba(194,53,49, 0.5)'
-
-The border-color of `checkpoint` in `timeline` component.
-
-
-### animation(boolean) = true
-
-In `timeline` component, whether there is animation in `checkpoint` moving during the process of `timeline` playing and switching.
-
-
-### animationDuration(number) = 300
-
-The animation duration of `checkpoint` in `timeline` component.
-
-
-### animationEasing(string) = 'quinticInOut'
-
-The easing effect of animation of `checkpoint` in `timeline` component. Refers to [easing sample](${galleryViewPath}line-easing) for different easing effects.
-
-
-## controlStyle(Object)
-
-The style of *control button*, which includes: *play button*, *previous button*, and *next button*.
-
-### show(boolean) = true
-
-Whether to show control button. `false` for hide all.
-
-### showPlayBtn(boolean) = true
-
-Whether to show play button.
-
-
-### showPrevBtn(boolean) = true
-
-Whether to show previous button.
-
-
-### showNextBtn(boolean) = true
-
-Whether to show next button.
-
-
-### itemSize(number) = 22
-
-Size of *control button*, in pixels (px).
-
-
-### itemGap(number) = 12
-
-Interval between *control button*, in pixels (px).
-
-
-### position(string) = 'left'
-
+ 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(
+ prefix = "##",
+ state = "normal",
+ textStyleDefaultColor = "'#304654'"
+) }}
+
+### emphasis(Object)
+
+{{ use: partial-timeline-label(
+ prefix = "###",
+ state = "emphasis",
+ textStyleDefaultColor = "'#c23531'"
+) }}
+
+## itemStyle(Object)
+
+{{ use: partial-item-style-desc(
+ name = "timeline "
+) }}
+
+{{ use: partial-item-style(
+ prefix = "##",
+ name = "timeline ",
+ defaultColor = "'#304654'",
+ defaultBorderWidth = 1
+) }}
+
+### emphasis(Object)
+
+{{ use: partial-item-style(
+ prefix = "###",
+ name = "timeline ",
+ defaultColor = "'#c23531'",
+ defaultBorderWidth = 1
+) }}
+
+## checkpointStyle(Object)
+
+Style of the selected item (`checkpoint`).
+
+{{ use: partial-symbol(
+ prefix = '##',
+ defaultSymbol = "'circle'",
+ defaultSymbolSize = 13,
+ name = 'timeline.checkpointStyle '
+) }}
+
+### color(Color) = '#c23531'
+
+Color of `checkpoint` in `timeline` component.
+
+### borderWidth(number) = 5
+
+The border-width of `checkpoint` in `timeline` component.
+
+### borderColor(Color) = 'rgba(194,53,49, 0.5)'
+
+The border-color of `checkpoint` in `timeline` component.
+
+### animation(boolean) = true
+
+In `timeline` component, whether there is animation in `checkpoint` moving during the process of `timeline` playing and switching.
+
+### animationDuration(number) = 300
+
+The animation duration of `checkpoint` in `timeline` component.
+
+### animationEasing(string) = 'quinticInOut'
+
+The easing effect of animation of `checkpoint` in `timeline` component. Refers to [easing sample](${galleryViewPath}line-easing) for different easing effects.
+
+## controlStyle(Object)
+
+The style of *control button*, which includes: *play button*, *previous button*, and *next button*.
+
+### show(boolean) = true
+
+Whether to show control button. `false` for hide all.
+
+### showPlayBtn(boolean) = true
+
+Whether to show play button.
+
+### showPrevBtn(boolean) = true
+
+Whether to show previous button.
+
+### showNextBtn(boolean) = true
+
+Whether to show next button.
+
+### itemSize(number) = 22
+
+Size of *control button*, in pixels (px).
+
+### itemGap(number) = 12
+
+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.
-+ When [timeline.orient](~timeline.orient) is set to be `'vertical'`, `'top'` and `'bottom'`are valid.
-
-
-### playIcon(string)
-
-Icon of *play status* for *play button*.
-
-{{ use: partial-icon-image-path }}
-
-
-### stopIcon(string)
-
-Icon of *stop status* for *play button*.
-
-{{ use: partial-icon-image-path }}
-
-
-### prevIcon(string)
-
-Icon of *previous button*.
-
-{{ use: partial-icon-image-path }}
-
-
-### nextIcon(string)
-
-Icon of *next button*.
-
-{{ use: partial-icon-image-path }}
-
-
-### color(Color) = '#304654'
-
-Button color.
-
-
-### borderColor(Color) = '#304654'
-
-Color of button border.
-
-
-### borderWidth(number) = 1
-
-Border width of button.
-
-
-### emphasis(Object)
-
-Button style in *highlighted state* (when it's hovered by mouse).
-
-
-#### color(Color) = '#c23531'
-
-Button color.
-
-
-#### borderColor(Color) = '#c23531'
-
-Color of button border.
-
-
-#### borderWidth(number) = 2
-
-Width of button border.
-
-
-## data(Array)
-
++ When [timeline.orient](~timeline.orient) is set to be `'vertical'`, `'top'` and `'bottom'`are valid.
+
+### playIcon(string)
+
+Icon of *play status* for *play button*.
+
+{{ use: partial-icon-image-path() }}
+
+### stopIcon(string)
+
+Icon of *stop status* for *play button*.
+
+{{ use: partial-icon-image-path() }}
+
+### prevIcon(string)
+
+Icon of *previous button*.
+
+{{ use: partial-icon-image-path() }}
+
+### nextIcon(string)
+
+Icon of *next button*.
+
+{{ use: partial-icon-image-path() }}
+
+### color(Color) = '#304654'
+
+Button color.
+
+### borderColor(Color) = '#304654'
+
+Color of button border.
+
+### borderWidth(number) = 1
+
+Border width of button.
+
+### emphasis(Object)
+
+Button style in *highlighted state* (when it's hovered by mouse).
+
+#### color(Color) = '#c23531'
+
+Button color.
+
+#### borderColor(Color) = '#c23531'
+
+Color of button border.
+
+#### borderWidth(number) = 2
+
+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`.
@@ -460,44 +413,40 @@ as follows:
symbolSize: 18
},
]
-```
-
-
-
-
-
-{{target: partial-timeline-label}}
-
-#${prefix} show(boolean) = true
-
-Whether to show the label.
-
-
-#${prefix} interval(string|number) = 'auto'
-
-Interval of `label`. When it is assigned with a numerical value, such as `2`, a label would show every 2 items.
-
-
-#${prefix} rotate(prefix) = 0
-
-Rotation angle of `label`, in which positive values refer to counter clockwise rotation.
-
-#${prefix} formatter(string|Function) = null
-
-{{use: axis-common-formatter-desc}}
-
-
+```
+
+
+
+
+{{ target: partial-timeline-label }}
+
+#${prefix} show(boolean) = true
+
+Whether to show the label.
+
+#${prefix} interval(string|number) = 'auto'
+
+Interval of `label`. When it is assigned with a numerical value, such as `2`, a label would show every 2 items.
+
+#${prefix} rotate(prefix) = 0
+
+Rotation angle of `label`, in which positive values refer to counter clockwise rotation.
+
+#${prefix} formatter(string|Function) = null
+
+{{ use: axis-common-formatter-desc() }}
+
{{ if: ${state} }}
-{{ use: partial-text-style(
+{{ use: partial-text-style(
prefix=${prefix},
name="timeline.lable." + ${state},
defaultColor=${textStyleDefaultColor}
-) }}
+) }}
{{ else }}
-{{ use: partial-text-style(
+{{ use: partial-text-style(
prefix=${prefix},
name="timeline.lable",
defaultColor=${textStyleDefaultColor}
-) }}
-{{ /if }}
-
+) }}
+{{ /if }}
+
diff --git a/en/option/component/title.md b/en/option/component/title.md
index 31c7c1c..ae6590e 100644
--- a/en/option/component/title.md
+++ b/en/option/component/title.md
@@ -1,114 +1,113 @@
-
-{{target: component-title}}
-
-# title(Object)
-
+
+{{ target: component-title }}
+
+# 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: **
-~[700x400](${galleryViewPath}line-easing&edit=1&reset=1)
-
-
-{{use: partial-component-id(prefix="#")}}
-
-## show(boolean) = true
-
-Set this to `false` to prevent the title from showing
-
-## text(string) = ''
-
-The main title text, supporting for `\n` for newlines.
-
-## link(string) = ''
-
-The hyper link of main title text.
-
-## target(string) = 'blank'
-
+~[700x400](${galleryViewPath}line-easing&edit=1&reset=1)
+
+{{ use: partial-component-id(
+ prefix = "#"
+) }}
+
+## show(boolean) = true
+
+Set this to `false` to prevent the title from showing
+
+## text(string) = ''
+
+The main title text, supporting for `\n` for newlines.
+
+## link(string) = ''
+
+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
-+ `'blank'` opening it in a new tab
-
-## textStyle(Object)
-
-{{ use: partial-text-style(
- prefix="##",
- name="main title",
- defaultFontSize=18,
- defaultFontWeight="'bolder'",
- defaultColor="'#333'",
- noAlign=true,
- noVerticalAlign=true,
- noBox=true
-) }}
-
-
-## subtext(string) = ''
-
-Subtitle text, supporting for `\n` for newlines.
-
-
-## sublink(string) = ''
-
-The hyper link of subtitle text.
-
-
-## subtarget(string) = 'blank'
-
- Open the hyper link of subtitle in specified tab, options:
++ `'blank'` opening it in a new tab
+
+## textStyle(Object)
+
+{{ use: partial-text-style(
+ prefix = "##",
+ name = "main title",
+ defaultFontSize = 18,
+ defaultFontWeight = "'bolder'",
+ defaultColor = "'#333'",
+ noAlign = true,
+ noVerticalAlign = true,
+ noBox = true
+) }}
+
+## subtext(string) = ''
+
+Subtitle text, supporting for `\n` for newlines.
+
+## sublink(string) = ''
+
+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
-+ `'blank'` opening it in a new tab
-
-
-## subtextStyle(Object)
-
-{{ use: partial-text-style(
- prefix='##',
- name="subtitle",
- defaultColor="'#aaa'",
- noBox=true
-) }}
-
-## textAlign(string) = 'auto'
-
++ `'blank'` opening it in a new tab
+
+## subtextStyle(Object)
+
+{{ use: partial-text-style(
+ prefix = '##',
+ name = "subtitle",
+ defaultColor = "'#aaa'",
+ noBox = true
+) }}
+
+## textAlign(string) = 'auto'
+
The horizontal align of the component (including "text" and "subtext").
-Optional values: `'auto'`, `'left'`, `'right'`, `'center'`.
-
-## textVerticalAlign(string) = 'auto'
-
+Optional values: `'auto'`, `'left'`, `'right'`, `'center'`.
+
+## textVerticalAlign(string) = 'auto'
+
The vertical align of the component (including "text" and "subtext").
-Optional values: `'auto'`, `'top'`, `'bottom'`, `'middle'`.
-
-## triggerEvent(boolean) = false
-
-Set this to `true` to enable triggering events
-
-## padding(number|Array) = 5
-
-{{ use: partial-padding(componentName="title")}}
-
-## itemGap(number) = 10
-
-The gap between the main title and subtitle.
-
-{{use: partial-rect-layout(componentName="title ")}}
-
-{{ use: partial-component-common-style(
- componentName="title",
- prefix='#',
- defaultBorderWidth="0",
- hasBorderRadius=true
-)}}
-
-
-
+Optional values: `'auto'`, `'top'`, `'bottom'`, `'middle'`.
+
+## triggerEvent(boolean) = false
+
+Set this to `true` to enable triggering events
+
+## padding(number|Array) = 5
+
+{{ use: partial-padding(
+ componentName = "title"
+) }}
+
+## itemGap(number) = 10
+
+The gap between the main title and subtitle.
+
+{{ use: partial-rect-layout(
+ componentName = "title "
+) }}
+
+{{ use: partial-component-common-style(
+ componentName = "title",
+ prefix = '#',
+ defaultBorderWidth = "0",
+ hasBorderRadius = true
+) }}
+
diff --git a/en/option/component/toolbox.md b/en/option/component/toolbox.md
index ee979e3..d16900a 100644
--- a/en/option/component/toolbox.md
+++ b/en/option/component/toolbox.md
@@ -1,83 +1,112 @@
-{{ target: feature-icon-style }}
-
-#${prefix} iconStyle(Object)
-The style setting of ${name} icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under `emphasis`.
-{{ use: partial-item-style(
- defaultBorderColor = '#666',
- defaultColor = 'none',
- defaultBorderWidth = 1,
- prefix="#" + ${prefix}
-) }}
-
-#${prefix} emphasis(Object)
-##${prefix} iconStyle(Object)
-{{ use: partial-item-style(prefix="##" + ${prefix}) }}
-###${prefix} textPosition(string) = 'bottom'
-Text position: `'left'` / `'right'` / `'top'` / `'bottom'`.
-###${prefix} textFill(string) = '#000'
-Fill color of text. If it's not set, it will use in the order of icon's fill color, stroke color, and `'#000'`.
-###${prefix} textAlign(string) = 'center'
-Text align: `'left'` / `'center'` / `'right'`.
-###${prefix} textBackgroundColor(string)
-Text background color.
-###${prefix} textBorderRadius(number)
-Border radius of text area.
-###${prefix} textPadding(number)
-Padding of text area.
-
-
-{{ target: feature-common}}
-
-#### show(boolean) = true
-Whether to show the tool.
-
-#### title(string) = '${title}'
-
-#### icon
-{{ use: partial-icon-image-path }}
-
-{{ use: feature-icon-style(name=${title}, prefix="###") }}
-
-
-
-{{ target: component-toolbox }}
-
-# toolbox(Object)
-
+
+{{ target: feature-icon-style }}
+
+#${prefix} iconStyle(Object)
+
+The style setting of ${name} icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under `emphasis`.
+
+{{ use: partial-item-style(
+ defaultBorderColor = '#666',
+ defaultColor = 'none',
+ defaultBorderWidth = 1,
+ prefix = "#" + ${prefix}
+) }}
+
+#${prefix} emphasis(Object)
+
+##${prefix} iconStyle(Object)
+
+{{ use: partial-item-style(
+ prefix = "##" + ${prefix}
+) }}
+
+###${prefix} textPosition(string) = 'bottom'
+
+Text position: `'left'` / `'right'` / `'top'` / `'bottom'`.
+
+###${prefix} textFill(string) = '#000'
+
+Fill color of text. If it's not set, it will use in the order of icon's fill color, stroke color, and `'#000'`.
+
+###${prefix} textAlign(string) = 'center'
+
+Text align: `'left'` / `'center'` / `'right'`.
+
+###${prefix} textBackgroundColor(string)
+
+Text background color.
+
+###${prefix} textBorderRadius(number)
+
+Border radius of text area.
+
+###${prefix} textPadding(number)
+
+Padding of text area.
+
+
+
+
+{{ target: feature-common }}
+
+#### show(boolean) = true
+
+Whether to show the tool.
+
+#### title(string) = '${title}'
+
+#### icon(*)
+
+{{ use: partial-icon-image-path() }}
+
+{{ use: feature-icon-style(
+ name = ${title},
+ prefix = "###"
+) }}
+
+
+
+
+{{ target: component-toolbox }}
+
+# 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: **
-~[600x400](${galleryViewPath}line-marker&reset=1&edit=1)
-
-
-{{use: partial-component-id(prefix="#")}}
-
-## show(boolean) = true
-
-Whether to show toolbox component.
-
-## orient(string) = 'horizontal'
-
+~[600x400](${galleryViewPath}line-marker&reset=1&edit=1)
+
+{{ use: partial-component-id(
+ prefix = "#"
+) }}
+
+## show(boolean) = true
+
+Whether to show toolbox component.
+
+## orient(string) = 'horizontal'
+
The layout orientation of toolbox's icon.
Options:
+ 'horizontal'
-+ 'vertical'
-
-## itemSize(number) = 15
-
-The size of toolbox's icon.
-
-## itemGap(number) = 10
-
-The gap between each icon of toolbox. It is horizontal gap in horizontal layout, while vertical gap in vertical layout.
-
-## showTitle(boolean) = true
-
-Whether to show the title of each tool icon when mouse hovers.
-
-## feature(Object)
++ 'vertical'
+
+## itemSize(number) = 15
+
+The size of toolbox's icon.
+
+## itemGap(number) = 10
+
+The gap between each icon of toolbox. It is horizontal gap in horizontal layout, while vertical gap in vertical layout.
+
+## showTitle(boolean) = true
+
+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.
@@ -107,44 +136,65 @@ Notes: User-defined tool name could only start with `my`, like `myTool1` and `my
}
}
}
-```
-
-### saveAsImage(Object)
-Save as image.
-
-#### type(string) = 'png'
+```
+
+### saveAsImage(Object)
+
+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.
-+ 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)
-Name to save the image, whose default value is [title.text](~title.text).
-
-#### backgroundColor(Color) = 'auto'
-Background color to save the image, whose default value is [backgroundColor](~backgroundColor). If `backgroundColor` is not set, white color is used.
-
-#### connectedBackgroundColor(Color) = '#fff'
-When [echarts.connect](api.html#echarts.connect) is used to connect the interaction of multiple chart series, they will all be included in the exported image. This option sets the background color between these charts.
-
-#### excludeComponents(Array) = ['toolbox']
-Components to be excluded when export. By default, toolbox is excluded.
-{{ use: feature-common(title="save as image") }}
-
-#### pixelRatio(number) = 1
-Resolution ratio to save image, whose default value is that of the container. Values larger than 1 (e.g.: 2) is supported when you need higher resolution.
-
-### restore(Object)
-Restore configuration item.
-{{ use: feature-common(title="restore") }}
-
-### dataView(Object)
-Data view tool, which could display data in current chart and updates chart after being edited.
-{{ use: feature-common(title="data view") }}
-#### readOnly(boolean) = false
-Whether it is read-only.
-
-#### optionToContent(Function)
++ 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)
+
+Name to save the image, whose default value is [title.text](~title.text).
+
+#### backgroundColor(Color) = 'auto'
+
+Background color to save the image, whose default value is [backgroundColor](~backgroundColor). If `backgroundColor` is not set, white color is used.
+
+#### connectedBackgroundColor(Color) = '#fff'
+
+When [echarts.connect](api.html#echarts.connect) is used to connect the interaction of multiple chart series, they will all be included in the exported image. This option sets the background color between these charts.
+
+#### excludeComponents(Array) = ['toolbox']
+
+Components to be excluded when export. By default, toolbox is excluded.
+
+{{ use: feature-common(
+ title = "save as image"
+) }}
+
+#### pixelRatio(number) = 1
+
+Resolution ratio to save image, whose default value is that of the container. Values larger than 1 (e.g.: 2) is supported when you need higher resolution.
+
+### restore(Object)
+
+Restore configuration item.
+
+{{ use: feature-common(
+ title = "restore"
+) }}
+
+### dataView(Object)
+
+Data view tool, which could display data in current chart and updates chart after being edited.
+
+{{ use: feature-common(
+ title = "data view"
+) }}
+
+#### readOnly(boolean) = false
+
+Whether it is read-only.
+
+#### optionToContent(Function)
+
```js
(option:Object) => HTMLDomElement|string
```
@@ -171,64 +221,94 @@ optionToContent: function(opt) {
table += '</tbody></table>';
return table;
}
-```
-
-#### contentToOption(Function)
+```
+
+#### contentToOption(Function)
+
```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']
-There are 3 names in data view, which are `['data view', 'turn off' and 'refresh']`.
-#### backgroundColor(string) = '#fff'
-Background color of the floating layer in data view.
-#### textareaColor(string) = '#fff'
-Background color of input area of the floating layer in data view.
-#### textareaBorderColor(string) = '#333'
-Border color of input area of the floating layer in data view.
-
-#### textColor(string) = '#000'
-Text color.
-#### buttonColor(string) = '#c23531'
-Button color.
-#### buttonTextColor(string) = '#fff'
-Color of button text.
-
-### dataZoom(Object)
-Data area zooming, which only supports rectangular coordinate by now.
-{{ use: feature-common(title="data area zooming") }}
-
-#### filterMode(string) = 'filter'
-The same meaning as [dataZoom.filterMode](~dataZoom.filterMode).
-
-#### xAxisIndex(number|Array|boolean)
-Defines which [xAxis](~xAxis) should be controlled. By default, it controls all x axes. If it is set to be `false`, then no x axis is controlled. If it is set to be then it controls axis with axisIndex of `3`. If it is set to be `[0, 3]`, it controls the x-axes with axisIndex of `0` and `3`.
-
-#### yAxisIndex(number|Array|boolean)
-Defines which [yAxis](~yAxis) should be controlled. By default, it controls all y axes. If it is set to be `false`, then no y axis is controlled. If it is set to be then it controls axis with axisIndex of `3`. If it is set to be `[0, 3]`, it controls the x-axes with axisIndex of `0` and `3`.
-
-#### icon(Object)
-Zooming and restore icon path.
-##### zoom(string)
-{{ use: partial-icon-image-path }}
-##### back(string)
-{{ use: partial-icon-image-path }}
-
-#### title(Object)
-Restored and zoomed title text.
-##### zoom(string) = 'area zooming'
-##### back(string) = 'restore area zooming'
-
-#### brushStyle(Object)
-Style of brush rectangle.
-{{ use: partial-item-style(
- prefix="####"
-) }}
-
-
-### magicType(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']
+
+There are 3 names in data view, which are `['data view', 'turn off' and 'refresh']`.
+
+#### backgroundColor(string) = '#fff'
+
+Background color of the floating layer in data view.
+
+#### textareaColor(string) = '#fff'
+
+Background color of input area of the floating layer in data view.
+
+#### textareaBorderColor(string) = '#333'
+
+Border color of input area of the floating layer in data view.
+
+#### textColor(string) = '#000'
+
+Text color.
+
+#### buttonColor(string) = '#c23531'
+
+Button color.
+
+#### buttonTextColor(string) = '#fff'
+
+Color of button text.
+
+### dataZoom(Object)
+
+Data area zooming, which only supports rectangular coordinate by now.
+
+{{ use: feature-common(
+ title = "data area zooming"
+) }}
+
+#### filterMode(string) = 'filter'
+
+The same meaning as [dataZoom.filterMode](~dataZoom.filterMode).
+
+#### xAxisIndex(number|Array|boolean)
+
+Defines which [xAxis](~xAxis) should be controlled. By default, it controls all x axes. If it is set to be `false`, then no x axis is controlled. If it is set to be then it controls axis with axisIndex of `3`. If it is set to be `[0, 3]`, it controls the x-axes with axisIndex of `0` and `3`.
+
+#### yAxisIndex(number|Array|boolean)
+
+Defines which [yAxis](~yAxis) should be controlled. By default, it controls all y axes. If it is set to be `false`, then no y axis is controlled. If it is set to be then it controls axis with axisIndex of `3`. If it is set to be `[0, 3]`, it controls the x-axes with axisIndex of `0` and `3`.
+
+#### icon(Object)
+
+Zooming and restore icon path.
+
+##### zoom(string)
+
+{{ use: partial-icon-image-path() }}
+
+##### back(string)
+
+{{ use: partial-icon-image-path() }}
+
+#### title(Object)
+
+Restored and zoomed title text.
+
+##### zoom(string) = 'area zooming'
+
+##### back(string) = 'restore area zooming'
+
+#### brushStyle(Object)
+
+Style of brush rectangle.
+
+{{ use: partial-item-style(
+ prefix = "####"
+) }}
+
+### magicType(Object)
+
Magic type switching.
**示例: **
```js
@@ -237,49 +317,84 @@ feature: {
type: ['line', 'bar', 'stack', 'tiled']
}
}
-```
-#### show(boolean) = true
-Whether to show the magic type switching.
-#### type(Array)
-Enabled magic types, including `'line'` (for line charts), `'bar'` (for bar charts), `'stack'` (for stacked charts), and `'tiled'` (for tiled charts).
-{{ use: feature-common(title="magic type switching") }}
-#### icon(Object)
-the different types of icon path , which could be configurated individually.
-##### line(string)
-{{ use: partial-icon-image-path }}
-##### bar(string)
-{{ use: partial-icon-image-path }}
-##### stack(string)
-{{ use: partial-icon-image-path }}
-##### tiled(string)
-{{ use: partial-icon-image-path }}
-#### title(Object)
-Title for different types, can be configured seperately.
-##### line(string) = 'for line charts'
-##### bar(string) = 'for bar charts'
-##### stack(string) = 'for stacked charts'
-##### tiled(string) = 'for tiled charts'
-#### option(Object)
-Configuration item for each type, which will be used when switching to certain type.
-##### line(Object)
-##### bar(Object)
-##### stack(Object)
-##### tiled(Object)
-#### seriesIndex(Object)
-Series list for each type.
-##### line(Array)
-##### bar(Array)
-##### stack(Array)
-##### tiled(Array)
-
-
-### brush(Object)
+```
+
+#### show(boolean) = true
+
+Whether to show the magic type switching.
+
+#### type(Array)
+
+Enabled magic types, including `'line'` (for line charts), `'bar'` (for bar charts), `'stack'` (for stacked charts), and `'tiled'` (for tiled charts).
+
+{{ use: feature-common(
+ title = "magic type switching"
+) }}
+
+#### icon(Object)
+
+the different types of icon path , which could be configurated individually.
+
+##### line(string)
+
+{{ use: partial-icon-image-path() }}
+
+##### bar(string)
+
+{{ use: partial-icon-image-path() }}
+
+##### stack(string)
+
+{{ use: partial-icon-image-path() }}
+
+##### tiled(string)
+
+{{ use: partial-icon-image-path() }}
+
+#### title(Object)
+
+Title for different types, can be configured seperately.
+
+##### line(string) = 'for line charts'
+
+##### bar(string) = 'for bar charts'
+
+##### stack(string) = 'for stacked charts'
+
+##### tiled(string) = 'for tiled charts'
+
+#### option(Object)
+
+Configuration item for each type, which will be used when switching to certain type.
+
+##### line(Object)
+
+##### bar(Object)
+
+##### stack(Object)
+
+##### tiled(Object)
+
+#### seriesIndex(Object)
+
+Series list for each type.
+
+##### line(Array)
+
+##### bar(Array)
+
+##### stack(Array)
+
+##### tiled(Array)
+
+### brush(Object)
+
Brush-selecting icon.
-It can also be configured at [brush.toolbox](~brush.toolbox).
-
-#### type(Array)
-
+It can also be configured at [brush.toolbox](~brush.toolbox).
+
+#### type(Array)
+
Icons used, whose values are:
+ `'rect'`: Enabling selecting with rectangle area.
@@ -287,39 +402,63 @@ Icons used, whose values are:
+ `'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)
-Icon path for each icon.
-##### rect(string)
-{{ use: partial-icon-image-path }}
-##### polygon(string)
-{{ use: partial-icon-image-path }}
-##### lineX(string)
-{{ use: partial-icon-image-path }}
-##### lineY(string)
-{{ use: partial-icon-image-path }}
-##### keep(string)
-{{ use: partial-icon-image-path }}
-##### clear(string)
-{{ use: partial-icon-image-path }}
-#### title(Object)
-Title.
-##### rect(string) = 'Rectangle selection'
-##### polygon(string) = 'Polygon selection'
-##### lineX(string) = 'Horizontal selection'
-##### lineY(string) = 'Vertical selection'
-##### keep(string) = 'Keep previous selection'
-##### clear(string) = 'Clear selection'
-
-{{ use: feature-icon-style(name="Shared", prefix="#") }}
-
-{{ use: partial-rect-layout-width-height(componentName="toolbox") }}
-
-
-## tooltip(Object)
-
++ `'clear'`: Clearing all selection.
+
+#### icon(Object)
+
+Icon path for each icon.
+
+##### rect(string)
+
+{{ use: partial-icon-image-path() }}
+
+##### polygon(string)
+
+{{ use: partial-icon-image-path() }}
+
+##### lineX(string)
+
+{{ use: partial-icon-image-path() }}
+
+##### lineY(string)
+
+{{ use: partial-icon-image-path() }}
+
+##### keep(string)
+
+{{ use: partial-icon-image-path() }}
+
+##### clear(string)
+
+{{ use: partial-icon-image-path() }}
+
+#### title(Object)
+
+Title.
+
+##### rect(string) = 'Rectangle selection'
+
+##### polygon(string) = 'Polygon selection'
+
+##### lineX(string) = 'Horizontal selection'
+
+##### lineY(string) = 'Vertical selection'
+
+##### keep(string) = 'Keep previous selection'
+
+##### clear(string) = 'Clear selection'
+
+{{ use: feature-icon-style(
+ name = "Shared",
+ prefix = "#"
+) }}
+
+{{ use: partial-rect-layout-width-height(
+ componentName = "toolbox"
+) }}
+
+## 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:
@@ -355,5 +494,5 @@ option = {
},
...
}
-```
-
+```
+
diff --git a/en/option/component/tooltip.md b/en/option/component/tooltip.md
index 4186235..2c2eb58 100644
--- a/en/option/component/tooltip.md
+++ b/en/option/component/tooltip.md
@@ -1,31 +1,30 @@
-
-{{target: component-tooltip}}
-
-# tooltip(Object)
-
+
+{{ target: component-tooltip }}
+
+# tooltip(Object)
+
Tooltip component.
----
-
-{{use: partial-tooltip-introduction}}
-
-{{use: partial-tooltip-coords-common(
- prefix='#',
- galleryViewPath=${galleryViewPath}
-)}}
-
-## showContent(boolean) = true
-
-Whether to show the tooltip floating layer, whose default value is true. It should be configurated to be `false`, if you only need tooltip to trigger the event or show the axisPointer without content.
-
-## alwaysShowContent(boolean) = false
-
+---
+
+{{ use: partial-tooltip-introduction() }}
+
+{{ use: partial-tooltip-coords-common(
+ prefix = '#'
+) }}
+
+## showContent(boolean) = true
+
+Whether to show the tooltip floating layer, whose default value is true. It should be configurated to be `false`, if you only need tooltip to trigger the event or show the axisPointer without content.
+
+## 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.
-This attribute is newly added to ECharts 3.0.
-
-## triggerOn(string) = 'mousemove|click'
-
+This attribute is newly added to ECharts 3.0.
+
+## triggerOn(string) = 'mousemove|click'
+
Conditions to trigger tooltip. Options:
+ `'mousemove'`
@@ -44,46 +43,50 @@ Conditions to trigger tooltip. Options:
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
-
-Delay time for showing tooltip, in ms. No delay by default, and it is not recommended to set. Only valid when [triggerOn](~tooltip.triggerOn) is set to be `'mousemove'`.
-
-## hideDelay(number) = 100
-
-Delay time for hiding tooltip, in ms. It will be invalid when [alwaysShowContent](~tooltip.alwaysShowContent) is `true`.
-
-## enterable(boolean) = true
-
-Whether mouse is allowed to enter the floating layer of tooltip, whose default value is false. If you need to interact in the tooltip like with links or buttons, it can be set as `true`.
-
-## renderMode(string) = 'html'
-
-Render mode for tooltip. By default, it is set to be `'html'` so that extra DOM element is used for tooltip. It can also set to be `'richText'` so that the tooltip will be rendered inside Canvas (SVG rich text is not implemented yet). This is very useful for environments that don't have DOM, such as Wechat applications.
-
-## confine(boolean) = false
-
+This attribute is new to ECharts 3.0.
+
+## showDelay(number) = 0
+
+Delay time for showing tooltip, in ms. No delay by default, and it is not recommended to set. Only valid when [triggerOn](~tooltip.triggerOn) is set to be `'mousemove'`.
+
+## hideDelay(number) = 100
+
+Delay time for hiding tooltip, in ms. It will be invalid when [alwaysShowContent](~tooltip.alwaysShowContent) is `true`.
+
+## enterable(boolean) = true
+
+Whether mouse is allowed to enter the floating layer of tooltip, whose default value is false. If you need to interact in the tooltip like with links or buttons, it can be set as `true`.
+
+## renderMode(string) = 'html'
+
+Render mode for tooltip. By default, it is set to be `'html'` so that extra DOM element is used for tooltip. It can also set to be `'richText'` so that the tooltip will be rendered inside Canvas (SVG rich text is not implemented yet). This is very useful for environments that don't have DOM, such as Wechat applications.
+
+## confine(boolean) = false
+
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
-
-{{ use: partial-version(version="4.7.0") }}
-
+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
+
+{{ use: partial-version(
+ 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.
-Note that it also works when CSS transform used.
-
-
-## transitionDuration(number) = 0.4
-
-The transition duration of tooltip's animation, in seconds. When it is set to be 0, it would move closely with the mouse.
-
-{{ use: partial-tooltip-common(scope='global', prefix='#') }}
-
+Note that it also works when CSS transform used.
+
+## transitionDuration(number) = 0.4
+
+The transition duration of tooltip's animation, in seconds. When it is set to be 0, it would move closely with the mouse.
+
+{{ use: partial-tooltip-common(
+ scope = 'global',
+ prefix = '#'
+) }}
+
diff --git a/en/option/component/visual-map-continuous.md b/en/option/component/visual-map-continuous.md
index 4f257e8..faa31f9 100644
--- a/en/option/component/visual-map-continuous.md
+++ b/en/option/component/visual-map-continuous.md
@@ -1,8 +1,8 @@
-
-{{target: component-visual-map-continuous}}
-
-# visualMap.continuous(Object)
-
+
+{{ target: component-visual-map-continuous }}
+
+# visualMap.continuous(Object)
+
**Continuous visualMap component (visualMapContinuous)**
(See [the introduction to visual Map component (visualMap)](~visualMap))
@@ -10,32 +10,30 @@
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
-
-Used to determine that it is a continuous visualMap component.
-
-
-{{use: partial-component-id(prefix="#")}}
-
-## min(number)
-
+<br>
+
+## type(string) = continuous
+
+Used to determine that it is a continuous visualMap component.
+
+{{ use: partial-component-id(
+ prefix = "#"
+) }}
+
+## min(number)
+
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)
-
+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.
-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)
-
+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
@@ -76,29 +74,24 @@ chart.setOption({visualMap: {range: null}}); // Set range to null then.
```
-`range` gotten by `getOption` is always an `Array`, but not `null` or `undefined`.
-
-
-
-
-## calculable(boolean) = false
-
+`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".
-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
-
+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.
-+ If `false`, the chart view will be updated at the end of the handle dragging.
-
-
-## inverse(boolean) = false
-
++ 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:
@@ -106,56 +99,46 @@ As `inverse` is `false`, the layout direction is the same as [cartesian coordina
+ 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
-
-The decimal precision of label, defaults to be 0 (no decimals).
-
-
-## itemWidth(number) = 20
-
-The width of the main bar of visualMap component.
-
-
-## itemHeight(number) = 140
-
-The height of the main bar of visualMap component.
-
-
-## align(string) = 'auto'
-
+As `inverse` is `true`, the result is opposite.
+
+## precision(number) = 0
+
+The decimal precision of label, defaults to be 0 (no decimals).
+
+## itemWidth(number) = 20
+
+The width of the main bar of visualMap component.
+
+## itemHeight(number) = 140
+
+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'`.
-+ `'bottom'` the handles and labels are at the top, which is valid when `orient` is set as `'vertical'`.
-
-
-## text(Array) = null
-
++ `'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).
-You can understand the order of items in `text` array just by a simple trial. See [visualMap.inverse](~visualMap.inverse).
-
-
-## textGap(number) = 10
-
-The distance between the ends of the main bar and the label, with unit px. See [visualMap-continuous.text](~visualMap-continuous.text)
-
-
-{{ use: partial-visual-map-common(
- visualMapName='visualMap-continuous',
- galleryEditorPath=${galleryEditorPath}
-) }}
-
-
-
-## formatter(string|Function)
-
+You can understand the order of items in `text` array just by a simple trial. See [visualMap.inverse](~visualMap.inverse).
+
+## textGap(number) = 10
+
+The distance between the ends of the main bar and the label, with unit px. See [visualMap-continuous.text](~visualMap-continuous.text)
+
+{{ use: partial-visual-map-common(
+ visualMapName = 'visualMap-continuous'
+) }}
+
+## 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.
@@ -166,5 +149,5 @@ the formatter tool for label.
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 489dd49..c0d0b1b 100644
--- a/en/option/component/visual-map-piecewise.md
+++ b/en/option/component/visual-map-piecewise.md
@@ -1,8 +1,8 @@
-
-{{target: component-visual-map-piecewise}}
-
-# visualMap.piecewise(Object)
-
+
+{{ target: component-visual-map-piecewise }}
+
+# visualMap.piecewise(Object)
+
**Piecewise visualMap component (visualMapPiecewise) **
(Reference to [the introduction of visual Map component (visualMap)](~visualMap))
@@ -19,26 +19,26 @@ Piecewise visualMap component works in one of the three modes:
<br>
-<br>
-
-## type(string) = piecewise
-
-Used to determine it is a piecewise visualMap component.
-
-
-{{use: partial-component-id(prefix="#")}}
-
-## splitNumber(number) = 5
-
+<br>
+
+## type(string) = piecewise
+
+Used to determine it is a piecewise visualMap component.
+
+{{ use: partial-component-id(
+ prefix = "#"
+) }}
+
+## 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).
-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)
-
+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
@@ -58,20 +58,18 @@ pieces: [
]
```
-These visual channel can be customized in each piece:
-
-{{use: partial-visual-map-visual-type}}
-
-
+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.)
-You would realize the sequence in `pieces` by a simple trial. See more detailed rules in [visualMap.inverse](~visualMap.inverse).
-
-
-## categories(Array)
-
+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
@@ -82,50 +80,45 @@ categories: [
[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)
-
+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.
-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)
-
+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.
-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)
-
+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.
-If it is set as `true`, an extra piece labeled with "< min" will show.
-
-## maxOpen(boolean)
-
+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.
-If it is set as `true`, an extra piece labeled with "> max" will show.
-
-
-## selectedMode(string) = 'multiple'
-
+If it is set as `true`, an extra piece labeled with "> max" will show.
+
+## selectedMode(string) = 'multiple'
+
Selected Mode could be:
+ `'multiple'` (multiple selection).
-+ `'single'` (single selection).
-
-
-## inverse(boolean) = false
-
++ `'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).
@@ -140,79 +133,68 @@ Whether to inverse the layout of visualMap component.
+ 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
-
+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.
-+ 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
-
-The width of each graphical element that represents a piece.
-
-
-## itemHeight(number) = 14
-
-The height of each graphical element that represents a piece.
-
-
-## align(string) = 'auto'
-
++ 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
+
+The width of each graphical element that represents a piece.
+
+## itemHeight(number) = 14
+
+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.
-+ `'right'` The graphical elements for pieces are on the right and their labels are on the left.
-
-
-## text(Array) = null
-
++ `'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 rule, that labels will not show when `text` is use, is retained for compatibility with ECharts2.
-
-
-## textGap(number) = 10
-
-The distance between the ends of the graphical elements for pieces and the labels, with unit px. See [visualMap-piecewise.text](~visualMap-piecewise.text)
-
-## showLabel(boolean)
-
-Whether to show label of each item. By default, label will not be shown when [visualMap-piecewise.text](~visualMap-piecewise.text) used, otherwise label will be shown.
-
-## itemGap = 10
-
-Its the distance between each two graphical elements for pieces. The unit is px.
-
-
-## itemSymbol(string) = 'roundRect'
-
-Default symbol (the shape of graphical element). Possible values are:
-
-{{ import: partial-icon-buildin}}
-
+The rule, that labels will not show when `text` is use, is retained for compatibility with ECharts2.
+
+## textGap(number) = 10
+
+The distance between the ends of the graphical elements for pieces and the labels, with unit px. See [visualMap-piecewise.text](~visualMap-piecewise.text)
+
+## showLabel(boolean)
+
+Whether to show label of each item. By default, label will not be shown when [visualMap-piecewise.text](~visualMap-piecewise.text) used, otherwise label will be shown.
+
+## itemGap(*) = 10
+
+Its the distance between each two graphical elements for pieces. The unit is px.
+
+## itemSymbol(string) = 'roundRect'
+
+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).
-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(
- visualMapName='visualMap-piecewise',
- galleryEditorPath=${galleryEditorPath}
-) }}
-
-
-
-## formatter(string|Function)
-
+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(
+ visualMapName = 'visualMap-piecewise'
+) }}
+
+## 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.
@@ -223,5 +205,5 @@ the formatter tool for label.
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 1d26eb4..158b2b6 100644
--- a/en/option/component/visual-map.md
+++ b/en/option/component/visual-map.md
@@ -1,12 +1,12 @@
-
-{{target: component-visual-map}}
-
-# visualMap(Array|Object)
-
-`visualMap` is a type of component for visual encoding, which maps the data to visual channels, including:
-
-{{use: partial-visual-map-visual-type}}
-
+
+{{ target: component-visual-map }}
+
+# visualMap(Array|Object)
+
+`visualMap` is a type of component for visual encoding, which maps the data to visual channels, including:
+
+{{ 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:
@@ -58,22 +58,17 @@ series: {
**✦ The detailed configurations of visualMap are elaborated as follows. ✦**
<br>
-<br>
-
-
-{{import: component-visual-map-continuous}}
-{{import: component-visual-map-piecewise}}
-
-
-
-
-
-
-
-
-
-
-{{target: partial-visual-map-range}}
+<br>
+
+{{ use: component-visual-map-continuous() }}
+
+{{ use: component-visual-map-piecewise() }}
+
+
+
+
+{{ 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:
@@ -198,10 +193,10 @@ About the possible value range of visual value:
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 }}
-
++ `symbol`：
+
+{{ use: partial-icon() }}
+
<br>
---
@@ -245,17 +240,13 @@ visualMap: {
}
```
-[Example](${galleryEditorPath}doc-example/scatter-visualMap-categories&edit=1&reset=1)
-
-
-
-
-
-
-
-
-{{target: partial-visual-map-merge}}
-
+[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:
@@ -287,78 +278,66 @@ 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.
-```
-
-
-
-
-
-
-
-
-{{target: partial-visual-map-inRange-outOfRange}}
-
-##${prefix} inRange(Object)
-
+```
+
+
+
+
+{{ target: partial-visual-map-inRange-outOfRange }}
+
+##${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.)
-Possiable visual channels includes:
-
-{{use: partial-visual-map-visual-type}}
-
----
-
-{{use: partial-visual-map-range(
- rangeType='inRange',
- visualMapName=${visualMapName},
- galleryEditorPath=${galleryEditorPath}
-)}}
-
----
-
-{{use: partial-visual-map-merge(
- componentMainType='visualMap'
-)}}
-
-**Notice:** There is default color `['#f6efa6', '#d88273', '#bf444c']` in `inRange` if you not set `inRange`. If you dont want it, set `inRange: {color: null}` to disable it.
-
-
-##${prefix} outOfRange(Object)
-
+Possiable visual channels includes:
+
+{{ use: partial-visual-map-visual-type() }}
+
+---
+
+{{ use: partial-visual-map-range(
+ rangeType = 'inRange',
+ visualMapName = ${visualMapName}
+) }}
+
+---
+
+{{ use: partial-visual-map-merge(
+ componentMainType = 'visualMap'
+) }}
+
+**Notice:** There is default color `['#f6efa6', '#d88273', '#bf444c']` in `inRange` if you not set `inRange`. If you dont want it, set `inRange: {color: null}` to disable it.
+
+##${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.)
-Possiable visual channels includes:
-
-{{use: partial-visual-map-visual-type}}
-
-{{use: partial-visual-map-range(
- rangeType='outOfRange',
- visualMapName=${visualMapName},
- galleryEditorPath=${galleryEditorPath}
-)}}
-
----
-
-{{use: partial-visual-map-merge(
- componentMainType='visualMap'
-)}}
-
-
-
-
-
-
-
-{{target: partial-visual-map-common}}
-
-
-## show(boolean) = true
-
-Whether to show ${visualMapName} component. If set as `false`, ${visualMapName} component will not show, but it can still perform visual mapping from dataValue to visual channel in chart.
-
-
-## dimension(string)
-
+Possiable visual channels includes:
+
+{{ use: partial-visual-map-visual-type() }}
+
+{{ use: partial-visual-map-range(
+ rangeType = 'outOfRange',
+ visualMapName = ${visualMapName}
+) }}
+
+---
+
+{{ use: partial-visual-map-merge(
+ componentMainType = 'visualMap'
+) }}
+
+
+
+
+{{ target: partial-visual-map-common }}
+
+## show(boolean) = true
+
+Whether to show ${visualMapName} component. If set as `false`, ${visualMapName} component will not show, but it can still perform visual mapping from dataValue to visual channel in chart.
+
+## 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:
@@ -374,89 +353,77 @@ Specify which dimension should be used to fetch dataValue from [series.data](~se
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)
-
+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.
-All series are used by default.
-
-
-## hoverLink(boolean) = true
-
+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.
-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(
- prefix="",
- visualMapName=${visualMapName},
- galleryEditorPath=${galleryEditorPath}
-)}}
-
-
-## controller(Object)
-
-Property `inRange` and `outOfRange` can be set within property `controller`, which means those `inRange` and `outOfRange` are only used on the controller (`visualMap` component itself), but are not used on chart (series). This property is useful in some scenarios when the view of controller needs to be customized in detail.
-
-
-{{use: partial-visual-map-inRange-outOfRange(
- prefix="#",
- visualMapName=${visualMapName},
- galleryEditorPath=${galleryEditorPath}
-)}}
-
-
-
-{{ use: partial-rect-layout(
- componentName="visualMap ",
- defaultZ="4",
- defaultLeft="0",
- defaultRight="auto",
- defaultTop="auto",
- defaultBottom="0"
-) }}
-
-
-## orient(string) = 'vertical'
-
-How to layout the visualMap component, `'horizontal'` or `'vertical'`.
-
-
-## padding(number|Array) = 5
-
-{{ use: partial-padding(componentName=${visualMapName})}}
-
-
-## backgroundColor(Color) = 'rgba(0,0,0,0)'
-
-background color of visualMap component.
-
-
-## borderColor(Color) = '#ccc'
-
-border color of visualMap component.
-
-
-## borderWidth(number) = 0
-
-border width of visualMap component, with unit: px.
-
-
-## color(Array) = ['#bf444c', '#d88273', '#f6efa6']
-
+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(
+ prefix = "",
+ visualMapName = ${visualMapName}
+) }}
+
+## controller(Object)
+
+Property `inRange` and `outOfRange` can be set within property `controller`, which means those `inRange` and `outOfRange` are only used on the controller (`visualMap` component itself), but are not used on chart (series). This property is useful in some scenarios when the view of controller needs to be customized in detail.
+
+{{ use: partial-visual-map-inRange-outOfRange(
+ prefix = "#",
+ visualMapName = ${visualMapName}
+) }}
+
+{{ use: partial-rect-layout(
+ componentName = "visualMap ",
+ defaultZ = "4",
+ defaultLeft = "0",
+ defaultRight = "auto",
+ defaultTop = "auto",
+ defaultBottom = "0"
+) }}
+
+## orient(string) = 'vertical'
+
+How to layout the visualMap component, `'horizontal'` or `'vertical'`.
+
+## padding(number|Array) = 5
+
+{{ use: partial-padding(
+ componentName = ${visualMapName}
+) }}
+
+## backgroundColor(Color) = 'rgba(0,0,0,0)'
+
+background color of visualMap component.
+
+## borderColor(Color) = '#ccc'
+
+border color of visualMap component.
+
+## borderWidth(number) = 0
+
+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.
-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
-
-{{ use:partial-simple-text-style(
- prefix='##',
- name='visualMap ',
- defaultColor='#333'
-) }}
+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(*)
+
+{{ use: partial-simple-text-style(
+ prefix = '##',
+ name = 'visualMap ',
+ defaultColor = '#333'
+) }}
+
diff --git a/en/option/component/x-axis.md b/en/option/component/x-axis.md
index 615dfbd..eaa9659 100644
--- a/en/option/component/x-axis.md
+++ b/en/option/component/x-axis.md
@@ -1,62 +1,58 @@
-
-{{target: component-x-axis}}
-
-# xAxis(Object)
-
-The x axis in cartesian(rectangular) coordinate. Usually a single grid component can place at most 2 x axis, one on the bottom and another on the top. [offset](~xAxis.offset) can be used to avoid overlap when you need to put more than two x axis.
-
-
-{{use: partial-component-id(prefix="#")}}
-
-## show(boolean) = true
-
-Set this to `false` to prevent the axis from showing.
-
-## gridIndex(number) = 0
-
-The index of grid which the x axis belongs to. Defaults to be in the first grid.
-
-## position(string)
-
+
+{{ target: component-x-axis }}
+
+# xAxis(Object)
+
+The x axis in cartesian(rectangular) coordinate. Usually a single grid component can place at most 2 x axis, one on the bottom and another on the top. [offset](~xAxis.offset) can be used to avoid overlap when you need to put more than two x axis.
+
+{{ use: partial-component-id(
+ prefix = "#"
+) }}
+
+## show(boolean) = true
+
+Set this to `false` to prevent the axis from showing.
+
+## gridIndex(number) = 0
+
+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 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
-
-Offset of x axis relative to default position. Useful when multiple x axis has same [position](~xAxis.position) value.
-
-
-## realtimeSort = false
-
+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
+
+Offset of x axis relative to default position. Useful when multiple x axis has same [position](~xAxis.position) value.
+
+## 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'`.
-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
-
+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'`.
-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(
- prefix='#',
- componentType='xAxis',
- axisTypeDefault="'category'",
- hasSplitLineAndArea=true,
- galleryViewPath=${galleryViewPath},
- galleryEditorPath=${galleryEditorPath}
-)}}
-
-
-{{use:partial-z-zlevel(
- prefix="#",
- componentName="x axis",
- defaultZ=0
-) }}
\ No newline at end of file
+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(
+ prefix = '#',
+ componentType = 'xAxis',
+ axisTypeDefault = "'category'",
+ hasSplitLineAndArea = true
+) }}
+
+{{ use: partial-z-zlevel(
+ prefix = "#",
+ componentName = "x axis",
+ defaultZ = 0
+) }}
+
diff --git a/en/option/component/y-axis.md b/en/option/component/y-axis.md
index 88caf49..7dfc455 100644
--- a/en/option/component/y-axis.md
+++ b/en/option/component/y-axis.md
@@ -1,60 +1,58 @@
-
-{{target: component-y-axis}}
-
-# yAxis(Object)
-
-The y axis in cartesian(rectangular) coordinate. Usually a single grid component can place at most 2 y axis, one on the left and another on the right. [offset](~yAxis.offset) can be used to avoid overlap when you need to put more than two y axis.
-
-
-{{use: partial-component-id(prefix="#")}}
-
-## show(boolean) = true
-
-Set this to `false` to prevent the axis from showing.
-
-## gridIndex(number) = 0
-
-The index of grid which the y axis belongs to. Defaults to be in the first grid.
-
-## position(string)
-
+
+{{ target: component-y-axis }}
+
+# yAxis(Object)
+
+The y axis in cartesian(rectangular) coordinate. Usually a single grid component can place at most 2 y axis, one on the left and another on the right. [offset](~yAxis.offset) can be used to avoid overlap when you need to put more than two y axis.
+
+{{ use: partial-component-id(
+ prefix = "#"
+) }}
+
+## show(boolean) = true
+
+Set this to `false` to prevent the axis from showing.
+
+## gridIndex(number) = 0
+
+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 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
-
-Offset of y axis relative to default position. Useful when multiple y axis has same [position](~yAxis.position) value.
-
-
-## realtimeSort = false
-
+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
+
+Offset of y axis relative to default position. Useful when multiple y axis has same [position](~yAxis.position) value.
+
+## 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'`.
-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
-
+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'`.
-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(
- prefix='#',
- componentType='yAxis',
- axisTypeDefault="'value'",
- hasSplitLineAndArea=true,
- galleryViewPath=${galleryViewPath},
- galleryEditorPath=${galleryEditorPath}
-)}}
-
-{{use:partial-z-zlevel(
- prefix="#",
- componentName="y axis",
- defaultZ=0
-) }}
+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(
+ prefix = '#',
+ componentType = 'yAxis',
+ axisTypeDefault = "'value'",
+ hasSplitLineAndArea = true
+) }}
+
+{{ use: partial-z-zlevel(
+ prefix = "#",
+ componentName = "y axis",
+ defaultZ = 0
+) }}
+
diff --git a/en/option/partial/1d-data.md b/en/option/partial/1d-data.md
index 2ce90c5..819d336 100644
--- a/en/option/partial/1d-data.md
+++ b/en/option/partial/1d-data.md
@@ -1,5 +1,6 @@
-{{ target: partial-1d-data-label-formatter }}
-
+
+{{ 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**
@@ -23,13 +24,17 @@ Callback function is in form of:
```js
(params: Object|Array) => string
```
-where `params` is the single dataset needed by formatter, which is formed as:
-{{ use: partial-formatter-params-structure(extra = ${extra}) }}
-
-
-
-{{ target: partial-1d-data-desc }}
-
+where `params` is the single dataset needed by formatter, which is formed as:
+
+{{ use: partial-formatter-params-structure(
+ extra = ${extra}
+) }}
+
+
+
+
+{{ target: partial-1d-data-desc }}
+
Data array of ${name} series, which can be a single data value, like:
```js
[12, 34, 56, 10, 23]
@@ -71,4 +76,5 @@ Each data item can be further customized:
// user-defined special itemStyle that only useful for this data item
itemStyle:{}
}]
-```
\ No newline at end of file
+```
+
diff --git a/en/option/partial/2d-data.md b/en/option/partial/2d-data.md
index 1eada9a..9edf64e 100644
--- a/en/option/partial/2d-data.md
+++ b/en/option/partial/2d-data.md
@@ -1,5 +1,6 @@
-{{ target: partial-2d-data-label-formatter }}
-
+
+{{ 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.
@@ -23,33 +24,40 @@ Callback function is in form of:
```js
(params: Object|Array) => string
```
-where `params` is the single dataset needed by formatter, which is formed as:
-{{ use: partial-formatter-params-structure(extra = ${extra}) }}
-
-
-
-{{ target: partial-seriesLayoutBy }}
-
-## seriesLayoutBy(string) = 'column'
-
+where `params` is the single dataset needed by formatter, which is formed as:
+
+{{ use: partial-formatter-params-structure(
+ extra = ${extra}
+) }}
+
+
+
+
+{{ target: partial-seriesLayoutBy }}
+
+## 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.
-Check this [example](${galleryEditorPath}dataset-series-layout-by).
-
-
-{{ target: partial-datasetIndex }}
-
-## datasetIndex(number) = 0
-
-If [series.data](~series.data) is not specified, and [dataset](~dataset) exists, the series will use `dataset`. `datasetIndex` specifies which dataset will be used.
-
-
-
-{{ target: partial-2d-data-desc }}
-
+Check this [example](${galleryEditorPath}dataset-series-layout-by).
+
+
+
+
+{{ target: partial-datasetIndex }}
+
+## datasetIndex(number) = 0
+
+If [series.data](~series.data) is not specified, and [dataset](~dataset) exists, the series will use `dataset`. `datasetIndex` specifies which dataset will be used.
+
+
+
+
+{{ 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.
@@ -177,4 +185,5 @@ When needing to customize a data item, it can be set as an object, where propert
For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.
-<br><br>
+<br><br>
+
diff --git a/en/option/partial/animation.md b/en/option/partial/animation.md
index dac48af..4ca3046 100644
--- a/en/option/partial/animation.md
+++ b/en/option/partial/animation.md
@@ -1,26 +1,23 @@
-{{ target: partial-animation}}
-
-#${prefix} animation(boolean) = true
-
-Whether to enable animation.
-
-
-#${prefix} animationThreshold(number) = ${defaultAnimationThreshold|default(2000)}
-
-Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
-
-
-{{ use: partial-animation-init(
- prefix=${prefix},
- galleryEditorPath=${galleryEditorPath},
- defaultAnimationDuration=${defaultAnimationDuration},
- defaultAnimationEasing=${defaultAnimationEasing},
- noAnimationDelay=${noAnimationDelay}
-) }}
-
-
-#${prefix} animationDurationUpdate(number|Function) = ${defaultAnimationDurationUpdate|default(300)}
-
+
+{{ target: partial-animation }}
+
+#${prefix} animation(boolean) = true
+
+Whether to enable animation.
+
+#${prefix} animationThreshold(number) = ${defaultAnimationThreshold|default(2000)}
+
+Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
+
+{{ use: partial-animation-init(
+ prefix = ${prefix},
+ defaultAnimationDuration = ${defaultAnimationDuration},
+ defaultAnimationEasing = ${defaultAnimationEasing},
+ noAnimationDelay = ${noAnimationDelay}
+) }}
+
+#${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
@@ -28,15 +25,16 @@ animationDurationUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
-```
-
-#${prefix} animationEasingUpdate(string) = ${defaultAnimationEasingUpdate|default('cubicOut')}
-
+```
+
+#${prefix} animationEasingUpdate(string) = ${defaultAnimationEasingUpdate|default('cubicOut')}
+
Easing method used for animation.
-{{ if: !${noAnimationDelay} }}
-#${prefix} animationDelayUpdate(number|Function) = 0
-
+{{ 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:
@@ -48,12 +46,15 @@ animationDelayUpdate: function (idx) {
```
See [this example](${galleryEditorPath}bar-animation-delay) for more information.
-{{ /if }}
-
-{{ target: partial-animation-init}}
-
-#${prefix} animationDuration(number|Function) = ${defaultAnimationDuration|default(1000)}
-
+{{ /if }}
+
+
+
+
+{{ target: partial-animation-init }}
+
+#${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
@@ -61,16 +62,17 @@ animationDuration: function (idx) {
// delay for later data is larger
return idx * 100;
}
-```
-
-#${prefix} animationEasing(string) = ${defaultAnimationEasing|default('cubicOut')}
-
+```
+
+#${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).
-{{ if: !${noAnimationDelay} }}
-#${prefix} animationDelay(number|Function) = 0
-
+{{ 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:
@@ -82,4 +84,5 @@ animationDelay: function (idx) {
```
See [this example](${galleryEditorPath}bar-animation-delay) for more information.
-{{ /if }}
\ No newline at end of file
+{{ /if }}
+
diff --git a/en/option/partial/area-style.md b/en/option/partial/area-style.md
index e98cd99..af5caa5 100644
--- a/en/option/partial/area-style.md
+++ b/en/option/partial/area-style.md
@@ -1,24 +1,26 @@
-{{target:partial-area-style}}
-
-#${prefix} color(Color)={{ if: !${useColorPalatte} }} ${defaultColor|default('"#000"')} {{ else }}'adaptive'{{ /if }}
-
-Fill color. {{ if: ${useColorPalatte} }} Color is taken from [option.color Palette](~color) by default. {{/if}}
-
-{{ use: partial-color-desc }}
-
+
+{{ target: partial-area-style }}
+
+#${prefix} color(Color) = {{ if: !${useColorPalatte} }} ${defaultColor|default('"#000"')} {{ else }}'adaptive'{{ /if }}
+
+Fill color. {{ if: ${useColorPalatte} }} Color is taken from [option.color Palette](~color) by default. {{ /if }}
+
+{{ 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.
-{{ /if}}
+{{ /if }}
-{{if: ${hasOrigin} }}
-#${prefix|default('##')} origin(string) = 'auto'
-
+{{ 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.
@@ -28,13 +30,12 @@ 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(
- prefix=${prefix},
- defaultOpacity=${defaultOpacity},
- defaultShadowBlur=${defaultShadowBlur},
- defaultShadowColor=${defaultShadowColor}
-) }}
+{{ /if }}
+
+{{ use: partial-style-shadow-opacity(
+ prefix = ${prefix},
+ defaultOpacity = ${defaultOpacity},
+ defaultShadowBlur = ${defaultShadowBlur},
+ defaultShadowColor = ${defaultShadowColor}
+) }}
+
diff --git a/en/option/partial/axisPointer-common.md b/en/option/partial/axisPointer-common.md
index f01b7f5..17fad86 100644
--- a/en/option/partial/axisPointer-common.md
+++ b/en/option/partial/axisPointer-common.md
@@ -1,4 +1,5 @@
-{{ target: partial-axisPointer-introduction}}
+
+{{ target: partial-axisPointer-introduction }}
`axisPointer` is a tool for displaying reference line and axis value under mouse pointer.
@@ -75,11 +76,7 @@ In value axis and time axis, if [snap](~xAxis.axisPointer.snap) is set as true,
-
-
-
-
-{{ target: partial-axisPointer-common}}
+{{ target: partial-axisPointer-common }}
#${prefix} show(boolean) = false
@@ -96,12 +93,9 @@ Options:
+ `'none'` no indicator displayed.
-
{{ use: partial-axisPointer-tooltip-shared(
- prefix=${prefix},
- galleryViewPath=${galleryViewPath},
- galleryEditorPath=${galleryEditorPath}
-)}}
+ prefix = ${prefix}
+) }}
#${prefix} triggerTooltip(boolean) = true
@@ -111,7 +105,6 @@ Whether to trigger tooltip.
current value. When using [axisPointer.handle](xAxisPointer.handle), `value` can be set to define the initail position of axisPointer.
-
#${prefix} status(boolean)
Current status, can be `'show'` 和 `'hide'`.
@@ -124,11 +117,11 @@ A button used to drag axisPointer. This feature is applicable in touch device. S
Set to `true` to use handle.
-##${prefix} icon
+##${prefix} icon(*)
The icon of the handle.
-{{ use: partial-icon-image-path }}
+{{ use: partial-icon-image-path() }}
See the [example of using image](${galleryEditorPath}doc-example/axisPointer-handle-image&edit=1&reset=1)
@@ -148,20 +141,17 @@ The color of the handle.
Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.
-{{ use:partial-style-shadow(
- prefix='#' + ${prefix},
- defaultShadowBlur=3,
- defaultShadowColor='#aaa',
- defaultShadowOffsetX=2
+{{ use: partial-style-shadow(
+ prefix = '#' + ${prefix},
+ defaultShadowBlur = 3,
+ defaultShadowColor = '#aaa',
+ defaultShadowOffsetX = 2
) }}
-
-
-
-{{ target: partial-axisPointer-tooltip-shared}}
+{{ target: partial-axisPointer-tooltip-shared }}
#${prefix} snap(boolean)
@@ -205,9 +195,9 @@ If set as `function`:
`{number}` params.axisIndex: The index of the axis, for example, `0`,`1`, `2`, ...
-{{ use: partial-formatter-params-structure }}
+{{ use: partial-formatter-params-structure() }}
-{{ use: partial-formatter-params-axisPointer }}
+{{ use: partial-formatter-params-axisPointer() }}
**Return:**
@@ -221,60 +211,58 @@ formatter: function (params) {
}
```
-
##${prefix} margin(boolean) = 3
Distance between label and axis.
-
{{ use: partial-simple-text-style(
- prefix='#' + ${prefix},
- defaultColor="'#fff'"
-)}}
+ prefix = '#' + ${prefix},
+ defaultColor = "'#fff'"
+) }}
##${prefix} padding(string|Array) = [5, 7, 5, 7]
-{{ use: partial-padding(componentName='axisPointer')}}
-
+{{ use: partial-padding(
+ componentName = 'axisPointer'
+) }}
-##${prefix}backgroundColor(string) = 'auto'
+##${prefix} backgroundColor(string) = 'auto'
Background color of label, the same as [axis.axisLine.lineStyle.color](~xAxis.axisLine.lineStyle.color) by default.
-##${prefix}borderColor(string) = null
+##${prefix} borderColor(string) = null
Border color of label.
-##${prefix}borderWidth(string) = 0
+##${prefix} borderWidth(string) = 0
Border width of label.
-{{ use:partial-style-shadow(
- prefix='#' + ${prefix},
- defaultShadowBlur=3,
- defaultShadowColor='#aaa'
+{{ use: partial-style-shadow(
+ prefix = '#' + ${prefix},
+ defaultShadowBlur = 3,
+ defaultShadowColor = '#aaa'
) }}
-
#${prefix} lineStyle(Object)
It is valid when [axisPointer.type](~tooltip.axisPointer.type) is `'line'`.
-{{ use: partial-line-style(prefix="#" + ${prefix}, defaultColor="#555", defaultWidth=1, defaultType='solid') }}
-
+{{ use: partial-line-style(
+ prefix = "#" + ${prefix},
+ defaultColor = "#555",
+ defaultWidth = 1,
+ defaultType = 'solid'
+) }}
#${prefix} shadowStyle(Object)
It is valid when [axisPointer.type](~tooltip.axisPointer.type) is `'shadow'`.
-{{ use: partial-area-style(prefix="#" + ${prefix}, defaultColor="'rgba(150,150,150,0.3)") }}
-
-
-
-
-
-
-
+{{ use: partial-area-style(
+ prefix = "#" + ${prefix},
+ defaultColor = "'rgba(150,150,150,0.3)"
+) }}
diff --git a/en/option/partial/barGrid.md b/en/option/partial/barGrid.md
index e805276..f337747 100644
--- a/en/option/partial/barGrid.md
+++ b/en/option/partial/barGrid.md
@@ -1,55 +1,76 @@
-{{target:partial-barGrid}}
-
-## barWidth(number|string) = null
-The width of the bar. Adaptive when not specified.
-
-{{use:partial-barGrid-value-absolute-or-percent}}
-
-{{use:partial-barGrid-share-desc(seriesType=${seriesType})}}
-
-## barMaxWidth(number|string) = null
+
+{{ target: partial-barGrid }}
+
+## barWidth(number|string) = null
+
+The width of the bar. Adaptive when not specified.
+
+{{ use: partial-barGrid-value-absolute-or-percent() }}
+
+{{ use: partial-barGrid-share-desc(
+ seriesType = ${seriesType}
+) }}
+
+## barMaxWidth(number|string) = null
+
The maximum width of the bar.
-Has higer priority than [barWidth](~series-bar.barWidth).
-
-{{use:partial-barGrid-value-absolute-or-percent}}
-
-{{use:partial-barGrid-share-desc(seriesType=${seriesType})}}
-
-## barMinWidth(number|string)
+Has higer priority than [barWidth](~series-bar.barWidth).
+
+{{ use: partial-barGrid-value-absolute-or-percent() }}
+
+{{ use: partial-barGrid-share-desc(
+ seriesType = ${seriesType}
+) }}
+
+## barMinWidth(number|string)
+
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}}
-
-{{use:partial-barGrid-share-desc(seriesType=${seriesType})}}
-
-## barMinHeight(number) = 0
-The minimum width of bar. It could be used to avoid the following situation: the interaction would be affected when the value of some data item is too small.
-
-## barGap(string) = ${barGapDefault|default('30%')}
+Has higer priority than [barWidth](~series-bar.barWidth).
+
+{{ use: partial-barGrid-value-absolute-or-percent() }}
+
+{{ use: partial-barGrid-share-desc(
+ seriesType = ${seriesType}
+) }}
+
+## barMinHeight(number) = 0
+
+The minimum width of bar. It could be used to avoid the following situation: the interaction would be affected when the value of some data item is too small.
+
+## 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.
-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})}}
-
+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:
-~[600x400](${galleryViewPath}doc-example/barGrid-barGap&reset=1&edit=1)
-
-## barCategoryGap(string) = '20%'
-The bar gap of a single series, defaults to be `20%` of the category gap, can be set as a fixed value.
-
-{{use:partial-barGrid-share-desc(seriesType=${seriesType})}}
-
-
-
-
-{{target:partial-barGrid-share-desc}}
-
-In a single coodinate system, this attribute is shared by multiple `'${seriesType}'` series. This attribute should be set on the last `'${seriesType}'` series in the coodinate system, then it will be adopted by all `'${seriesType}'` series in the coordinate system.
-
-
-{{target: partial-barGrid-value-absolute-or-percent}}
-Can be an absolute value like `40` or a percent value like `'60%'`. The percent is based on the calculated category width.
\ No newline at end of file
+~[600x400](${galleryViewPath}doc-example/barGrid-barGap&reset=1&edit=1)
+
+## barCategoryGap(string) = '20%'
+
+The bar gap of a single series, defaults to be `20%` of the category gap, can be set as a fixed value.
+
+{{ use: partial-barGrid-share-desc(
+ seriesType = ${seriesType}
+) }}
+
+
+
+
+{{ target: partial-barGrid-share-desc }}
+
+In a single coodinate system, this attribute is shared by multiple `'${seriesType}'` series. This attribute should be set on the last `'${seriesType}'` series in the coodinate system, then it will be adopted by all `'${seriesType}'` series in the coordinate system.
+
+
+
+
+{{ target: partial-barGrid-value-absolute-or-percent }}
+
+Can be an absolute value like `40` or a percent value like `'60%'`. The percent is based on the calculated category width.
+
diff --git a/en/option/partial/circular-layout.md b/en/option/partial/circular-layout.md
index cfd1a90..ee8a2ac 100644
--- a/en/option/partial/circular-layout.md
+++ b/en/option/partial/circular-layout.md
@@ -1,10 +1,10 @@
-{{target: component-circular-layout}}
-
-{{use: partial-z-zlevel}}
-
-
-## center(Array) = ${defaultCenter|default("['50%', '50%']")}
-
+
+{{ target: component-circular-layout }}
+
+{{ use: partial-z-zlevel() }}
+
+## 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.
@@ -15,14 +15,15 @@ Percentage is supported. When set in percentage, the item is relative to the con
center: [400, 300]
// Set to relative percent
center: ['50%', '50%']
-```
-
-## radius(number|string|Array) = ${defaultRadius}
-
+```
+
+## 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).
{{ 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.
-{{ /if }}
+{{ /if }}
+
diff --git a/en/option/partial/clip.md b/en/option/partial/clip.md
index cdacd71..572327d 100644
--- a/en/option/partial/clip.md
+++ b/en/option/partial/clip.md
@@ -1,9 +1,10 @@
+
{{ target: partial-clip }}
#${prefix|default('#')} clip(boolean) = ${defaultClip|default(true)}
{{ use: partial-version(
- version=${version|default("4.4.0")}
+ version = ${version|default("4.4.0")}
) }}
If clip the overflow on the coordinate system. Clip results varies between series:
@@ -15,4 +16,5 @@ If clip the overflow on the coordinate system. Clip results varies between serie
+ Candlestick: Ignore the elements exceeds the coordinate system.
+ Custom: Clip all the olverflowed.
-All these series have default value `true` except custom series. Set it to `false` if you don't want to clip.
\ No newline at end of file
+All these series have default value `true` except custom series. Set it to `false` if you don't want to clip.
+
diff --git a/en/option/partial/color-desc.md b/en/option/partial/color-desc.md
index 50febe7..b05bf98 100644
--- a/en/option/partial/color-desc.md
+++ b/en/option/partial/color-desc.md
@@ -1,5 +1,6 @@
-{{ target: partial-color-desc }}
-
+
+{{ 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.
@@ -34,4 +35,5 @@
> 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 4c7fb2f..4a2061a 100644
--- a/en/option/partial/component-common-style.md
+++ b/en/option/partial/component-common-style.md
@@ -1,50 +1,53 @@
-
-{{ target: partial-component-common-style }}
-
-#${prefix} backgroundColor(Color) = 'transparent'
-
+
+{{ target: partial-component-common-style }}
+
+#${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'`.
-{{if: ${needShow} }}
+{{ if: ${needShow} }}
**Attention**: Works only if `show: true` is set.
-{{/if}}
-
-#${prefix} borderColor(Color) = '#ccc'
-
+{{ /if }}
+
+#${prefix} borderColor(Color) = '#ccc'
+
Border color of ${componentName}. Support the same color format as backgroundColor.
-{{if: ${needShow} }}
+{{ if: ${needShow} }}
**Attention**: Works only if `show: true` is set.
-{{/if}}
-
-#${prefix} borderWidth(number) = 1
-
+{{ /if }}
+
+#${prefix} borderWidth(number) = 1
+
Border width of ${componentName}.
-{{if: ${needShow} }}
+{{ if: ${needShow} }}
**Attention**: Works only if `show: true` is set.
-{{/if}}
-
-{{if: ${hasBorderRadius} }}
-{{use: partial-border-radius(prefix=${prefix})}}
-{{/if}}
-
-{{ use:partial-style-shadow(prefix=${prefix}, needShow=true) }}
-
-
-
-
-
-
-{{target: partial-border-radius}}
-
-#${prefix} ${propName|default('borderRadius')}(number|Array) = 0
+{{ /if }}
+
+{{ if: ${hasBorderRadius} }}
+{{ use: partial-border-radius(prefix=${prefix}) }}
+{{ /if }}
+
+{{ use: partial-style-shadow(
+ prefix = ${prefix},
+ needShow = true
+) }}
+
+
+
+
+{{ target: partial-border-radius }}
+
+#${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)
-```
\ No newline at end of file
+```
+
diff --git a/en/option/partial/coord-sys.md b/en/option/partial/coord-sys.md
index c5bec21..ccaad2c 100644
--- a/en/option/partial/coord-sys.md
+++ b/en/option/partial/coord-sys.md
@@ -1,93 +1,98 @@
-{{ target: partial-coord-sys }}
-
-## coordinateSystem(string) = ${coordSysDefault}
-
+
+{{ target: partial-coord-sys }}
+
+## coordinateSystem(string) = ${coordSysDefault}
+
The coordinate used in the series, whose options are:
-{{if: ${none} }}
+{{ if: ${none} }}
+ `null` or `'none'`
No coordinate.
-{{/if}}
+{{ /if }}
-{{if: ${cartesian2d} }}
+{{ 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.
-{{/if}}
+{{ /if }}
-{{if: ${polar} }}
+{{ if: ${polar} }}
+ `'polar'`
Use polar coordinates, with [polarIndex](~series-${seriesType}.polarIndex) to assign the corresponding polar coordinate component.
-{{/if}}
+{{ /if }}
-{{if: ${geo} }}
+{{ if: ${geo} }}
+ `'geo'`
Use geographic coordinate, with [geoIndex](~series-${seriesType}.geoIndex) to assign the corresponding geographic coordinate components.
-{{/if}}
+{{ /if }}
-{{if: ${parallel} }}
+{{ if: ${parallel} }}
+ `'parallel'`
Use parallel coordinates, with [parallelIndex](~series-${seriesType}.parallelIndex) to assign the corresponding parallel coordinate components.
-{{/if}}
+{{ /if }}
-{{if: ${none} }}
+{{ if: ${none} }}
+ `'none'`
Do not use coordinate system.
-{{/if}}
-
-{{if: ${cartesian2d} }}
-## xAxisIndex(number) = 0
-
-Index of [x axis](~xAxis) to combine with, which is useful for multiple x axes in one chart.
-
-## yAxisIndex(number) = 0
-
+{{ /if }}
+
+{{ if: ${cartesian2d} }}
+
+## xAxisIndex(number) = 0
+
+Index of [x axis](~xAxis) to combine with, which is useful for multiple x axes in one chart.
+
+## yAxisIndex(number) = 0
+
Index of [y axis](~yAxis) to combine with, which is useful for multiple y axes in one chart.
-{{/if}}
+{{ /if }}
-{{if: ${polar} }}
-## polarIndex(number) = 0
-
+{{ if: ${polar} }}
+
+## polarIndex(number) = 0
+
Index of [polar coordinate](~polar) to combine with, which is useful for multiple polar axes in one chart.
-{{/if}}
-
+{{ /if }}
-{{if: ${geo} }}
-## geoIndex(number) = 0
+{{ if: ${geo} }}
+
+## geoIndex(number) = 0
+
Index of [geographic coordinate](~geo) to combine with, which is useful for multiple geographic axes in one chart.
-{{/if}}
-
+{{ /if }}
-{{if: ${parallel} }}
-## parallelIndex(number) = 0
+{{ if: ${parallel} }}
+
+## parallelIndex(number) = 0
+
Index of [parallel coordinates](~parallel) to combine with, which is useful for multiple parallel axes in one chart.
-{{/if}}
+{{ /if }}
-{{if: ${calendar} }}
-## calendarIndex(number) = 0
-
+{{ if: ${calendar} }}
+
+## calendarIndex(number) = 0
+
Index of [calendar coordinates](~calendar) to combine with, which is useful for multiple calendar coordinates in one chart.
-{{/if}}
-
-
+{{ /if }}
+
diff --git a/en/option/partial/cursor.md b/en/option/partial/cursor.md
index 93d9f85..295cdd6 100644
--- a/en/option/partial/cursor.md
+++ b/en/option/partial/cursor.md
@@ -1,5 +1,7 @@
+
{{ target: partial-cursor }}
#${prefix|default('#')} cursor(string) = 'pointer'
The mouse style when mouse hovers on an element, the same as `cursor` property in `CSS`.
+
diff --git a/en/option/partial/data-id-desc.md b/en/option/partial/data-id-desc.md
index 5f60322..a328f61 100644
--- a/en/option/partial/data-id-desc.md
+++ b/en/option/partial/data-id-desc.md
@@ -1,5 +1,7 @@
-{{ target: partial-data-id-desc }}
-
+
+{{ target: partial-data-id-desc }}
+
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.
\ No newline at end of file
+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/data-name-desc.md b/en/option/partial/data-name-desc.md
index bb11278..35cc5bb 100644
--- a/en/option/partial/data-name-desc.md
+++ b/en/option/partial/data-name-desc.md
@@ -1,3 +1,5 @@
-{{ target: partial-data-name-desc }}
-
-Name of the data item, shown in tooltip or label. It can also be used as id when id doesn't exist.
\ No newline at end of file
+
+{{ target: partial-data-name-desc }}
+
+Name of the data item, shown in tooltip or label. It can also be used as id when id doesn't exist.
+
diff --git a/en/option/partial/data-transform.md b/en/option/partial/data-transform.md
index 7344d22..0fa983e 100644
--- a/en/option/partial/data-transform.md
+++ b/en/option/partial/data-transform.md
@@ -1,8 +1,13 @@
+
{{ target: partial-data-transform-tutorial-ref }}
+
See the tutorial of [datat transform](tutorial.html#Data%20Transform).
+
+
{{ target: partial-data-transform-print }}
+
### print(boolean) = false
When using data transform, we might run into the trouble that the final chart do not display correctly but we do not know where the config is wrong. There is a property `transform.print` might help in such case. (`transform.print` is only available in dev environment).
@@ -23,3 +28,4 @@ option = {
...
}
```
+
diff --git a/en/option/partial/encode-dimensions.md b/en/option/partial/encode-dimensions.md
index 9a7cec9..eb3e83f 100644
--- a/en/option/partial/encode-dimensions.md
+++ b/en/option/partial/encode-dimensions.md
@@ -1,4 +1,5 @@
-{{target:partial-series-encode}}
+
+{{ target: partial-series-encode }}
#${prefix} encode(Object)
@@ -133,7 +134,7 @@ var option = {
-{{target:partial-series-dimensions}}
+{{ target: partial-series-dimensions }}
#${prefix} dimensions(Array)
@@ -188,4 +189,5 @@ Each data item of `dimensions` can be:
+ `time`, time value, see [data](~series.data) to check the format of time value.
+ displayName: `string`, generally used in tooltip for dimension display. If not specified, use `name` by default.
-When `dimensions` is specified, the default `tooltip` will be displayed vertically, which is better to show diemsion names. Otherwise, `tooltip` will displayed only value horizontally.
\ No newline at end of file
+When `dimensions` is specified, the default `tooltip` will be displayed vertically, which is better to show diemsion names. Otherwise, `tooltip` will displayed only value horizontally.
+
diff --git a/en/option/partial/formatter.md b/en/option/partial/formatter.md
index 3306a71..0cef67d 100644
--- a/en/option/partial/formatter.md
+++ b/en/option/partial/formatter.md
@@ -1,4 +1,6 @@
-{{ target: partial-formatter-params-structure }}
+
+{{ target: partial-formatter-params-structure }}
+
```js
{
componentType: 'series',
@@ -32,7 +34,7 @@
dimensionIndex: number,
// Color of data
color: string,
-{{ for: ${extra} as ${obj}, ${name} }}{{ if: ${extra}.hasOwnProperty(${name}) }}
+{{ for: ${extra} as ${obj}, ${name} }}{{ if: ${extra}.hasOwnProperty(${name}) }}
// ${obj.desc}
${name}: ${obj.type},
{{ /if }}{{ /for }}
@@ -72,7 +74,5 @@ dataset: {
We can get values that corresponding to y axis by:
```js
params.value[params.dimensionNames[params.encode.y[0]]]
-```
-
-
-{{ /target }}
\ No newline at end of file
+```
+
diff --git a/en/option/partial/icon.md b/en/option/partial/icon.md
index 9a34b73..ddfaf76 100644
--- a/en/option/partial/icon.md
+++ b/en/option/partial/icon.md
@@ -1,18 +1,17 @@
-{{ target: partial-icon }}
-
-Icon types provided by ECharts includes {{ import: partial-icon-buildin}}
-
-{{ use: partial-icon-image-path }}
-
-
-
-
-
-
-
-
-{{ target: partial-icon-image-path }}
-
+
+{{ target: partial-icon }}
+
+Icon types provided by ECharts includes
+
+{{ use: partial-icon-buildin() }}
+
+{{ use: partial-icon-image-path() }}
+
+
+
+
+{{ 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.
@@ -26,26 +25,27 @@ A `dataURI` example:
```
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
-```
-
-{{ use: partial-icon-path }}
-
-
-
-
-
-
-
-
-{{ target: partial-icon-buildin}}
-`'circle'`, `'rect'`, `'roundRect'`, `'triangle'`, `'diamond'`, `'pin'`, `'arrow'`, `'none'`
-
-
-{{ target: partial-icon-path }}
+```
+
+{{ use: partial-icon-path() }}
+
+
+
+
+{{ target: partial-icon-buildin }}
+
+`'circle'`, `'rect'`, `'roundRect'`, `'triangle'`, `'diamond'`, `'pin'`, `'arrow'`, `'none'`
+
+
+
+
+{{ target: partial-icon-path }}
+
Icons can be set to arbitrary vector path via `'path://'` in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to [SVG PathData](http://www.w3.org/TR/SVG/paths.html#PathData) for more information about the format of the path. You may export vector paths from tools like Adobe
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/id.md b/en/option/partial/id.md
index a8fd57f..36e9c49 100644
--- a/en/option/partial/id.md
+++ b/en/option/partial/id.md
@@ -1,5 +1,7 @@
-{{target: partial-component-id}}
+
+{{ target: partial-component-id }}
#${prefix} id(string)
-Component ID, not specified by default. If specified, it can be used to refer the component in option or API.
\ No newline at end of file
+Component ID, not specified by default. If specified, it can be used to refer the component in option or API.
+
diff --git a/en/option/partial/item-style.md b/en/option/partial/item-style.md
index cb83aa0..910b3e2 100644
--- a/en/option/partial/item-style.md
+++ b/en/option/partial/item-style.md
@@ -1,40 +1,45 @@
-{{target:partial-item-style-desc}}
-Graphic style of ${name}, `emphasis` is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.
-
-{{target:partial-item-style}}
-
-#${prefix} color(Color{{if: ${hasCallback} }}|Function{{/if}})=${defaultColor|default(null)}
-
-${name} color. {{ if: ${useColorPalatte} }} Color is taken from [option.color Palette](~color) by default. {{/if}}
-
-{{ use: partial-color-desc }}
-
+
+{{ target: partial-item-style-desc }}
+
+Graphic style of ${name}, `emphasis` is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.
+
+
+
+
+{{ target: partial-item-style }}
+
+#${prefix} color(Color{{ if: ${hasCallback} }}|Function{{ /if }})(*) = ${defaultColor|default(null)}
+
+${name} color. {{ if: ${useColorPalatte} }} Color is taken from [option.color Palette](~color) by default. {{ /if }}
+
+{{ 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.
-{{ /if}}
-
-#${prefix} borderColor(Color) = ${defaultBorderColor|default('"#000"')}
-
-${name} border color, whose format is similar to that of `color`.
-
-
-#${prefix} borderWidth(number) = ${defaultBorderWidth|default(0)}
-
-${name} border width. No border when it is set to be 0.
-
-#${prefix} borderType(string) = 'solid'
-
-Border type, which can be `'solid'`, `'dashed'`, or `'dotted'`. `'solid'` by default.
-
-{{ use:partial-style-shadow-opacity(
- prefix=${prefix},
- defaultOpacity=${defaultOpacity},
- defaultShadowBlur=${defaultShadowBlur},
- defaultShadowColor=${defaultShadowColor},
- defaultShadowOffsetX=${defaultShadowOffsetX},
- defaultShadowOffsetY=${defaultShadowOffsetY}
-) }}
+{{ /if }}
+
+#${prefix} borderColor(Color) = ${defaultBorderColor|default('"#000"')}
+
+${name} border color, whose format is similar to that of `color`.
+
+#${prefix} borderWidth(number) = ${defaultBorderWidth|default(0)}
+
+${name} border width. No border when it is set to be 0.
+
+#${prefix} borderType(string) = 'solid'
+
+Border type, which can be `'solid'`, `'dashed'`, or `'dotted'`. `'solid'` by default.
+
+{{ use: partial-style-shadow-opacity(
+ prefix = ${prefix},
+ defaultOpacity = ${defaultOpacity},
+ defaultShadowBlur = ${defaultShadowBlur},
+ defaultShadowColor = ${defaultShadowColor},
+ defaultShadowOffsetX = ${defaultShadowOffsetX},
+ defaultShadowOffsetY = ${defaultShadowOffsetY}
+) }}
+
diff --git a/en/option/partial/label.md b/en/option/partial/label.md
index 91f7f1a..e8f08de 100644
--- a/en/option/partial/label.md
+++ b/en/option/partial/label.md
@@ -1,42 +1,57 @@
-{{target:partial-label-desc}}
-
-Text label of ${name}, to explain some data information about graphic item like value, name and so on. `label` is placed under `itemStyle` in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, `label`is taken to be at the same level with `itemStyle`, and has `emphasis` as `itemStyle` does.
-
-
-{{target:partial-label}}
-#${prefix} show(boolean) = ${defaultShowLabel|default("false")}
+
+{{ target: partial-label-desc }}
+
+Text label of ${name}, to explain some data information about graphic item like value, name and so on. `label` is placed under `itemStyle` in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, `label`is taken to be at the same level with `itemStyle`, and has `emphasis` as `itemStyle` does.
+
+
+
+
+{{ target: partial-label }}
+
+#${prefix} show(boolean) = ${defaultShowLabel|default("false")}
+
Whether to show label.
-{{ if: !${noPosition} }}
-#${prefix} position(string|Array) = ${defaultPosition}
-{{use:partial-label-position}}
-{{ /if }}
-
-#${prefix} distance(number) = 5
+{{ if: !${noPosition} }}
+
+#${prefix} position(string|Array) = ${defaultPosition}
+
+{{ use: partial-label-position }}
+{{ /if }}
+
+#${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).
-{{ if: !${noRotate} }}
-#${prefix} rotate(number) = ${defaultRotate}
+{{ 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).
-{{ /if }}
-
-#${prefix} offset(Array)
+{{ /if }}
+
+#${prefix} offset(Array)
+
Whether to move text slightly. For example: `[30, 40]` means move `30` horizontally and move `40` vertically.
-{{ if: ${formatter} }}
-#${prefix} formatter(string|Function)
-{{use:partial-2d-data-label-formatter}}
-{{ elif: ${formatter1d} }}
-#${prefix} formatter(string|Function)
-{{use:partial-1d-data-label-formatter}}
+{{ if: ${formatter} }}
+
+#${prefix} formatter(string|Function)
+
+{{ use: partial-2d-data-label-formatter }}
+{{ elif: ${formatter1d} }}
+
+#${prefix} formatter(string|Function)
+
+{{ use: partial-1d-data-label-formatter }}
{{ /if }}
{{ if: !${noTextStyle} }}
-{{ use:partial-text-style(
+{{ use: partial-text-style(
prefix=${prefix},
noAlign=${noAlign},
noVerticalAlign=${noVerticalAlign},
@@ -46,19 +61,22 @@ Whether to move text slightly. For example: `[30, 40]` means move `30` horizonta
noRich=${noRich},
noBox=${noBox},
enableAutoColor=true
-) }}
+) }}
{{ /if }}
-{{ if: ${ellipsis} }}
-#${prefix} ellipsis(boolean) = true
-
+{{ if: ${ellipsis} }}
+
+#${prefix} ellipsis(boolean) = true
+
When the text is overflow, whether to replace the excess part with apostrophe.
-{{ /if }}
-
-
-
-{{ target:partial-label-position }}
+{{ /if }}
+
+
+
+
+{{ target: partial-label-position }}
+
Label position.
**Followings are the options: **
@@ -88,4 +106,5 @@ Label position.
+ 'insideTopRight'
+ 'insideBottomRight'
-See: [label position](${galleryViewPath}doc-example/label-position).
+See: [label position](${galleryViewPath}doc-example/label-position).
+
diff --git a/en/option/partial/large.md b/en/option/partial/large.md
index f66e067..2bbd3fa 100644
--- a/en/option/partial/large.md
+++ b/en/option/partial/large.md
@@ -1,4 +1,5 @@
-{{target: partial-large }}
+
+{{ target: partial-large }}
#${prefix} large(boolean) = ${defaultLarge|default(false)}
@@ -11,3 +12,4 @@ But when the optimization enabled, the style of single data item can't be custom
#${prefix} largeThreshold(number) = ${defaultLargeThreshold|default(2000)}
The threshold enabling the drawing optimization.
+
diff --git a/en/option/partial/legend-hover-link.md b/en/option/partial/legend-hover-link.md
index 54daa78..3550c30 100644
--- a/en/option/partial/legend-hover-link.md
+++ b/en/option/partial/legend-hover-link.md
@@ -1,3 +1,7 @@
-{{ target: partial-legend-hover-link }}
-## legendHoverLink(boolean) = true
-Whether to enable highlighting chart when [legend](~legend) is being hovered.
+
+{{ target: partial-legend-hover-link }}
+
+## legendHoverLink(boolean) = true
+
+Whether to enable highlighting chart when [legend](~legend) is being hovered.
+
diff --git a/en/option/partial/line-data.md b/en/option/partial/line-data.md
index 91e6844..0f307a6 100644
--- a/en/option/partial/line-data.md
+++ b/en/option/partial/line-data.md
@@ -1,5 +1,6 @@
-{{ target: partial-line-data-desc }}
-
+
+{{ 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: **
@@ -13,4 +14,5 @@ data: [
coord: [20, 30]
}]
]
-```
+```
+
diff --git a/en/option/partial/line-style.md b/en/option/partial/line-style.md
index a4a09e1..4409de3 100644
--- a/en/option/partial/line-style.md
+++ b/en/option/partial/line-style.md
@@ -1,8 +1,9 @@
-{{target:partial-line-style}}
-
-#${prefix} color(Color)={{ if: !${useColorPalatte} }} ${defaultColor|default('"#000"')} {{ else }}'self-adaptive'{{ /if }}
-
-${name}Line color. {{ if: ${useColorPalatte} }} Color is taken from [option.color Palette](~color) by default. {{/if}}
+
+{{ target: partial-line-style }}
+
+#${prefix} color(Color) = {{ if: !${useColorPalatte} }} ${defaultColor|default('"#000"')} {{ else }}'self-adaptive'{{ /if }}
+
+${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:
@@ -10,30 +11,34 @@ Supports callback functions, in the form of:
(params: Object) => Color
```
Input parameters are `seriesIndex`, `dataIndex`, `data`, `value`, and etc. of data item.
-{{ /if}}
-
-{{ use: partial-color-desc }}
-
-#${prefix} width(number) = ${defaultWidth|default(0)}
-
-${name} line width.
-
-#${prefix} type(string) = ${defaultType|default('solid')}
-
+{{ /if }}
+
+{{ use: partial-color-desc() }}
+
+#${prefix} width(number) = ${defaultWidth|default(0)}
+
+${name} line width.
+
+#${prefix} type(string) = ${defaultType|default('solid')}
+
${name} line type.
Options are:
+ `'solid'`
+ `'dashed'`
-+ `'dotted'`
-
-{{ use:partial-style-shadow-opacity(
- prefix=${prefix},
- defaultOpacity=${defaultOpacity},
- defaultShadowBlur=${defaultShadowBlur},
- defaultShadowColor=${defaultShadowColor}
-) }}
-{{ if: ${hasCurveness} }}
-#${prefix} curveness(number) = 0
++ `'dotted'`
+
+{{ use: partial-style-shadow-opacity(
+ prefix = ${prefix},
+ defaultOpacity = ${defaultOpacity},
+ defaultShadowBlur = ${defaultShadowBlur},
+ defaultShadowColor = ${defaultShadowColor}
+) }}
+
+{{ if: ${hasCurveness} }}
+
+#${prefix} curveness(number) = 0
+
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
-{{ /if }}
+{{ /if }}
+
diff --git a/en/option/partial/mark-area.md b/en/option/partial/mark-area.md
index dcc761b..5d47fe8 100644
--- a/en/option/partial/mark-area.md
+++ b/en/option/partial/mark-area.md
@@ -1,28 +1,44 @@
+
{{ target: partial-mark-area }}
#${prefix} markArea(Object)
Used to mark an area in chart. For example, mark a time interval.
-{{ use: partial-silent(prefix="#" + ${prefix}) }}
+{{ use: partial-silent(
+ prefix = "#" + ${prefix}
+) }}
##${prefix} label(Object)
+
Label in mark area.
+
{{ use: partial-label(
- prefix=${prefix} + '##'
+ prefix = ${prefix} + '##'
) }}
+
###${prefix} emphasis(Object)
+
{{ use: partial-label(
- prefix=${prefix} + '###'
+ prefix = ${prefix} + '###'
) }}
##${prefix} itemStyle(Object)
+
Style of the mark area.
-{{ use: partial-item-style(prefix="##" + ${prefix}) }}
+
+{{ use: partial-item-style(
+ prefix = "##" + ${prefix}
+) }}
+
###${prefix} emphasis(Object)
-{{ use: partial-item-style(prefix="###" + ${prefix}) }}
-##${prefix} data
+{{ use: partial-item-style(
+ prefix = "###" + ${prefix}
+) }}
+
+##${prefix} data(*)
+
The scope of the area is defined by `data`, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:
1. Specify the coordinate in screen coordinate system using [x](~series-${seriesType}.markArea.data.0.x), [y](~series-${seriesType}.markArea.data.0.y), where the unit is pixel (e.g., the value is `5`), or percent (e.g., the value is `'35%'`).
@@ -37,12 +53,12 @@ The scope of the area is defined by `data`, which is an array with two item, rep
The priority follows as above if more than one above definition used.
-{{if: ${hasType} }}
+{{ if: ${hasType} }}
{{ /if }}
```
data: [
- {{if: ${hasType} }}
+ {{ if: ${hasType} }}
[
{
name: 'From average to max',
@@ -52,7 +68,7 @@ data: [
type: 'max'
}
],
- {{/if}}{{if: ${hasCoord} }}
+ {{ /if }}{{ if: ${hasCoord} }}
[
{
name: 'Mark area between two points in data coordiantes',
@@ -78,7 +94,7 @@ data: [
coord: ['max', 'max']
}
],
- {{/if}}[
+ {{ /if }}[
{
name: 'Mark area in two screen points',
x: 100,
@@ -92,36 +108,43 @@ data: [
```
###${prefix} 0(Object)
+
Specify the left-top point.
+
{{ use: mark-area-data-item-item(
- name="start",
- prefix="###"+${prefix},
- seriesType=${seriesType},
- hasCoord=${hasCoord},
- hasType=${hasType},
- index=0
+ name = "start",
+ prefix = "###"+${prefix},
+ seriesType = ${seriesType},
+ hasCoord = ${hasCoord},
+ hasType = ${hasType},
+ index = 0
) }}
###${prefix} 1(Object)
+
Specify the right-bottom point.
+
{{ use: mark-area-data-item-item(
- name="end",
- prefix="###"+${prefix},
- seriesType=${seriesType},
- hasCoord=${hasCoord},
- hasType=${hasType},
- index=1
+ name = "end",
+ prefix = "###"+${prefix},
+ seriesType = ${seriesType},
+ hasCoord = ${hasCoord},
+ hasType = ${hasType},
+ index = 1
) }}
{{ use: partial-animation(
- prefix="#" + ${prefix},
- defaultAnimation='false',
- galleryEditorPath=${galleryEditorPath},
+ prefix = "#" + ${prefix},
+ defaultAnimation = 'false'
) }}
+
+
{{ target: mark-area-data-item-item }}
+
{{ if: ${hasType} }}
+
#${prefix} type(string)
Specify this item is on min or max or average value.
@@ -132,52 +155,69 @@ Specify this item is on min or max or average value.
+ `'average'` average value.
{{ /if }}
{{ if: ${hasCoord} }}
+
#${prefix} valueIndex(number)
+
Specify the dimension on which min, max, average are calculated,
available when [type](~series-${seriesType}.markArea.data.type) used.
The value can be `0` (means xAxis, radiusAxis) or `1` (means yAxis, angleAxis),
using the dimension of the first axis by default.
#${prefix} valueDim(string)
+
Specify the dimension on which min, max, average are calculated,
available when [type](~series-${seriesType}.markArea.data.type) used.
The value can be the name of the dimension (for example, the value can be `x`, `angle` in line chart, and `open`, `close` in candlestick).
#${prefix} coord(Array)
+
The format is [start coordinate, end coordinate], where the coordinate system can be `x`, `y` on [cartesian](~grid), or `radius`, `angle` on [polar](~polar).
{{ /if }}
#${prefix} name(string) = '${name}'
+
Name of the marker, which will display as a label.
#${prefix} x(number)
+
x value on screen coordinate system, can be pixel number (like `5`), or percent value (like `'20%'`).
#${prefix} y(number)
+
y value on screen coordinate system, can be pixel number (like `5`), or percent value (like `'20%'`).
#${prefix} value(number)
+
value of the item, not necessary.
#${prefix} itemStyle(Object)
+
Style of the item.
`itemStyle` of start point and end point will be merged together.
+
{{ use: partial-item-style(
- prefix="#"+${prefix}
+ prefix = "#"+${prefix}
) }}
+
##${prefix} emphasis(Object)
+
{{ use: partial-item-style(
- prefix="##"+${prefix}
+ prefix = "##"+${prefix}
) }}
#${prefix} label(Object)
+
Label style of the item.
Label style of start point and end point will be merged together.
+
{{ use: partial-label(
- prefix='#'+${prefix}
+ prefix = '#'+${prefix}
) }}
+
##${prefix} emphasis(Object)
+
{{ use: partial-label(
- prefix='##'+${prefix}
+ prefix = '##'+${prefix}
) }}
+
diff --git a/en/option/partial/mark-line.md b/en/option/partial/mark-line.md
index b381240..2ade5cb 100644
--- a/en/option/partial/mark-line.md
+++ b/en/option/partial/mark-line.md
@@ -1,44 +1,61 @@
-{{ target: partial-mark-line }}
-
-#${prefix} markLine(Object)
-Use a line in the chart to illustrate.
-
-{{ use: partial-silent(prefix="#" + ${prefix}) }}
-
-##${prefix} symbol(string|Array)
-Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See [data.symbol](~series-${seriesType}.markLine.data.0.symbol) for more format information.
-##${prefix} symbolSize(number|Array)
+
+{{ target: partial-mark-line }}
+
+#${prefix} markLine(Object)
+
+Use a line in the chart to illustrate.
+
+{{ use: partial-silent(
+ prefix = "#" + ${prefix}
+) }}
+
+##${prefix} symbol(string|Array)
+
+Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See [data.symbol](~series-${seriesType}.markLine.data.0.symbol) for more format information.
+
+##${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.
-**Attention: ** You cannot assgin width and height seperately as normal `symbolSize`.
-
-##${prefix} precision(number) = 2
-Precision of marking line value, which is useful when displaying average value mark line.
-
-##${prefix} label(Object)
-Mark line text.
-{{ use: mark-line-label(
- prefix=${prefix} + '##'
-) }}
-###${prefix} emphasis(Object)
-{{ use: mark-line-label(
- prefix=${prefix} + '###'
-) }}
-
-##${prefix} lineStyle(Object)
-Mark line style.
-{{ use: partial-line-style(
- prefix="##" + ${prefix},
- defaultColor=null,
- defaultLineType='dashed',
- hasCurveness=true
-) }}
-###${prefix} emphasis(Object)
-{{ use: partial-line-style(
- prefix="###" + ${prefix}
-) }}
-
-##${prefix} data
+**Attention: ** You cannot assgin width and height seperately as normal `symbolSize`.
+
+##${prefix} precision(number) = 2
+
+Precision of marking line value, which is useful when displaying average value mark line.
+
+##${prefix} label(Object)
+
+Mark line text.
+
+{{ use: mark-line-label(
+ prefix = ${prefix} + '##'
+) }}
+
+###${prefix} emphasis(Object)
+
+{{ use: mark-line-label(
+ prefix = ${prefix} + '###'
+) }}
+
+##${prefix} lineStyle(Object)
+
+Mark line style.
+
+{{ use: partial-line-style(
+ prefix = "##" + ${prefix},
+ defaultColor = null,
+ defaultLineType = 'dashed',
+ hasCurveness = true
+) }}
+
+###${prefix} emphasis(Object)
+
+{{ use: partial-line-style(
+ prefix = "###" + ${prefix}
+) }}
+
+##${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.
@@ -51,12 +68,12 @@ Data array of marking line. Every array item can be an array of one or two value
{{ /if }}
When multiple attributes exist, priority is as the above order.
-{{if: ${hasType} }}
+{{ 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`.
{{ /if }}
```
data: [
- {{if: ${hasType} }}{
+ {{ if: ${hasType} }}{
name: 'average line',
// 'average', 'min', and 'max' are supported
type: 'average'
@@ -75,7 +92,7 @@ data: [
type: 'max'
}
],
- {{/if}}{{if: ${hasCoord} }}[
+ {{ /if }}{{ if: ${hasCoord} }}[
{
name: 'Markline between two points',
coord: [10, 20]
@@ -90,7 +107,7 @@ data: [
}, {
type: 'max'
}],
- {{/if}}[
+ {{ /if }}[
{
name: 'Mark line between two points',
x: 100,
@@ -102,40 +119,49 @@ data: [
}
]
]
-```
-
-###${prefix} 0(Object)
-Data of the starting point.
-{{ use: mark-line-data-item-item(
- name="starting point",
- prefix="###"+${prefix},
- seriesType=${seriesType},
- hasCoord=${hasCoord},
- hasType=${hasType},
- index=0
-) }}
-
-###${prefix} 1(Object)
-Data of the ending point.
-{{ use: mark-line-data-item-item(
- name="ending point",
- prefix="###"+${prefix},
- seriesType=${seriesType},
- hasCoord=${hasCoord},
- hasType=${hasType},
- index=1
-) }}
-
-{{ use: partial-animation(
- prefix="#" + ${prefix},
- galleryEditorPath=${galleryEditorPath},
-) }}
-
-
-{{ target: mark-line-label }}
-#${prefix} show(boolean) = ${defaultShowLabel|default(true)}
-Whether show label or not.
-#${prefix} position(string) = 'end'
+```
+
+###${prefix} 0(Object)
+
+Data of the starting point.
+
+{{ use: mark-line-data-item-item(
+ name = "starting point",
+ prefix = "###"+${prefix},
+ seriesType = ${seriesType},
+ hasCoord = ${hasCoord},
+ hasType = ${hasType},
+ index = 0
+) }}
+
+###${prefix} 1(Object)
+
+Data of the ending point.
+
+{{ use: mark-line-data-item-item(
+ name = "ending point",
+ prefix = "###"+${prefix},
+ seriesType = ${seriesType},
+ hasCoord = ${hasCoord},
+ hasType = ${hasType},
+ index = 1
+) }}
+
+{{ use: partial-animation(
+ prefix = "#" + ${prefix}
+) }}
+
+
+
+
+{{ target: mark-line-label }}
+
+#${prefix} show(boolean) = ${defaultShowLabel|default(true)}
+
+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.
@@ -147,19 +173,25 @@ Since version 4.7.0, more label positions are supported: `'start'`, `'middle'`,
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)
-The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.
-
-#${prefix} formatter(string|Function)
-{{ use: partial-1d-data-label-formatter }}
-
-
-
-{{ target: mark-line-data-item-item }}
-{{ if: ${hasType} }}
-#${prefix} type(string)
+~[800x500](${galleryViewPath}bar-markline&reset=1&edit=1)
+
+#${prefix} distance(number|Array)
+
+The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.
+
+#${prefix} formatter(string|Function)
+
+{{ use: partial-1d-data-label-formatter() }}
+
+
+
+
+{{ target: mark-line-data-item-item }}
+
+{{ if: ${hasType} }}
+
+#${prefix} type(string)
+
Special label types, are used to label maximum value, minimum value and so on.
**Options are:**
@@ -168,62 +200,81 @@ Special label types, are used to label maximum value, minimum value and so on.
+ `'average'` average value.
+ `'median'` median value.
{{ /if }}
-{{ if: ${hasCoord} }}
-#${prefix} valueIndex(number)
-Works only when [type](~series-${seriesType}.markLine.data.type) is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be `0` (for xAxis, or radiusAxis), or `1` (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.
-
-#${prefix} valueDim(string)
-Works only when [type](~series-${seriesType}.markLine.data.type) is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like `x`, or `angle` for line charts, or `open`, or `close` for candlestick charts.
-
-#${prefix} coord(Array)
+{{ if: ${hasCoord} }}
+
+#${prefix} valueIndex(number)
+
+Works only when [type](~series-${seriesType}.markLine.data.type) is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be `0` (for xAxis, or radiusAxis), or `1` (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.
+
+#${prefix} valueDim(string)
+
+Works only when [type](~series-${seriesType}.markLine.data.type) is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like `x`, or `angle` for line charts, or `open`, or `close` for candlestick charts.
+
+#${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).
-{{ use: marker-coord-explain }}
-
-{{ /if }}
-
-#${prefix} name(string) = '${name}'
-Name of the marker, which will display as a label.
-
-#${prefix} x(number)
-X position according to container, in pixel.
-
-#${prefix} y(number)
-Y position according to container, in pixel.
-
-#${prefix} value(number)
-Label value, which can be ignored.
-
-{{ use:partial-symbol(
- prefix=${prefix},
- name=${index} === 0 ? 'starting point' : 'ending point'
-) }}
-
-#${prefix} lineStyle(Object)
-Line style of this data item, which will be merged with `lineStyle` of starting point and ending point.
-{{ use: partial-line-style(
- prefix="#"+${prefix},
- hasCurveness=true
-) }}
-##${prefix} emphasis(Object)
-{{ use: partial-line-style(
- prefix="##"+${prefix},
- hasCurveness=true
-) }}
-
-#${prefix} label(Object)
-Label of this data item, which will be merged with `label` of starting point and ending point.
-{{ use: mark-line-label(
- prefix='#'+${prefix}
-) }}
-
-#${prefix} emphasis(Object)
-##${prefix} lineStyle(Object)
-{{ use: partial-line-style(
- prefix="##"+${prefix},
- hasCurveness=true
-) }}
-##${prefix} label(Object)
-{{ use: mark-line-label(
- prefix='##'+${prefix}
-) }}
+{{ use: marker-coord-explain }}
+
+{{ /if }}
+
+#${prefix} name(string) = '${name}'
+
+Name of the marker, which will display as a label.
+
+#${prefix} x(number)
+
+X position according to container, in pixel.
+
+#${prefix} y(number)
+
+Y position according to container, in pixel.
+
+#${prefix} value(number)
+
+Label value, which can be ignored.
+
+{{ use: partial-symbol(
+ prefix = ${prefix},
+ name = ${index} === 0 ? 'starting point' : 'ending point'
+) }}
+
+#${prefix} lineStyle(Object)
+
+Line style of this data item, which will be merged with `lineStyle` of starting point and ending point.
+
+{{ use: partial-line-style(
+ prefix = "#"+${prefix},
+ hasCurveness = true
+) }}
+
+##${prefix} emphasis(Object)
+
+{{ use: partial-line-style(
+ prefix = "##"+${prefix},
+ hasCurveness = true
+) }}
+
+#${prefix} label(Object)
+
+Label of this data item, which will be merged with `label` of starting point and ending point.
+
+{{ use: mark-line-label(
+ prefix = '#'+${prefix}
+) }}
+
+#${prefix} emphasis(Object)
+
+##${prefix} lineStyle(Object)
+
+{{ use: partial-line-style(
+ prefix = "##"+${prefix},
+ hasCurveness = true
+) }}
+
+##${prefix} label(Object)
+
+{{ use: mark-line-label(
+ prefix = '##'+${prefix}
+) }}
+
diff --git a/en/option/partial/mark-point.md b/en/option/partial/mark-point.md
index dd34e43..9ebc67b 100644
--- a/en/option/partial/mark-point.md
+++ b/en/option/partial/mark-point.md
@@ -1,42 +1,57 @@
-{{ target: partial-mark-point }}
-
-#${prefix} markPoint(Object)
-Mark point in a chart.
-
-{{ use:partial-symbol(
- name=${name},
- seriesType=${seriesType},
- defaultSymbol="'pin'",
- defaultSymbolSize=50,
- prefix="#" + ${prefix},
- hasCallback=true
-) }}
-
-{{ use: partial-silent(prefix="#" + ${prefix}) }}
-
-##${prefix} label(Object)
-Label of mark point.
-{{use:partial-label(
- prefix="##" + ${prefix},
- defaultShowLabel=true,
- defaultPosition="'inside'",
- formatter=true
-)}}
-###${prefix} emphasis(Object)
-{{use:partial-label(
- prefix="###" + ${prefix},
- formatter=true
-)}}
-
-##${prefix} itemStyle(Object)
-Mark point style.
-{{use:partial-item-style(
- prefix="##" + ${prefix}
-)}}
-###${prefix} emphasis(Object)
-{{use:partial-item-style(prefix="###" + ${prefix})}}
-
-##${prefix} data(Array)
+
+{{ target: partial-mark-point }}
+
+#${prefix} markPoint(Object)
+
+Mark point in a chart.
+
+{{ use: partial-symbol(
+ name = ${name},
+ seriesType = ${seriesType},
+ defaultSymbol = "'pin'",
+ defaultSymbolSize = 50,
+ prefix = "#" + ${prefix},
+ hasCallback = true
+) }}
+
+{{ use: partial-silent(
+ prefix = "#" + ${prefix}
+) }}
+
+##${prefix} label(Object)
+
+Label of mark point.
+
+{{ use: partial-label(
+ prefix = "##" + ${prefix},
+ defaultShowLabel = true,
+ defaultPosition = "'inside'",
+ formatter = true
+) }}
+
+###${prefix} emphasis(Object)
+
+{{ use: partial-label(
+ prefix = "###" + ${prefix},
+ formatter = true
+) }}
+
+##${prefix} itemStyle(Object)
+
+Mark point style.
+
+{{ use: partial-item-style(
+ prefix = "##" + ${prefix}
+) }}
+
+###${prefix} emphasis(Object)
+
+{{ use: partial-item-style(
+ prefix = "###" + ${prefix}
+) }}
+
+##${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.
{{ if: ${hasCoord} }}
@@ -48,11 +63,11 @@ When multiple attributes exist, priority is as the above order.
**For example: **
```js
-data: [{{if: ${hasType} }}
+data: [{{ if: ${hasType} }}
{
name: 'maximum',
type: 'max'
- }, {{/if}}{{if: ${hasCoord} }}
+ }, {{ /if }}{{ if: ${hasCoord} }}
{
name: 'coordinate',
coord: [10, 20]
@@ -60,18 +75,22 @@ data: [{{if: ${hasType} }}
name: 'fixed x position',
yAxis: 10,
x: '90%'
- }, {{/if}}
+ }, {{ /if }}
{
name: 'screen coordinate',
x: 100,
y: 100
}
]
-```
-###${prefix} name(string) = ''
+```
+
+###${prefix} name(string) = ''
+
Mark point name.
-{{ if: ${hasType} }}
-###${prefix} type(string)
+{{ if: ${hasType} }}
+
+###${prefix} type(string)
+
Special label types, are used to label maximum value, minimum value and so on.
**Options are:**
@@ -79,52 +98,69 @@ Special label types, are used to label maximum value, minimum value and so on.
+ `'max'` minimum value.
+ `'average'` average value.
{{ /if }}
-{{ if: ${hasCoord} }}
-###${prefix} valueIndex(number)
-Available when using [type](~series-${seriesType}.markPoint.data.type) it is used to assign maximum value and minimum value in dimensions, it could be `0` (xAxis, radiusAxis), `1` (yAxis, angleAxis), and use the first value axis dimension by default.
-
-
-###${prefix} valueDim(string)
-Works only when [type](~series-${seriesType}.markPoint.data.type) is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like `x`, or `angle` for line charts, or `open`, or `close` for candlestick charts.
-
-###${prefix} coord(Array)
+{{ if: ${hasCoord} }}
+
+###${prefix} valueIndex(number)
+
+Available when using [type](~series-${seriesType}.markPoint.data.type) it is used to assign maximum value and minimum value in dimensions, it could be `0` (xAxis, radiusAxis), `1` (yAxis, angleAxis), and use the first value axis dimension by default.
+
+###${prefix} valueDim(string)
+
+Works only when [type](~series-${seriesType}.markPoint.data.type) is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like `x`, or `angle` for line charts, or `open`, or `close` for candlestick charts.
+
+###${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).
-{{ use: marker-coord-explain }}
-
-{{ /if }}
-###${prefix} x(number)
-X position according to container, in pixel.
-
-###${prefix} y(number)
-Y position according to container, in pixel.
-
-###${prefix} value(number)
-Label value, which can be ignored.
-
-{{ use:partial-symbol(
- prefix="##" + ${prefix},
- seriesType=${seriesType},
- name=${name}
-) }}
-
-###${prefix} itemStyle(Object)
-Mark point style.
-{{ use: partial-item-style(prefix="###" + ${prefix}) }}
-####${prefix} emphasis(Object)
-{{ use: partial-item-style(prefix="####" + ${prefix}) }}
-
-###${prefix} label(Object)
-{{ use: partial-label(
- prefix=${prefix} + '###'
-) }}
-####${prefix} emphasis(Object)
-{{ use: partial-label(
- prefix=${prefix} + '####'
-) }}
-
-
-{{ use: partial-animation(
- prefix="#" + ${prefix},
- galleryEditorPath=${galleryEditorPath},
-) }}
+{{ use: marker-coord-explain }}
+
+{{ /if }}
+
+###${prefix} x(number)
+
+X position according to container, in pixel.
+
+###${prefix} y(number)
+
+Y position according to container, in pixel.
+
+###${prefix} value(number)
+
+Label value, which can be ignored.
+
+{{ use: partial-symbol(
+ prefix = "##" + ${prefix},
+ seriesType = ${seriesType},
+ name = ${name}
+) }}
+
+###${prefix} itemStyle(Object)
+
+Mark point style.
+
+{{ use: partial-item-style(
+ prefix = "###" + ${prefix}
+) }}
+
+####${prefix} emphasis(Object)
+
+{{ use: partial-item-style(
+ prefix = "####" + ${prefix}
+) }}
+
+###${prefix} label(Object)
+
+{{ use: partial-label(
+ prefix = ${prefix} + '###'
+) }}
+
+####${prefix} emphasis(Object)
+
+{{ use: partial-label(
+ prefix = ${prefix} + '####'
+) }}
+
+{{ use: partial-animation(
+ prefix = "#" + ${prefix}
+) }}
+
diff --git a/en/option/partial/marker.md b/en/option/partial/marker.md
index 6418310..e78ba18 100644
--- a/en/option/partial/marker.md
+++ b/en/option/partial/marker.md
@@ -1,28 +1,29 @@
+
{{ target: partial-marker }}
+{{ use: partial-mark-point(
+ prefix = ${prefix},
+ seriesType = ${seriesType},
+ hasCoord = ${hasCoord},
+ hasType = ${hasType},
+ name = ${name}
+) }}
+
+prefix
-{{use: partial-mark-point(
- prefix=${prefix},
- seriesType=${seriesType},
- hasCoord=${hasCoord},
- hasType=${hasType},
- galleryEditorPath=${galleryEditorPath},
- name=${name}
-)}}prefix
-{{use: partial-mark-line(
- prefix=${prefix},
- seriesType=${seriesType},
- hasCoord=${hasCoord},
- hasType=${hasType},
- galleryEditorPath=${galleryEditorPath}
-)}}
-{{use: partial-mark-area(
- prefix=${prefix},
- seriesType=${seriesType},
- hasCoord=${hasCoord},
- hasType=${hasType},
- galleryEditorPath=${galleryEditorPath}
-)}}
+{{ use: partial-mark-line(
+ prefix = ${prefix},
+ seriesType = ${seriesType},
+ hasCoord = ${hasCoord},
+ hasType = ${hasType}
+) }}
+
+{{ use: partial-mark-area(
+ prefix = ${prefix},
+ seriesType = ${seriesType},
+ hasCoord = ${hasCoord},
+ hasType = ${hasType}
+) }}
@@ -53,4 +54,5 @@ For example:
}
}
}
-```
\ No newline at end of file
+```
+
diff --git a/en/option/partial/padding.md b/en/option/partial/padding.md
index 3433c6c..8b99af6 100644
--- a/en/option/partial/padding.md
+++ b/en/option/partial/padding.md
@@ -1,5 +1,6 @@
-{{target: partial-padding}}
-
+
+{{ 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:
@@ -15,4 +16,5 @@ padding: [
5, // down
10, // left
]
-```
\ No newline at end of file
+```
+
diff --git a/en/option/partial/parallel.md b/en/option/partial/parallel.md
index 5f462ff..a9a52d1 100644
--- a/en/option/partial/parallel.md
+++ b/en/option/partial/parallel.md
@@ -1,15 +1,16 @@
-{{target: partial-parallel-introduce}}
-
+
+{{ target: partial-parallel-introduce }}
+
<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](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)
@@ -104,10 +105,10 @@ Three components are involved here: [parallel](~parallel), [parallelAxis](~paral
---
-**Notes and Best Practices**
-
-{{use: partial-parallel-axis-default}}
-
+**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.
@@ -116,12 +117,15 @@ It is suggested to set [series-parallel.lineStyle.width](~series-parallel.lineSt
---
-**Display High-Dimension Data**
-
-{{use: partial-parallel-high-dim (galleryViewPath=${galleryViewPath})}}
-
-
-{{target: partial-parallel-data-example}}
+**Display High-Dimension Data**
+
+{{ use: partial-parallel-high-dim() }}
+
+
+
+
+{{ target: partial-parallel-data-example }}
+
For example, [series-parallel.data](~series-parallel.data) is the following data:
```javascript
@@ -137,21 +141,23 @@ For example, [series-parallel.data](~series-parallel.data) is the following data
...
]
```
-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".
-
-
-
-
-{{target: partial-parallel-axis-default}}
-
-When configuring multiple [parallelAxis](~parallelAxis), there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under [parallel.parallelAxisDefault](~parallel.parallelAxisDefault). Before initializing axis, configurations in [parallel.parallelAxisDefault](~parallel.parallelAxisDefault) will be merged into [parallelAxis](~parallelAxis) to generate the final axis configuration.
-
-
-
-{{target: partial-parallel-high-dim}}
-
+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".
+
+
+
+
+{{ target: partial-parallel-axis-default }}
+
+When configuring multiple [parallelAxis](~parallelAxis), there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under [parallel.parallelAxisDefault](~parallel.parallelAxisDefault). Before initializing axis, configurations in [parallel.parallelAxisDefault](~parallel.parallelAxisDefault) will be merged into [parallelAxis](~parallelAxis) to generate the final axis configuration.
+
+
+
+
+{{ 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:
-~[600x460](${galleryViewPath}map-parallel-prices&edit=1&reset=1)
+~[600x460](${galleryViewPath}map-parallel-prices&edit=1&reset=1)
... 61609 lines suppressed ...
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org