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/09 04:30:27 UTC
[incubator-echarts-doc] branch next updated: optimize language
patching, patch args of use block. sync uicontrol markup
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 6f226b3 optimize language patching, patch args of use block. sync uicontrol markup
6f226b3 is described below
commit 6f226b33316d7ef009952ae8e8cc8b87760fac18
Author: pissang <bm...@gmail.com>
AuthorDate: Wed Sep 9 12:26:50 2020 +0800
optimize language patching, patch args of use block. sync uicontrol markup
---
en/option/component/angle-axis.md | 4 +
en/option/component/axis-common.md | 87 +++++++++++++++-
en/option/component/axisPointer.md | 2 +
en/option/component/calendar.md | 36 +++++++
en/option/component/data-zoom-inside.md | 10 ++
en/option/component/data-zoom-slider.md | 20 ++++
en/option/component/data-zoom.md | 16 +++
en/option/component/grid.md | 4 +
en/option/component/legend.md | 45 +++++++-
en/option/component/parallel-axis.md | 12 +++
en/option/component/parallel.md | 12 +++
en/option/component/radar.md | 14 +++
en/option/component/single-axis.md | 2 +-
en/option/component/timeline.md | 71 ++++++++++++-
en/option/component/title.md | 12 +++
en/option/component/toolbox.md | 44 ++++++++
en/option/component/tooltip.md | 20 ++++
en/option/component/visual-map-continuous.md | 20 ++++
en/option/component/visual-map-piecewise.md | 28 +++++
en/option/component/x-axis.md | 6 ++
en/option/component/y-axis.md | 6 ++
en/option/partial/animation.md | 10 ++
en/option/partial/area-style.md | 2 +
en/option/partial/axisPointer-common.md | 20 ++++
en/option/partial/barGrid.md | 4 +
en/option/partial/circular-layout.md | 4 +
en/option/partial/clip.md | 2 +
en/option/partial/component-common-style.md | 8 ++
en/option/partial/cursor.md | 2 +
en/option/partial/item-style.md | 8 ++
en/option/partial/label.md | 10 ++
en/option/partial/large.md | 4 +
en/option/partial/legend-hover-link.md | 2 +
en/option/partial/line-style.md | 8 ++
en/option/partial/mark-area.md | 8 ++
en/option/partial/mark-line.md | 8 ++
en/option/partial/mark-point.md | 15 ++-
en/option/partial/padding.md | 2 +
en/option/partial/roam.md | 2 +
en/option/partial/selected-mode.md | 2 +
en/option/partial/show.md | 2 +
en/option/partial/silent.md | 2 +
en/option/partial/style-shadow-opacity.md | 10 ++
en/option/partial/symbol.md | 10 ++
en/option/partial/text-style.md | 48 +++++++++
en/option/partial/tooltip-common.md | 12 +++
en/option/series/bar.md | 12 +++
en/option/series/boxplot.md | 5 +-
en/option/series/candlestick.md | 15 ++-
en/option/series/custom.md | 2 +-
en/option/series/effectScatter.md | 16 ++-
en/option/series/funnel.md | 19 +++-
en/option/series/gauge.md | 58 +++++++++++
en/option/series/graph.md | 35 ++++++-
en/option/series/heatmap.md | 3 +-
en/option/series/line.md | 18 +++-
en/option/series/lines.md | 3 +-
en/option/series/map.md | 5 +-
en/option/series/parallel.md | 8 ++
en/option/series/pictorialBar.md | 25 ++++-
en/option/series/pie.md | 43 +++++++-
en/option/series/radar.md | 1 -
en/option/series/sankey.md | 16 +++
en/option/series/scatter.md | 6 +-
en/option/series/sunburst.md | 14 +++
en/option/series/tree.md | 21 +++-
en/option/series/treemap.md | 38 +++++++
tool/patchLanguage.js | 148 ++++++++++++++++-----------
zh/option/component/graphic.md | 5 +-
69 files changed, 1084 insertions(+), 108 deletions(-)
diff --git a/en/option/component/angle-axis.md b/en/option/component/angle-axis.md
index 59e99f5..e81562f 100644
--- a/en/option/component/angle-axis.md
+++ b/en/option/component/angle-axis.md
@@ -15,6 +15,8 @@ The index of angle axis in Polar Coordinate. The first axis is used by default.
## startAngle(number) = 90
+<ExampleUIControlAngle default="90" min="-360" max="360" step="1" />
+
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.
@@ -23,6 +25,8 @@ The following shows an example with startAngle of 45 deg.
## clockwise(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether the positive position of axis is clockwise. True for clockwise by default.
The following shows an example with clockwise as `false`.
diff --git a/en/option/component/axis-common.md b/en/option/component/axis-common.md
index 6008043..6f16d52 100644
--- a/en/option/component/axis-common.md
+++ b/en/option/component/axis-common.md
@@ -31,11 +31,15 @@ Settings related to axis line.
##${prefix} show(boolean) = ${defaultShow|default(true)}
+<ExampleUIControlBoolean default="true" />
+
Set this to `false` to prevent the axis line from showing.
{{ if: ${componentType} == 'xAxis' || ${componentType} == 'yAxis' }}
##${prefix} onZero(boolean) = true
+<ExampleUIControlBoolean default="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)
@@ -45,14 +49,20 @@ When mutiple axes exists, this option can be used to specify which axis can be "
##${prefix} symbol(string|Array) = 'none'
+<ExampleUIControlIcon default="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]
+<ExampleUIControlVector default="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]
+<ExampleUIControlVector default="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)
@@ -76,12 +86,16 @@ Settings related to axis label.
{{ if: !${hideShow} }}
##${prefix} show(boolean) = ${defaultShow|default(true)}
+<ExampleUIControlBoolean default="${defaultShow|default(true)}" />
+
Set this to `false` to prevent the axis label from appearing.
{{ /if }}
{{ if: ${hasLabelInterval|default(true)} }}
##${prefix} interval(number|Function) = 'auto'
+<ExampleUIControlNumber min="0" step="1" />
+
{{ use: partial-axis-interval(
name = "Axis label",
isAxisLabel = true,
@@ -92,12 +106,16 @@ Set this to `false` to prevent the axis label from appearing.
{{ if: ${hasInside|default(true)} }}
##${prefix} inside(boolean) = false
+<ExampleUIControlBoolean />
+
Set this to `true` so the axis labels face the `inside` direction.
{{ /if }}
{{ if: ${componentType} !== 'angleAxis' }}
##${prefix} rotate(number) = 0
+<ExampleUIControlAngle min="-90" max="90" step="1" />
+
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.
@@ -105,6 +123,8 @@ Rotation degree is from -90 to 90.
##${prefix} margin(number) = 8
+<ExampleUIControlNumber default="8" step="0.5" />
+
The margin between the axis label and the axis line.
##${prefix} formatter(string|Function) = null
@@ -113,10 +133,14 @@ The margin between the axis label and the axis line.
##${prefix} showMinLabel(boolean) = null
+<ExampleUIControlBoolean />
+
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
+<ExampleUIControlBoolean />
+
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(
@@ -128,6 +152,8 @@ Whether to show the label of the max tick. Optional values: `true`, `false`, `nu
##${prefix} color(Color|Function)
+<ExampleUIControlColor />
+
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
@@ -154,11 +180,15 @@ Settings related to axis tick.
##${prefix} show(boolean) = ${defaultShow|default(true)}
+<ExampleUIControlBoolean default="${defaultShow|default(true)}" />
+
Set this to `false` to prevent the axis tick from showing.
{{ if: ${hasAlignWithLabel|default(true)} }}
##${prefix} alignWithLabel(boolean) = false
+<ExampleUIControlBoolean default="false" />
+
Align axis tick with label, which is available only when `boundaryGap` is set to be `true` in category axis. See the following picture:
@@ -167,6 +197,8 @@ Align axis tick with label, which is available only when `boundaryGap` is set to
{{ if: ${hasLabelInterval|default(true)} }}
##${prefix} interval(number|Function) = 'auto'
+<ExampleUIControlNumber min="0" step="1" />
+
{{ use: partial-axis-interval(
name = "axisTick",
componentType = ${componentType}
@@ -176,11 +208,15 @@ Align axis tick with label, which is available only when `boundaryGap` is set to
{{ if: ${hasInside|default(true)} }}
##${prefix} inside(boolean) = false
+<ExampleUIControlBoolean />
+
Set this to `true` so the axis labels face the `inside` direction.
{{ /if }}
##${prefix} length(number) = 5
+<ExampleUIControlNumber min="0" step="0.5" default="5" />
+
The length of the axis tick.
##${prefix} lineStyle(Object)
@@ -189,7 +225,6 @@ Line style of axis ticks.
{{ use: partial-line-style(
prefix = '##' + ${prefix},
- defaultColor = "'#333'",
defaultWidth = 1,
defaultType = "'solid'",
name = "axisTick"
@@ -225,14 +260,20 @@ Examples:
##${prefix} show(boolean) = ${defaultShow|default(false)}
+<ExampleUIControlBoolean default="${defaultShow|default(true)}" />
+
If show minor ticks.
##${prefix} splitNumber(number) = 5
+<ExampleUIControlNumber min="1" step="1" default="5" />
+
Number of interval splited by minor ticks.
##${prefix} length(number) = 3
+<ExampleUIControlNumber min="0" step="0.5" default="3" />
+
Length of minor ticks lines。
##${prefix} lineStyle(Object)
@@ -248,6 +289,8 @@ Length of minor ticks lines。
###${prefix} color(Color)
+<ExampleUIControlColor />
+
Style configuration of minor ticks lines [axisLine.lineStyle.color](~${componentType}.axisLine.lineStyle.color)。
@@ -260,12 +303,16 @@ Split line of axis in [grid](~grid) area.
##${prefix} show(boolean) = ${defaultShow|default(true)}
+<ExampleUIControlBoolean default="${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'
+<ExampleUIControlNumber min="0" step="1" />
+
{{ use: partial-axis-interval(
name = "Axis splitLine",
componentType = ${componentType}
@@ -286,6 +333,8 @@ Set this to `false` to prevent the splitLine from showing.
###${prefix} color(Array|string) = ['#ccc']
+<ExampleUIControlColor />
+
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.
@@ -314,6 +363,8 @@ Minor split lines of axis in the [grid](~grid) area。It will align to the [mino
##${prefix} show(boolean) = ${defaultShow|default(false)}
+<ExampleUIControlBoolean default="${defaultShow|default(true)}" />
+
If show minor split lines.
##${prefix} lineStyle(Object)
@@ -337,6 +388,8 @@ Split area of axis in [grid](~grid) area, not shown by default.
{{ if: ${hasLabelInterval|default(true)} }}
##${prefix} interval(number|Function) = 'auto'
+<ExampleUIControlNumber min="0" step="1" />
+
{{ use: partial-axis-interval(
name = "Axis splitArea",
componentType = ${componentType}
@@ -345,6 +398,8 @@ Split area of axis in [grid](~grid) area, not shown by default.
##${prefix} show(boolean) = ${defaultShow|default(false)}
+<ExampleUIControlBoolean default="${defaultShow|default(true)}" />
+
Set this to `true` to show the splitArea.
##${prefix} areaStyle(Object)
@@ -392,10 +447,14 @@ Option:
{{ if: ${componentType} !== 'angleAxis' }}
#${prefix} name(string)
+<ExampleUIControlText />
+
Name of axis.
#${prefix} nameLocation(string) = 'end'
+<ExampleUIControlEnum options="start,middle,end" default="end" />
+
Location of axis name.
**Options: **
@@ -416,24 +475,34 @@ Text style of axis name.
##${prefix} color(Color)
+<ExampleUIControlColor />
+
Color of axis name uses [axisLine.lineStyle.color](~${componentType}.axisLine.lineStyle.color) by default.
#${prefix} nameGap(number) = 15
+<ExampleUIControlNumber step="0.5" default="15" />
+
Gap between axis name and axis line.
#${prefix} nameRotate(number) = null
+<ExampleUIControlAngle min="-360" max="360" step="1" />
+
Rotation of axis name.
#${prefix} inverse(boolean) = false
+<ExampleUIControlBoolean />
+
Set this to `true` to invert the axis.
This is a new option available from Echarts 3 and newer.
{{ /if }}
#${prefix} boundaryGap(boolean|Array)
+<ExampleUIControlBoolean />
+
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*.
@@ -446,6 +515,8 @@ boundaryGap: ['20%', '20%']
#${prefix} min(number|string|Function) = null
+<ExampleUIControlNumber />
+
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.
@@ -465,6 +536,8 @@ min: function (value) {
#${prefix} max(number|string|Function) = null
+<ExampleUIControlNumber />
+
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.
@@ -484,6 +557,8 @@ max: function (value) {
#${prefix} scale(boolean) = false
+<ExampleUIControlBoolean />
+
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.
@@ -492,12 +567,16 @@ This configuration item is unavailable when the [min](~${componentType}.min) and
#${prefix} splitNumber(number) = 5
+<ExampleUIControlNumber min="1" step="1" default="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
+<ExampleUIControlNumber />
+
Minimum gap between split lines.
For example, it can be set to be `1` to make sure axis label is show as integer.
@@ -512,6 +591,8 @@ It is available only for axis of [type](~${componentType}.type) 'value' or 'time
#${prefix} maxInterval(number)
+<ExampleUIControlNumber />
+
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.
@@ -526,6 +607,8 @@ It is available only for axis of [type](~${componentType}.type) 'value' or 'time
#${prefix} interval(number)
+<ExampleUIControlNumber />
+
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.
@@ -534,6 +617,8 @@ This is unavailable for category axis. Timestamp should be passed for [type](~${
#${prefix} logBase(number) = 10
+<ExampleUIControlNumber default="10" />
+
Base of logarithm, which is valid only for numeric axes with [type](~${componentType}.type): 'log'.
{{ use: partial-axis-common-axis-line(
diff --git a/en/option/component/axisPointer.md b/en/option/component/axisPointer.md
index 3cfae77..03ca361 100644
--- a/en/option/component/axisPointer.md
+++ b/en/option/component/axisPointer.md
@@ -98,6 +98,8 @@ Return of mapper:
## triggerOn(string) = 'mousemove|click'
+<ExampleUIControlEnum options="mousemove,click,none" />
+
Conditions to trigger tooltip. Options:
+ `'mousemove'`
diff --git a/en/option/component/calendar.md b/en/option/component/calendar.md
index 35fc50b..14b3239 100644
--- a/en/option/component/calendar.md
+++ b/en/option/component/calendar.md
@@ -72,6 +72,8 @@ range: ['2017-01', '2017-02']
## cellSize(number|Array) = 20
+<ExampleUIControlNumber min="0" step="1" default="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.
Support setting self-adaptation: `auto`, the default width and height to be 20.
@@ -99,6 +101,8 @@ cellSize: ['auto', 40]
## width(number|string) = auto
+<ExampleUIControlNumber min="0" step="1" />
+
The height of calendar coordinates.
Note: `cellSize` is 20 by default. If `width` is set,
@@ -106,6 +110,8 @@ Note: `cellSize` is 20 by default. If `width` is set,
## height(number|string) = auto
+<ExampleUIControlNumber min="0" step="1" />
+
The height of calendar coordinates.
Note: `cellSize` is 20 by default. If `height` is set,
@@ -113,6 +119,8 @@ Note: `cellSize` is 20 by default. If `height` is set,
## orient(string) = 'horizontal'
+<ExampleUIControlEnum options="horizontal,vertical" default="horizontal" />
+
The layout orientation of calendar.
Options:
@@ -125,6 +133,8 @@ Calendar coordinates splitLine style.
### show(boolean) = ${defaultShow|default(true)}
+<ExampleUIControlBoolean show="${defaultShow|default(true)}" />
+
Set this to `false` to prevent the splitLine from showing
### lineStyle(Object)
@@ -180,10 +190,14 @@ Day style in calendar coordinates.
### show(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Set this to `false` to prevent dayLabel from showing.
### firstDay(number) = 0
+<ExampleUIControlNumber min="0" max="6" step="1" />
+
A week from the beginning of the week, the default starting on Sunday.
Examples:
@@ -200,10 +214,14 @@ calendar: [{
### margin(number) = 0
+<ExampleUIControlNumber min="0" step="1" />
+
The margin between the day label and the axis line.
### position(string) = 'start'
+<ExampleUIControlEnum options="start,end" default="start" />
+
Position of week, at the beginning or end of the range.
Options:
@@ -212,6 +230,8 @@ Options:
### nameMap(string|Array) = 'en'
+<ExampleUIControlEnum options="en,cn" default="en" />
+
Week text content, defaults to 'en';
It supports Chinese, English, and custom;
index 0 always means Sunday;
@@ -246,10 +266,14 @@ Month label in calendar coordinates.
### show(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Set this to `false` to prevent monthLabel from showing.
### align(string) = 'center'
+<ExampleUIControlEnum options="left,center" default="center" />
+
Set the month text location in the month interval.
Options:
@@ -258,10 +282,14 @@ Options:
### margin(number) = 5
+<ExampleUIControlNumber min="0" step="5" />
+
The margin between the month label and the axis line.
### position(string) = 'start'
+<ExampleUIControlEnum options="start,end" default="start" />
+
Position of week, at the beginning or end of the range.
Options:
@@ -270,6 +298,8 @@ Options:
### nameMap(string|Array) = 'en'
+<ExampleUIControlEnum options="en,cn" default="en" />
+
Month text content, defaults to 'en';
It supports Chinese, English, and custom;
Index 0 always means Jan;
@@ -353,14 +383,20 @@ Year label in calendar coordinates.
### show(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Set this to `false` to stop yearLabel from showing
### margin(number) = 30
+<ExampleUIControlNumber min="0" step="1" />
+
The margin between the month label and the axis line.
### position(string)
+<ExampleUIControlEnum options="top,bottom,left,right" />
+
Position of year.
Default:
diff --git a/en/option/component/data-zoom-inside.md b/en/option/component/data-zoom-inside.md
index fba2171..1c9c460 100644
--- a/en/option/component/data-zoom-inside.md
+++ b/en/option/component/data-zoom-inside.md
@@ -27,6 +27,8 @@ The *inside* means it's inside the coordinates.
## disabled(boolean) = false
+<ExampleUIControlBoolean />
+
Whether disable inside zoom.
{{ use: partial-data-zoom-common(
@@ -35,6 +37,8 @@ Whether disable inside zoom.
## zoomOnMouseWheel(boolean|string) = true
+<ExampleUIControlEnum options="true,false,shift,ctrl,alt" default="true" />
+
How to trigger zoom. Optional values:
+ `true`：Mouse wheel triggers zoom.
@@ -45,6 +49,8 @@ How to trigger zoom. Optional values:
## moveOnMouseMove(boolean|string) = true
+<ExampleUIControlEnum options="true,false,shift,ctrl,alt" default="true" />
+
How to trigger data window move. Optional values:
+ `true`：Mouse move triggers data window move.
@@ -55,6 +61,8 @@ How to trigger data window move. Optional values:
## moveOnMouseWheel(boolean|string) = false
+<ExampleUIControlEnum options="true,false,shift,ctrl,alt" default="true" />
+
How to trigger data window move. Optional values:
+ `true`：Mouse wheel triggers data window move.
@@ -65,5 +73,7 @@ How to trigger data window move. Optional values:
## preventDefaultMouseMove(boolean) = true
+<ExampleUIControlBoolean default="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 93697e8..3c28cf0 100644
--- a/en/option/component/data-zoom-slider.md
+++ b/en/option/component/data-zoom-slider.md
@@ -19,10 +19,14 @@
## show(boolean) = true
+<ExampleUIControlBoolean default="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)'
+<ExampleUIControlColor default="rgba(47,69,84,0)" />
+
The background color of the component.
## dataBackground(Object)
@@ -52,14 +56,20 @@ Area style of shadow
## fillerColor(Color) = 'rgba(47,69,84,0.25)'
+<ExampleUIControlColor default="rgba(167,183,204,0.4)" />
+
The color to fill selected area.
## borderColor(Color) = '#ddd'
+<ExampleUIControlColor default="#ddd" />
+
The color of border.
## handleIcon(string)
+<ExampleUIControlIcon />
+
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'
@@ -71,6 +81,8 @@ Refer to [area-simple example](${galleryEditorPath}area-simple) for customized i
## handleSize(number|string) = '100%'
+<ExampleUIControlPercent min="0" step="1" default="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)
@@ -84,6 +96,8 @@ Style of handle. Please refer to [area-simple example](${galleryEditorPath}area-
## labelPrecision(number|string) = 'auto'
+<ExampleUIControlNumber min="0" step="1" />
+
Precision of label if in number form. By default, it is decided based on the number of data.
## labelFormatter(string|Function) = null
@@ -108,14 +122,20 @@ labelFormatter: function (value, valueStr) {
## showDetail(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether to show detail, that is, show the detailed data information when dragging.
## showDataShadow(string) = 'auto'
+<ExampleUIControlBoolean />
+
Whether to show data shadow in `dataZoom-silder` component, to indicate the data tendency in brief.
## realtime(boolean) = true
+<ExampleUIControlBoolean default="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(*)
diff --git a/en/option/component/data-zoom.md b/en/option/component/data-zoom.md
index b65c11c..68a3a6b 100644
--- a/en/option/component/data-zoom.md
+++ b/en/option/component/data-zoom.md
@@ -198,10 +198,14 @@ Specify which [angleAxis](~angleAxis) is/are controlled by the `${dataZoomName}`
## filterMode(string) = 'filter'
+<ExampleUIControlEnum options="filter,weakFilter,empty,none" default="filter" />
+
{{ use: partial-data-zoom-filterMode() }}
## start(number) = 0
+<ExampleUIControlNumber min="0" max="100" step="0.5" />
+
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.
@@ -210,6 +214,8 @@ More info about the relationship between `${dataZoomName}.start` and axis extent
## end(number) = 100
+<ExampleUIControlNumber min="0" max="100" default="100" step="0.5" />
+
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.
@@ -238,12 +244,16 @@ More info about the relationship between `${dataZoomName}.endValue` and axis ext
## minSpan(number) = null
+<ExampleUIControlNumber min="0" max="100" step="0.5" />
+
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
+<ExampleUIControlNumber min="0" max="100" step="0.5" />
+
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.
@@ -266,6 +276,8 @@ In category axis it can be set as `5` to represent 5 categories.
## orient(string) = null
+<ExampleUIControlEnum options="horizontal,vertical" />
+
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:
@@ -276,12 +288,16 @@ Valid values:
## zoomLock(boolean) = false
+<ExampleUIControlBoolean />
+
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
+<ExampleUIControlNumber default="100" min="0" step="20" />
+
Specify the frame rate of views refreshing, with unit millisecond (ms).
diff --git a/en/option/component/grid.md b/en/option/component/grid.md
index 8a8c292..55059ce 100644
--- a/en/option/component/grid.md
+++ b/en/option/component/grid.md
@@ -17,6 +17,8 @@ In ECharts 2.x, there could only be one single grid component at most in a singl
## show(boolean) = false
+<ExampleUIControlBoolean default="false" />
+
Whether to show the grid in rectangular coordinate.
{{ use: partial-rect-layout-width-height(
@@ -29,6 +31,8 @@ Whether to show the grid in rectangular coordinate.
## containLabel(boolean) = false
+<ExampleUIControlBoolean default="false" />
+
Whether the grid region contains [axis tick label](~yAxis.axisLabel) of axis.
+ When containLabel is `false`:
diff --git a/en/option/component/legend.md b/en/option/component/legend.md
index 122e3ba..f1129a5 100644
--- a/en/option/component/legend.md
+++ b/en/option/component/legend.md
@@ -13,6 +13,8 @@ If there have to be too many legend items, [vertically scrollable legend](${gall
## type(string)
+<ExampleUIControlEnum options="plain,scroll" />
+
Type of legend. Optional values:
+ `'plain'`: Simple legend. (default)
@@ -41,12 +43,16 @@ When `'scroll'` used, these options below can be used for detailed configuration
## show(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
{{ use: partial-rect-layout-width-height(
componentName = "legend"
) }}
## orient(string) = 'horizontal'
+<ExampleUIControlEnum options="vertical,horizontal" default="horizontal" />
+
The layout orientation of legend.
Options:
@@ -55,6 +61,8 @@ Options:
## align(string) = 'auto'
+<ExampleUIControlEnum options="auto,left,right" default="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:
@@ -64,24 +72,34 @@ Option:
## padding(number|Array) = 5
+<ExampleUIControlVector dims="T,R,B,L" default="5" min="0" step="0.5" />
+
{{ use: partial-padding(
componentName = "legend"
) }}
## itemGap(number) = 10
+<ExampleUIControlNumber default="10" min="0" step="0.5" />
+
The distance between each legend, horizontal distance in horizontal layout, and vertical distance in vertical layout.
## itemWidth(number) = 25
+<ExampleUIControlNumber default="25" min="0" step="0.5" />
+
Image width of legend symbol.
## itemHeight(number) = 14
+<ExampleUIControlNumber default="14" min="0" step="0.5" />
+
Image height of legend symbol.
## symbolKeepAspect(boolean) = true
+<ExampleUIControlBoolean />
+
Whether to keep aspect for icons (from `series.symbol` or user-defined `legend.data.icon`) in the form of `path://`.
## formatter(string|Function) = null
@@ -100,12 +118,16 @@ formatter: function (name) {
## selectedMode(string|boolean) = true
+<ExampleUIControlBoolean options="true,false,single,multiple" />
+
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'
+<ExampleUIControlColor default="#ccc" />
+
Legend color when not selected.
## selected(Object)
@@ -128,7 +150,10 @@ Legend text style.
{{ use: partial-text-style(
componentName = 'legend',
- prefix = '##'
+ prefix = '##',
+ defaultColor = "#333",
+ noAlign = true,
+ noVerticalAlign = true
) }}
## tooltip(Object)
@@ -137,6 +162,8 @@ Tooltip configuration for legend tooltip, which is similar to [tooltip](~tooltip
## icon(string)
+<ExampleUIControlIcon />
+
Icon of the legend items.
{{ use: partial-icon() }}
@@ -269,6 +296,8 @@ See [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1
## pageIconColor(string) = '#2f4554'
+<ExampleUIControlColor default="#2f4554" />
+
It works when [legend.type](~legend.type) is `'scroll'`.
The color of page buttons.
@@ -277,6 +306,8 @@ See [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1
## pageIconInactiveColor(string) = '#aaa'
+<ExampleUIControlColor default="#aaa" />
+
It works when [legend.type](~legend.type) is `'scroll'`.
The color of page buttons when they are inactive.
@@ -285,6 +316,8 @@ See [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1
## pageIconSize(number|Array) = 15
+<ExampleUIControlVector default="15,15" dims="w,h" />
+
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]`.
@@ -305,10 +338,14 @@ The text style of page info.
## animation(boolean)
+<ExampleUIControlBoolean default="true" />
+
Whether to use animation when page scrolls.
## animationDurationUpdate(number) = 800
+<ExampleUIControlNumber min="0" default="800" step="20" />
+
Duration of the page scroll animation.
## emphasis(Object)
@@ -375,6 +412,8 @@ The text label style of the selector button, which is displayed by default.
## selectorPosition(string) = 'auto'
+<ExampleUIControlEnum options="auto,start,end" />
+
{{ use: partial-version(
version = "4.4.0"
) }}
@@ -383,6 +422,8 @@ The position of the selector button, which can be placed at the end or start of
## selectorItemGap(number) = 7
+<ExampleUIControlNumber min="0" default="7" step="0.5" />
+
{{ use: partial-version(
version = "4.4.0"
) }}
@@ -391,6 +432,8 @@ The gap between the selector button.
## selectorButtonGap(number) = 10
+<ExampleUIControlNumber min="0" default="10" step="0.5" />
+
{{ use: partial-version(
version = "4.4.0"
) }}
diff --git a/en/option/component/parallel-axis.md b/en/option/component/parallel-axis.md
index 609f84e..5d65228 100644
--- a/en/option/component/parallel-axis.md
+++ b/en/option/component/parallel-axis.md
@@ -50,6 +50,8 @@ If there is only one parallel coordinate, you don't have to configure it, whose
## realtime(boolean) = true
+<ExampleUIControlBoolean default="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.
@@ -62,22 +64,32 @@ Area selecting is available on axes. Here is some configurations.
### width(number) = 20
+<ExampleUIControlNumber min="0" default="20" step="1" />
+
Width of selecting box.
### borderWidth(number) = 1
+<ExampleUIControlNumber min="0" default="1" step="0.5" />
+
Border width of the select box.
### borderColor(Color) = 'rgba(160,197,232)'
+<ExampleUIControlColor default="rgba(160,197,232)" />
+
Border color of the select box.
### color(Color) = 'rgba(160,197,232)'
+<ExampleUIControlColor default="rgba(160,197,232)" />
+
Border fill color of the select box.
### opacity(number) = 0.3
+<ExampleUIControlNumber min="0" max="1" default="0.3" />
+
Opacity of the select box.
{{ use: axis-common(
diff --git a/en/option/component/parallel.md b/en/option/component/parallel.md
index 22a534f..04ecbd9 100644
--- a/en/option/component/parallel.md
+++ b/en/option/component/parallel.md
@@ -22,6 +22,8 @@
## layout(string) = 'horizontal'
+<ExampleUIControlEnum options="horizontal,vertical" default="horizontal" />
+
Layout modes, whose optional values are:
+ `'horizontal'`: place each axis horizontally.
@@ -30,30 +32,40 @@ Layout modes, whose optional values are:
## axisExpandable(boolean) = false
+<ExampleUIControlBoolean />
+
{{ use: partial-parallel-high-dim() }}
Whether to enable toggling axis on clicking.
## axisExpandCenter(number) = null
+<ExampleUIControlNumber min="0" step="1" />
+
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
+<ExampleUIControlNumber min="0" step="1" />
+
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
+<ExampleUIControlNumber min="50" step="1" />
+
Distance between two axes when at expanding state, in pixels.
Please refer to [parallel.axisExpandable](parallel.axisExpandable) for more information.
## axisExpandTriggerOn(string) = 'click'
+<ExampleUIControlEnum options="click,mousemove" />
+
Optional values:
+ `'click'`: Trigger expanding when mouse clicking.
+ `'mousemove'`: Trigger expanding when mouse hovering.
diff --git a/en/option/component/radar.md b/en/option/component/radar.md
index ac4f37d..151709a 100644
--- a/en/option/component/radar.md
+++ b/en/option/component/radar.md
@@ -56,18 +56,26 @@ formatter: function (value, indicator) {
## nameGap(number) = 15
+<ExampleUIControlNumber default="15" step="1" />
+
Distance between the indicator's name and axis.
## splitNumber(number) = 5
+<ExampleUIControlNumber default="15" step="1" />
+
Segments of indicator axis.
## shape(string) = 'polygon'
+<ExampleUIControlEnum options="polygon,circle" />
+
Radar render type, in which `'polygon'` and `'circle'` are supported.
## scale(boolean) = false
+<ExampleUIControlBoolean />
+
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(
@@ -119,13 +127,19 @@ Indicator's name.
### max(number)
+<ExampleUIControlNumber default="100" step="1" />
+
The maximum value of indicator. It is an optional configuration, but we recommend to set it manually.
### min(number)
+<ExampleUIControlNumber step="1" />
+
The minimum value of indicator. It it an optional configuration, with default value of 0.
### color(string)
+<ExampleUIControlColor />
+
Specfy a color of the indicator.
diff --git a/en/option/component/single-axis.md b/en/option/component/single-axis.md
index 4237036..fcbd829 100644
--- a/en/option/component/single-axis.md
+++ b/en/option/component/single-axis.md
@@ -12,7 +12,7 @@ An axis with a single dimension. It can be used to display data in one dimension
) }}
{{ use: partial-rect-layout-width-height(
- componentName = "grid ",
+ componentName = "single",
defaultLeft = "'5%'",
defaultTop = "'5%'",
defaultRight = "'5%'",
diff --git a/en/option/component/timeline.md b/en/option/component/timeline.md
index 950f688..90e3363 100644
--- a/en/option/component/timeline.md
+++ b/en/option/component/timeline.md
@@ -101,6 +101,8 @@ In the above example, each item in `timeline.data` corresponds to each `option`
## show(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether to show the `timeline` component. It would not show with a setting of `false`, but its functions still remain.
## type(string) = 'slider'
@@ -120,30 +122,44 @@ Type of axis, whose values may be:
## currentIndex(number) = 0
+<ExampleUIControlNumber min="0" step="1" />
+
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
+<ExampleUIControlBoolean />
+
Whether to play automatically.
## rewind(boolean) = false
+<ExampleUIControlBoolean />
+
Whether supports playing reversely.
## loop(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether to loop playing.
## playInterval(number) = 2000
+<ExampleUIControlNumber min="0" step="20" default="2000" />
+
Indicates play speed (gap time between two state), whose unit is millisecond.
## realtime(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether the view updates in real time during dragging the control dot.
## controlPosition(string) = 'left'
+<ExampleUIControlEnum options="left,right" />
+
Position of the play button, whose valid values are `'left'` and `'right'`.
{{ use: partial-rect-layout(
@@ -152,12 +168,16 @@ Position of the play button, whose valid values are `'left'` and `'right'`.
## padding(number|Array) = 5
+<ExampleUIControlVector default="5,5,5,5" dims="T,R,B,L" />
+
{{ use: partial-padding(
componentName = 'timeline'
) }}
## orient(string) = 'horizontal'
+<ExampleUIControlEnum options="horizontal,vertical" default="horizontal" />
+
Orientation of the component, whose valid values are:
+ `'vertical'`: vertical layout.
@@ -165,6 +185,8 @@ Orientation of the component, whose valid values are:
## inverse(boolean) = false
+<ExampleUIControlBoolean />
+
+ Whether to put the `timeline` component reversely, which makes the elements in the front to be at the end.
{{ use: partial-symbol(
@@ -178,6 +200,8 @@ Orientation of the component, whose valid values are:
### show(boolean) = true
+<ExampleUIControlBoolean default="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(
@@ -193,6 +217,10 @@ Label axis, `emphasis` is the highlighted style of text. For instance, text styl
### position(string|number) = 'auto'
+<ExampleUIControlBoolean default="true" />
+
+<ExampleUIControlEnum options="auto,left,right,top,bottom" />
+
Configurations:
+ `'auto'`:
@@ -219,7 +247,6 @@ Configurations:
{{ use: partial-timeline-label(
prefix = "##",
- state = "normal",
textStyleDefaultColor = "'#304654'"
) }}
@@ -249,26 +276,38 @@ Style of the selected item (`checkpoint`).
### color(Color) = '#c23531'
+<ExampleUIControlColor default="#c23531" />
+
Color of `checkpoint` in `timeline` component.
### borderWidth(number) = 5
+<ExampleUIControlNumber min="0" step="0.5" default="5" />
+
The border-width of `checkpoint` in `timeline` component.
### borderColor(Color) = 'rgba(194,53,49, 0.5)'
+<ExampleUIControlColor default="rgba(194,53,49, 0.5)" />
+
The border-color of `checkpoint` in `timeline` component.
### animation(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
In `timeline` component, whether there is animation in `checkpoint` moving during the process of `timeline` playing and switching.
### animationDuration(number) = 300
+<ExampleUIControlNumber min="0" step="20" default="300" />
+
The animation duration of `checkpoint` in `timeline` component.
### animationEasing(string) = 'quinticInOut'
+<ExampleUIControlEnum default="quinticInOut" options="linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut" />
+
The easing effect of animation of `checkpoint` in `timeline` component. Refers to [easing sample](${galleryViewPath}line-easing) for different easing effects.
## controlStyle(Object)
@@ -277,30 +316,44 @@ The style of *control button*, which includes: *play button*, *previous button*,
### show(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether to show control button. `false` for hide all.
### showPlayBtn(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether to show play button.
### showPrevBtn(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether to show previous button.
### showNextBtn(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether to show next button.
### itemSize(number) = 22
+<ExampleUIControlNumber min="0" step="0.5" default="22" />
+
Size of *control button*, in pixels (px).
### itemGap(number) = 12
+<ExampleUIControlNumber min="0" step="0.5" default="12" />
+
Interval between *control button*, in pixels (px).
### position(string) = 'left'
+<ExampleUIControlEnum options="left,right,top,bottom" />
+
the location of *control button*.
+ When [timeline.orient](~timeline.orient) is set to be `'horizontal'`, `'left'` and `'right'`are valid.
@@ -309,38 +362,52 @@ the location of *control button*.
### playIcon(string)
+<ExampleUIControlIcon />
+
Icon of *play status* for *play button*.
{{ use: partial-icon-image-path() }}
### stopIcon(string)
+<ExampleUIControlIcon />
+
Icon of *stop status* for *play button*.
{{ use: partial-icon-image-path() }}
### prevIcon(string)
+<ExampleUIControlIcon />
+
Icon of *previous button*.
{{ use: partial-icon-image-path() }}
### nextIcon(string)
+<ExampleUIControlIcon />
+
Icon of *next button*.
{{ use: partial-icon-image-path() }}
### color(Color) = '#304654'
+<ExampleUIControlColor default="#304654" />
+
Button color.
### borderColor(Color) = '#304654'
+<ExampleUIControlColor default="#304654" />
+
Color of button border.
### borderWidth(number) = 1
+<ExampleUIControlNumber min="0" step="0.5" default="1" />
+
Border width of button.
## emphasis(Object)
@@ -415,6 +482,8 @@ as follows:
#${prefix} show(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether to show the label.
#${prefix} interval(string|number) = 'auto'
diff --git a/en/option/component/title.md b/en/option/component/title.md
index 78a07b6..9814f59 100644
--- a/en/option/component/title.md
+++ b/en/option/component/title.md
@@ -16,10 +16,14 @@ In ECharts 2.x, a single instance of ECharts could contains one title component
## show(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Set this to `false` to prevent the title from showing
## text(string) = ''
+<ExampleUIControlText />
+
The main title text, supporting for `\n` for newlines.
## link(string) = ''
@@ -51,6 +55,8 @@ Open the hyper link of main title in specified tab.
## subtext(string) = ''
+<ExampleUIControlText />
+
Subtitle text, supporting for `\n` for newlines.
## sublink(string) = ''
@@ -76,12 +82,16 @@ Open the hyper link of subtitle in specified tab, options:
## textAlign(string) = 'auto'
+<ExampleUIControlEnum options="auto,left,center,right" default="auto" />
+
The horizontal align of the component (including "text" and "subtext").
Optional values: `'auto'`, `'left'`, `'right'`, `'center'`.
## textVerticalAlign(string) = 'auto'
+<ExampleUIControlEnum options="auto,top,middle,bottom" default="auto" />
+
The vertical align of the component (including "text" and "subtext").
Optional values: `'auto'`, `'top'`, `'bottom'`, `'middle'`.
@@ -98,6 +108,8 @@ Set this to `true` to enable triggering events
## itemGap(number) = 10
+<ExampleUIControlNumber min="0" default="10" step="1" />
+
The gap between the main title and subtitle.
{{ use: partial-rect-layout(
diff --git a/en/option/component/toolbox.md b/en/option/component/toolbox.md
index e2ee620..b55b9bc 100644
--- a/en/option/component/toolbox.md
+++ b/en/option/component/toolbox.md
@@ -26,22 +26,32 @@ Text position: `'left'` / `'right'` / `'top'` / `'bottom'`.
###${prefix} textFill(string) = '#000'
+<ExampleUIControlColor />
+
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'
+<ExampleUIControlEnum options="left,center,right" />
+
Text align: `'left'` / `'center'` / `'right'`.
###${prefix} textBackgroundColor(string)
+<ExampleUIControlColor />
+
Text background color.
###${prefix} textBorderRadius(number)
+<ExampleUIControlVector min="0" dims="LT,RT,RB,LB" />
+
Border radius of text area.
###${prefix} textPadding(number)
+<ExampleUIControlVector min="0" dims="T,R,B,L" />
+
Padding of text area.
@@ -81,10 +91,14 @@ A group of utility tools, which includes [export](~toolbox.feature.saveAsImage),
## show(boolean) = true
+<ExampleUIControlBoolean />
+
Whether to show toolbox component.
## orient(string) = 'horizontal'
+<ExampleUIControlEnum options="vertical,horizontal" />
+
The layout orientation of toolbox's icon.
Options:
@@ -93,14 +107,20 @@ Options:
## itemSize(number) = 15
+<ExampleUIControlNumber min="0" default="15" />
+
The size of toolbox's icon.
## itemGap(number) = 10
+<ExampleUIControlNumber min="0" default="10" />
+
The gap between each icon of toolbox. It is horizontal gap in horizontal layout, while vertical gap in vertical layout.
## showTitle(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether to show the title of each tool icon when mouse hovers.
## feature(Object)
@@ -142,6 +162,8 @@ Save as image.
#### type(string) = 'png'
+<ExampleUIControlEnum options="png,jpg" />
+
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.
@@ -149,14 +171,20 @@ File suffix of the image saved.
#### name(string)
+<ExampleUIControlText />
+
Name to save the image, whose default value is [title.text](~title.text).
#### backgroundColor(Color) = 'auto'
+<ExampleUIControlColor />
+
Background color to save the image, whose default value is [backgroundColor](~backgroundColor). If `backgroundColor` is not set, white color is used.
#### connectedBackgroundColor(Color) = '#fff'
+<ExampleUIControlColor />
+
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']
@@ -169,6 +197,8 @@ Components to be excluded when export. By default, toolbox is excluded.
#### pixelRatio(number) = 1
+<ExampleUIControlNumber min="0.5" max="5" step="0.5" />
+
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)
@@ -189,6 +219,8 @@ Data view tool, which could display data in current chart and updates chart afte
#### readOnly(boolean) = false
+<ExampleUIControlBoolean />
+
Whether it is read-only.
#### optionToContent(Function)
@@ -235,26 +267,38 @@ There are 3 names in data view, which are `['data view', 'turn off' and 'refresh
#### backgroundColor(string) = '#fff'
+<ExampleUIControlColor default="#fff" />
+
Background color of the floating layer in data view.
#### textareaColor(string) = '#fff'
+<ExampleUIControlColor default="#fff" />
+
Background color of input area of the floating layer in data view.
#### textareaBorderColor(string) = '#333'
+<ExampleUIControlColor default="#333" />
+
Border color of input area of the floating layer in data view.
#### textColor(string) = '#000'
+<ExampleUIControlColor default="#000" />
+
Text color.
#### buttonColor(string) = '#c23531'
+<ExampleUIControlColor default="#c23531" />
+
Button color.
#### buttonTextColor(string) = '#fff'
+<ExampleUIControlColor default="#fff" />
+
Color of button text.
### dataZoom(Object)
diff --git a/en/option/component/tooltip.md b/en/option/component/tooltip.md
index 2a238e7..4e04c64 100644
--- a/en/option/component/tooltip.md
+++ b/en/option/component/tooltip.md
@@ -123,16 +123,22 @@ const option = {
## showContent(boolean) = true
+<ExampleUIControlBoolean default="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
+<ExampleUIControlBoolean default="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'
+<ExampleUIControlEnum options="mousemove,click" />
+
Conditions to trigger tooltip. Options:
+ `'mousemove'`
@@ -155,28 +161,40 @@ This attribute is new to ECharts 3.0.
## showDelay(number) = 0
+<ExampleUIControlNumber min="0" step="20" />
+
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
+<ExampleUIControlNumber min="0" step="20" default="100" />
+
Delay time for hiding tooltip, in ms. It will be invalid when [alwaysShowContent](~tooltip.alwaysShowContent) is `true`.
## enterable(boolean) = true
+<ExampleUIControlBoolean default="false" />
+
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'
+<ExampleUIControlEnum options="html,richText" default="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
+<ExampleUIControlBoolean default="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
+<ExampleUIControlBoolean default="false" />
+
{{ use: partial-version(
version = "4.7.0"
) }}
@@ -191,6 +209,8 @@ Note that it also works when CSS transform used.
## transitionDuration(number) = 0.4
+<ExampleUIControlNumber min="0" step="0.1" default="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(
diff --git a/en/option/component/visual-map-continuous.md b/en/option/component/visual-map-continuous.md
index 83f3f4d..8a44e6a 100644
--- a/en/option/component/visual-map-continuous.md
+++ b/en/option/component/visual-map-continuous.md
@@ -22,12 +22,16 @@ Used to determine that it is a continuous visualMap component.
## min(number)
+<ExampleUIControlNumber />
+
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)
+<ExampleUIControlNumber />
+
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.
@@ -78,12 +82,16 @@ chart.setOption({visualMap: {range: null}}); // Set range to null then.
## calculable(boolean) = false
+<ExampleUIControlBoolean />
+
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
+<ExampleUIControlBoolean default="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.
@@ -92,6 +100,8 @@ Whether to update view in real time when dragging a handle.
## inverse(boolean) = false
+<ExampleUIControlBoolean />
+
Whether to inverse the layout of visualMap component.
As `inverse` is `false`, the layout direction is the same as [cartesian coordinate](~grid). That is:
@@ -103,18 +113,26 @@ As `inverse` is `true`, the result is opposite.
## precision(number) = 0
+<ExampleUIControlNumber min="0" step="1" />
+
The decimal precision of label, defaults to be 0 (no decimals).
## itemWidth(number) = 20
+<ExampleUIControlNumber default="20" min="0" />
+
The width of the main bar of visualMap component.
## itemHeight(number) = 140
+<ExampleUIControlNumber default="140" min="0" />
+
The height of the main bar of visualMap component.
## align(string) = 'auto'
+<ExampleUIControlEnum options="auto,left,right,top,bottom" />
+
Specify the position of handles and labels, against the main bar. The possible values are:
+ `'auto'` Decide automatically.
@@ -131,6 +149,8 @@ You can understand the order of items in `text` array just by a simple trial. Se
## textGap(number) = 10
+<ExampleUIControlNumber default="10" step="0.5" />
+
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(
diff --git a/en/option/component/visual-map-piecewise.md b/en/option/component/visual-map-piecewise.md
index 7ffb7ff..0b26b20 100644
--- a/en/option/component/visual-map-piecewise.md
+++ b/en/option/component/visual-map-piecewise.md
@@ -31,6 +31,8 @@ Used to determine it is a piecewise visualMap component.
## splitNumber(number) = 5
+<ExampleUIControlNumber default="5" min="1" step="1" />
+
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).
@@ -84,6 +86,8 @@ You would realize the sequence in `categories` by a simple trial. See more detai
## min(number)
+<ExampleUIControlNumber />
+
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.
@@ -92,6 +96,8 @@ In **CONTINUOUS-AVERAGE** mode (i.e., [visualMap-piecewise.splitNumber](~visualM
## max(number)
+<ExampleUIControlNumber />
+
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.
@@ -100,18 +106,24 @@ In **CONTINUOUS-AVERAGE** mode (i.e., [visualMap-piecewise.splitNumber](~visualM
## minOpen(boolean)
+<ExampleUIControlBoolean />
+
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)
+<ExampleUIControlBoolean />
+
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'
+<ExampleUIControlEnum options="single,multiple" />
+
Selected Mode could be:
+ `'multiple'` (multiple selection).
@@ -119,6 +131,8 @@ Selected Mode could be:
## inverse(boolean) = false
+<ExampleUIControlBoolean />
+
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).
@@ -137,6 +151,8 @@ If you just have a try, you'll know it is not so complicated.
## precision(number) = null
+<ExampleUIControlNumber min="0" step="1" />
+
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.
@@ -145,14 +161,20 @@ The decimal precision of label, defaults to be 0 (no decimals).
## itemWidth(number) = 20
+<ExampleUIControlNumber default="20" min="0" />
+
The width of each graphical element that represents a piece.
## itemHeight(number) = 14
+<ExampleUIControlNumber default="14" min="0" />
+
The height of each graphical element that represents a piece.
## align(string) = 'auto'
+<ExampleUIControlEnum options="auto,left,right" />
+
The layout relationship between the graphical elements for pieces and their labels. Possible values are:
+ `'auto'` Decide automatically.
@@ -169,14 +191,20 @@ The rule, that labels will not show when `text` is use, is retained for compatib
## textGap(number) = 10
+<ExampleUIControlNumber default="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)
+<ExampleUIControlBoolean />
+
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
+<ExampleUIControlNumber default="10" />
+
Its the distance between each two graphical elements for pieces. The unit is px.
## itemSymbol(string) = 'roundRect'
diff --git a/en/option/component/x-axis.md b/en/option/component/x-axis.md
index b23980f..559f83f 100644
--- a/en/option/component/x-axis.md
+++ b/en/option/component/x-axis.md
@@ -11,6 +11,8 @@ The x axis in cartesian(rectangular) coordinate. Usually a single grid component
## show(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Set this to `false` to prevent the axis from showing.
## gridIndex(number) = 0
@@ -19,6 +21,8 @@ The index of grid which the x axis belongs to. Defaults to be in the first grid.
## position(string)
+<ExampleUIControlEnum options="top,bottom" default="bottom" />
+
The position of x axis.
options:
@@ -29,6 +33,8 @@ The first x axis in grid defaults to be on the bottom of the grid, and the secon
## offset(number) = 0
+<ExampleUIControlNumber step="0.5" />
+
Offset of x axis relative to default position. Useful when multiple x axis has same [position](~xAxis.position) value.
## realtimeSort(*) = false
diff --git a/en/option/component/y-axis.md b/en/option/component/y-axis.md
index fdc94d7..d4ae6bb 100644
--- a/en/option/component/y-axis.md
+++ b/en/option/component/y-axis.md
@@ -11,6 +11,8 @@ The y axis in cartesian(rectangular) coordinate. Usually a single grid component
## show(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Set this to `false` to prevent the axis from showing.
## gridIndex(number) = 0
@@ -19,6 +21,8 @@ The index of grid which the y axis belongs to. Defaults to be in the first grid.
## position(string)
+<ExampleUIControlEnum options="left,right" default="left" />
+
the position of y axis.
options:
@@ -29,6 +33,8 @@ The first y axis in grid defaults to be the left (`'left'`) of the grid, and th
## offset(number) = 0
+<ExampleUIControlNumber step="0.5" />
+
Offset of y axis relative to default position. Useful when multiple y axis has same [position](~yAxis.position) value.
## realtimeSort(*) = false
diff --git a/en/option/partial/animation.md b/en/option/partial/animation.md
index bb0cda2..a403889 100644
--- a/en/option/partial/animation.md
+++ b/en/option/partial/animation.md
@@ -3,6 +3,8 @@
#${prefix} animation(boolean) = true
+<ExampleUIControlBoolean default="${defaultAnimation|default(true)}" clean="true" />
+
Whether to enable animation.
#${prefix} animationThreshold(number) = ${defaultAnimationThreshold|default(2000)}
@@ -18,6 +20,8 @@ Whether to set graphic number threshold to animation. Animation will be disabled
#${prefix} animationDurationUpdate(number|Function) = ${defaultAnimationDurationUpdate|default(300)}
+<ExampleUIControlNumber min="0" default="${defaultAnimationDuration|default(1000)}" step="20" />
+
Time for animation to complete, which supports callback function for different data to have different animation effect:
```js
@@ -29,6 +33,8 @@ animationDurationUpdate: function (idx) {
#${prefix} animationEasingUpdate(string) = ${defaultAnimationEasingUpdate|default('cubicOut')}
+<ExampleUIControlEnum options="linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut" />
+
Easing method used for animation.
{{ if: !${noAnimationDelay} }}
@@ -53,6 +59,8 @@ See [this example](${galleryEditorPath}bar-animation-delay) for more information
#${prefix} animationDuration(number|Function) = ${defaultAnimationDuration|default(1000)}
+<ExampleUIControlNumber min="0" default="${defaultAnimationDuration|default(1000)}" step="20" clean="true" />
+
Duration of the first animation, which supports callback function for different data to have different animation effect:
```js
@@ -64,6 +72,8 @@ animationDuration: function (idx) {
#${prefix} animationEasing(string) = ${defaultAnimationEasing|default('cubicOut')}
+<ExampleUIControlEnum options="linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut" clean="true" />
+
Easing method used for the first animation. Varied easing effects can be found at [easing effect example](${galleryEditorPath}line-easing).
{{ if: !${noAnimationDelay} }}
diff --git a/en/option/partial/area-style.md b/en/option/partial/area-style.md
index ce8c85e..5187379 100644
--- a/en/option/partial/area-style.md
+++ b/en/option/partial/area-style.md
@@ -3,6 +3,8 @@
#${prefix} color(Color) = {{ if: !${useColorPalatte} }} ${defaultColor|default('"#000"')} {{ else }}'adaptive'{{ /if }}
+<ExampleUIControlColor />
+
Fill color. {{ if: ${useColorPalatte} }} Color is taken from [option.color Palette](~color) by default. {{ /if }}
{{ use: partial-color-desc() }}
diff --git a/en/option/partial/axisPointer-common.md b/en/option/partial/axisPointer-common.md
index 0d02fca..d6825b4 100644
--- a/en/option/partial/axisPointer-common.md
+++ b/en/option/partial/axisPointer-common.md
@@ -79,10 +79,14 @@ In value axis and time axis, if [snap](~xAxis.axisPointer.snap) is set as true,
#${prefix} show(boolean) = false
+<ExampleUIControlBoolean />
+
axisPointer will not be displayed by default. But if [tooltip.trigger](~tooltip.trigger) is set as `'axis'` or [tooltip.axisPointer.type](~tooltip.axisPointer.type) is set as `'cross'`, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. [tooltip.axisPointer.axis](~tooltip.axisPointer.axis) can be used to change the choice.
#${prefix} type(string) = 'line'
+<ExampleUIControlEnum options="line,shadow,none" />
+
Indicator type.
Options:
@@ -98,6 +102,8 @@ Options:
#${prefix} triggerTooltip(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether to trigger tooltip.
#${prefix} value(number) = null
@@ -106,6 +112,8 @@ current value. When using [axisPointer.handle](xAxisPointer.handle), `value` can
#${prefix} status(boolean)
+<ExampleUIControlEnum options="show,hide" />
+
Current status, can be `'show'` 和 `'hide'`.
#${prefix} handle(Object)
@@ -114,10 +122,14 @@ A button used to drag axisPointer. This feature is applicable in touch device. S
##${prefix} show(boolean) = false
+<ExampleUIControlBoolean />
+
Set to `true` to use handle.
##${prefix} icon(*)
+<ExampleUIControlIcon clean="true" />
+
The icon of the handle.
{{ use: partial-icon-image-path() }}
@@ -126,18 +138,26 @@ See the [example of using image](${galleryEditorPath}doc-example/axisPointer-han
##${prefix} size(number|Array) = 45
+<ExampleUIControlVector default="45,45" min="0" step="0.5" dims="width,height" />
+
The size of the handle, which can be set as a single value or an array (`[width, height]`).
##${prefix} margin(number) = 50
+<ExampleUIControlNumber default="50" min="0" step="0.5" />
+
Distance from handle center to axis.
##${prefix} color(string) = '#333'
+<ExampleUIControlColor />
+
The color of the handle.
##${prefix} throttle(number) = 40
+<ExampleUIControlNumber default="40" min="0" step="10" />
+
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(
diff --git a/en/option/partial/barGrid.md b/en/option/partial/barGrid.md
index 45de027..039147f 100644
--- a/en/option/partial/barGrid.md
+++ b/en/option/partial/barGrid.md
@@ -5,6 +5,8 @@
The width of the bar. Adaptive when not specified.
+<ExampleUIControlPercent />
+
{{ use: partial-barGrid-value-absolute-or-percent() }}
{{ use: partial-barGrid-share-desc(
@@ -39,6 +41,8 @@ Has higer priority than [barWidth](~series-bar.barWidth).
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.
+<ExampleUIControlNumber min="0" />
+
## 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.
diff --git a/en/option/partial/circular-layout.md b/en/option/partial/circular-layout.md
index 4bb6ae8..a34f2f8 100644
--- a/en/option/partial/circular-layout.md
+++ b/en/option/partial/circular-layout.md
@@ -5,6 +5,8 @@
## center(Array) = ${defaultCenter|default("['50%', '50%']")}
+<ExampleUIControlPercentVector dims="x,y" />
+
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.
@@ -19,6 +21,8 @@ center: ['50%', '50%']
## radius(number|string|Array) = ${defaultRadius}
+<ExampleUIControlPercentVector dims="inner,outer" default="0%, 75%" />
+
Radius of ${componentName}. Value can be:
+ `number`: Specify outside radius directly.
diff --git a/en/option/partial/clip.md b/en/option/partial/clip.md
index 572327d..29b81a4 100644
--- a/en/option/partial/clip.md
+++ b/en/option/partial/clip.md
@@ -3,6 +3,8 @@
#${prefix|default('#')} clip(boolean) = ${defaultClip|default(true)}
+<ExampleUIControlBoolean default="${defaultClip|default(true)}" />
+
{{ use: partial-version(
version = ${version|default("4.4.0")}
) }}
diff --git a/en/option/partial/component-common-style.md b/en/option/partial/component-common-style.md
index 7d93aa9..ebbdd10 100644
--- a/en/option/partial/component-common-style.md
+++ b/en/option/partial/component-common-style.md
@@ -3,6 +3,8 @@
#${prefix} backgroundColor(Color) = 'transparent'
+<ExampleUIControlColor />
+
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'`.
@@ -13,6 +15,8 @@ Background color of ${componentName}, which is transparent by default.
#${prefix} borderColor(Color) = '#ccc'
+<ExampleUIControlColor default="#ccc" />
+
Border color of ${componentName}. Support the same color format as backgroundColor.
{{ if: ${needShow} }}
@@ -21,6 +25,8 @@ Border color of ${componentName}. Support the same color format as backgroundCol
#${prefix} borderWidth(number) = 1
+<ExampleUIControlNumber default="${defaultBorderWidth|default(1)}" min="0" step="0.5" />
+
Border width of ${componentName}.
{{ if: ${needShow} }}
@@ -44,6 +50,8 @@ Border width of ${componentName}.
#${prefix} ${propName|default('borderRadius')}(number|Array) = 0
+<ExampleUIControlVector min="0" dims="LT,RT,RB,LB" />
+
The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.
For example:
diff --git a/en/option/partial/cursor.md b/en/option/partial/cursor.md
index 295cdd6..e79cf5d 100644
--- a/en/option/partial/cursor.md
+++ b/en/option/partial/cursor.md
@@ -3,5 +3,7 @@
#${prefix|default('#')} cursor(string) = 'pointer'
+<ExampleUIControlEnum options="auto,pointer,move" default="pointer" />
+
The mouse style when mouse hovers on an element, the same as `cursor` property in `CSS`.
diff --git a/en/option/partial/item-style.md b/en/option/partial/item-style.md
index 779c461..0e727ab 100644
--- a/en/option/partial/item-style.md
+++ b/en/option/partial/item-style.md
@@ -9,6 +9,8 @@ Graphic style of ${name}, `emphasis` is the style when it is highlighted, like b
#${prefix} color(Color{{ if: ${hasCallback} }}|Function{{ /if }}) = ${defaultColor|default(null)}
+<ExampleUIControlColor />
+
${name} color. {{ if: ${useColorPalatte} }} Color is taken from [option.color Palette](~color) by default. {{ /if }}
{{ use: partial-color-desc() }}
@@ -23,14 +25,20 @@ Input parameters are `seriesIndex`, `dataIndex`, `data`, `value`, and etc. of da
#${prefix} borderColor(Color) = ${defaultBorderColor|default('"#000"')}
+<ExampleUIControlColor />
+
${name} border color, whose format is similar to that of `color`.
#${prefix} borderWidth(number) = ${defaultBorderWidth|default(0)}
+<ExampleUIControlNumber value="${defaultBorderWidth|default(0)}" min="0" step="0.5" />
+
${name} border width. No border when it is set to be 0.
#${prefix} borderType(string) = 'solid'
+<ExampleUIControlEnum default="solid" options="solid,dashed,dotted" />
+
Border type, which can be `'solid'`, `'dashed'`, or `'dotted'`. `'solid'` by default.
{{ use: partial-style-shadow-opacity(
diff --git a/en/option/partial/label.md b/en/option/partial/label.md
index c1887fa..309d013 100644
--- a/en/option/partial/label.md
+++ b/en/option/partial/label.md
@@ -9,16 +9,22 @@ Text label of ${name}, to explain some data information about graphic item like
#${prefix} show(boolean) = ${defaultShowLabel|default("false")}
+<ExampleUIControlBoolean default="${defaultShowLabel|default(false)}" />
+
Whether to show label.
{{ if: !${noPosition} }}
#${prefix} position(string|Array) = ${defaultPosition}
+<ExampleUIControlEnum options="top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" />
+
{{ use: partial-label-position() }}
{{ /if }}
#${prefix} distance(number) = 5
+<ExampleUIControlNumber default="5" min="0" step="0.5" />
+
Distance to the host graphic element. Works when position is string value (like `'top'`、`'insideRight'`).
See: [label position](${galleryEditorPath}doc-example/label-position).
@@ -26,6 +32,8 @@ See: [label position](${galleryEditorPath}doc-example/label-position).
{{ if: !${noRotate} }}
#${prefix} rotate(number) = ${defaultRotate}
+<ExampleUIControlAngle default="${defaultRotate|default(0)}" min="-90" max="90" step="1" />
+
Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.
See: [label rotation](${galleryEditorPath}bar-label-rotation).
@@ -33,6 +41,8 @@ See: [label rotation](${galleryEditorPath}bar-label-rotation).
#${prefix} offset(Array)
+<ExampleUIControlVector dims="x,y" step="0.5" separate="true" />
+
Whether to move text slightly. For example: `[30, 40]` means move `30` horizontally and move `40` vertically.
{{ if: ${formatter} }}
diff --git a/en/option/partial/large.md b/en/option/partial/large.md
index 2bbd3fa..33cdca8 100644
--- a/en/option/partial/large.md
+++ b/en/option/partial/large.md
@@ -3,6 +3,8 @@
#${prefix} large(boolean) = ${defaultLarge|default(false)}
+<ExampleUIControlBoolean />
+
Whether to enable the optimization of large-scale data. It could be set when large data causes performance problem.
After being enabled, `largeThreshold` can be used to indicate the minimum number for turning on the optimization.
@@ -11,5 +13,7 @@ But when the optimization enabled, the style of single data item can't be custom
#${prefix} largeThreshold(number) = ${defaultLargeThreshold|default(2000)}
+<ExampleUIControlNumber min="1" default="${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 3550c30..244f605 100644
--- a/en/option/partial/legend-hover-link.md
+++ b/en/option/partial/legend-hover-link.md
@@ -3,5 +3,7 @@
## legendHoverLink(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether to enable highlighting chart when [legend](~legend) is being hovered.
diff --git a/en/option/partial/line-style.md b/en/option/partial/line-style.md
index f4e12eb..9d12c96 100644
--- a/en/option/partial/line-style.md
+++ b/en/option/partial/line-style.md
@@ -3,6 +3,8 @@
#${prefix} color(Color) = {{ if: !${useColorPalatte} }} ${defaultColor|default('"#000"')} {{ else }}'self-adaptive'{{ /if }}
+<ExampleUIControlColor />
+
${name}Line color. {{ if: ${useColorPalatte} }} Color is taken from [option.color Palette](~color) by default. {{ /if }}
{{ if: ${hasCallback} }}
@@ -17,10 +19,14 @@ Input parameters are `seriesIndex`, `dataIndex`, `data`, `value`, and etc. of da
#${prefix} width(number) = ${defaultWidth|default(0)}
+<ExampleUIControlNumber value="${defaultWidth|default(1)}" min="0" step="0.5" />
+
${name} line width.
#${prefix} type(string) = ${defaultType|default('solid')}
+<ExampleUIControlEnum default="solid" options="solid,dashed,dotted" />
+
${name} line type.
Options are:
@@ -38,6 +44,8 @@ Options are:
{{ if: ${hasCurveness} }}
#${prefix} curveness(number) = 0
+<ExampleUIControlNumber min="0" max="1" step="0.01" default="0" />
+
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
{{ /if }}
diff --git a/en/option/partial/mark-area.md b/en/option/partial/mark-area.md
index 5b74be7..92adeee 100644
--- a/en/option/partial/mark-area.md
+++ b/en/option/partial/mark-area.md
@@ -150,6 +150,8 @@ Specify the right-bottom point.
{{ if: ${hasType} }}
#${prefix} type(string)
+<ExampleUIControlEnum options="min,max,average" />
+
Specify this item is on min or max or average value.
**Options:**
@@ -161,6 +163,8 @@ Specify this item is on min or max or average value.
{{ if: ${hasCoord} }}
#${prefix} valueIndex(number)
+<ExampleUIControlNumber min="0" max="1" step="1" />
+
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),
@@ -183,10 +187,14 @@ Name of the marker, which will display as a label.
#${prefix} x(number)
+<ExampleUIControlPercent default="0" />
+
x value on screen coordinate system, can be pixel number (like `5`), or percent value (like `'20%'`).
#${prefix} y(number)
+<ExampleUIControlPercent default="0" />
+
y value on screen coordinate system, can be pixel number (like `5`), or percent value (like `'20%'`).
#${prefix} value(number)
diff --git a/en/option/partial/mark-line.md b/en/option/partial/mark-line.md
index f673fe4..f888e7e 100644
--- a/en/option/partial/mark-line.md
+++ b/en/option/partial/mark-line.md
@@ -197,6 +197,8 @@ The distance between labels and mark lines. If it's an array, then the first ele
{{ if: ${hasType} }}
#${prefix} type(string)
+<ExampleUIControlEnum options="min,max,average" />
+
Special label types, are used to label maximum value, minimum value and so on.
**Options are:**
@@ -209,6 +211,8 @@ Special label types, are used to label maximum value, minimum value and so on.
{{ if: ${hasCoord} }}
#${prefix} valueIndex(number)
+<ExampleUIControlNumber min="0" max="1" step="1" />
+
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)
@@ -228,10 +232,14 @@ Name of the marker, which will display as a label.
#${prefix} x(number)
+<ExampleUIControlPercent default="0" />
+
X position according to container, in pixel.
#${prefix} y(number)
+<ExampleUIControlPercent default="0" />
+
Y position according to container, in pixel.
#${prefix} value(number)
diff --git a/en/option/partial/mark-point.md b/en/option/partial/mark-point.md
index 9c67e79..ee29a0b 100644
--- a/en/option/partial/mark-point.md
+++ b/en/option/partial/mark-point.md
@@ -6,12 +6,12 @@
Mark point in a chart.
{{ use: partial-symbol(
- name = ${name},
seriesType = ${seriesType},
defaultSymbol = "'pin'",
defaultSymbolSize = 50,
prefix = "#" + ${prefix},
- hasCallback = true
+ hasCallback = true,
+ name = ${name}
) }}
{{ use: partial-silent(
@@ -98,6 +98,8 @@ Mark point name.
{{ if: ${hasType} }}
###${prefix} type(string)
+<ExampleUIControlEnum options="min,max,average" />
+
Special label types, are used to label maximum value, minimum value and so on.
**Options are:**
@@ -109,6 +111,8 @@ Special label types, are used to label maximum value, minimum value and so on.
{{ if: ${hasCoord} }}
###${prefix} valueIndex(number)
+<ExampleUIControlNumber min="0" max="1" step="1" />
+
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)
@@ -124,10 +128,14 @@ Coordinates of the starting point or ending point, whose format depends on the c
###${prefix} x(number)
+<ExampleUIControlPercent default="0" />
+
X position according to container, in pixel.
###${prefix} y(number)
+<ExampleUIControlPercent default="0" />
+
Y position according to container, in pixel.
###${prefix} value(number)
@@ -136,8 +144,7 @@ Label value, which can be ignored.
{{ use: partial-symbol(
prefix = "##" + ${prefix},
- seriesType = ${seriesType},
- name = ${name}
+ seriesType = ${seriesType}
) }}
###${prefix} itemStyle(Object)
diff --git a/en/option/partial/padding.md b/en/option/partial/padding.md
index 5d53521..4564c88 100644
--- a/en/option/partial/padding.md
+++ b/en/option/partial/padding.md
@@ -1,6 +1,8 @@
{{ target: partial-padding }}
+<ExampleUIControlVector min="0" dims="T,R,B,L" />
+
${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:
diff --git a/en/option/partial/roam.md b/en/option/partial/roam.md
index 2fbe0b0..fadddeb 100644
--- a/en/option/partial/roam.md
+++ b/en/option/partial/roam.md
@@ -1,6 +1,8 @@
{{ target: partial-roam }}
+<ExampleUIControlEnum options="true,false,scale,move" />
+
Whether to enable mouse zooming and translating. `false` by default. If either zooming or translating is wanted, it can be set to `'scale'` or `'move'`. Otherwise, set it to be `true` to enable both.
diff --git a/en/option/partial/selected-mode.md b/en/option/partial/selected-mode.md
index a916684..5f33e46 100644
--- a/en/option/partial/selected-mode.md
+++ b/en/option/partial/selected-mode.md
@@ -9,6 +9,8 @@
) }}
{{ /if }}
+<ExampleUIControlEnum options="true,false,single,multiple" />
+
Selected mode. It is enabled by default, and you may set it to be `false` to disabled it.
Besides, it can be set to `'single'` or `'multiple'`, for single selection and multiple selections.
diff --git a/en/option/partial/show.md b/en/option/partial/show.md
index 8f8a25b..07f3684 100644
--- a/en/option/partial/show.md
+++ b/en/option/partial/show.md
@@ -1,5 +1,7 @@
{{ target: partial-show }}
+<ExampleUIControlBoolean />
+
Whether to display ${componentName}. Notice that this attribute affects only the display of this component. If the component affects the display of the chart, like `dataRange` component, toggling `show` will not interfere with the display of chart.
diff --git a/en/option/partial/silent.md b/en/option/partial/silent.md
index 13cc7c4..c43b05a 100644
--- a/en/option/partial/silent.md
+++ b/en/option/partial/silent.md
@@ -3,5 +3,7 @@
#${prefix} silent(boolean) = false
+<ExampleUIControlBoolean />
+
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
diff --git a/en/option/partial/style-shadow-opacity.md b/en/option/partial/style-shadow-opacity.md
index 97ac128..c3f0333 100644
--- a/en/option/partial/style-shadow-opacity.md
+++ b/en/option/partial/style-shadow-opacity.md
@@ -3,6 +3,8 @@
#${prefix} shadowBlur(number) = ${defaultShadowBlur}
+<ExampleUIControlNumber default="${defaultShadowBlur}" min="0" step="0.5" />
+
Size of shadow blur. This attribute should be used along with `shadowColor`,`shadowOffsetX`, `shadowOffsetY` to set shadow to component.
For example:
@@ -19,6 +21,8 @@ For example:
#${prefix} shadowColor(Color) = ${defaultShadowColor}
+<ExampleUIControlColor default="${defaultShadowColor}" />
+
Shadow color. Support same format as `color`.
{{ if: ${needShow} }}
@@ -27,6 +31,8 @@ Shadow color. Support same format as `color`.
#${prefix} shadowOffsetX(number) = ${defaultShadowOffsetX|default(0)}
+<ExampleUIControlNumber default="${defaultShadowOffsetX|default(0)}" step="0.5" />
+
Offset distance on the horizontal direction of shadow.
{{ if: ${needShow} }}
@@ -35,6 +41,8 @@ Offset distance on the horizontal direction of shadow.
#${prefix} shadowOffsetY(number) = ${defaultShadowOffsetY|default(0)}
+<ExampleUIControlNumber default="${defaultShadowOffsetY|default(0)}" step="0.5" />
+
Offset distance on the vertical direction of shadow.
{{ if: ${needShow} }}
@@ -47,6 +55,8 @@ Offset distance on the vertical direction of shadow.
#${prefix} opacity(number) = ${defaultOpacity}
+<ExampleUIControlNumber default="${defaultOpacity|default(1)}" min="0" max="1" step="0.01" />
+
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
diff --git a/en/option/partial/symbol.md b/en/option/partial/symbol.md
index 7cb0898..9d652a1 100644
--- a/en/option/partial/symbol.md
+++ b/en/option/partial/symbol.md
@@ -3,6 +3,8 @@
#${prefix} symbol(string{{ if: ${hasCallback} }}|Function{{ /if }}) = ${defaultSymbol}
+<ExampleUIControlIcon default="circle" />
+
Symbol of ${name}.
{{ use: partial-icon() }}
@@ -17,6 +19,8 @@ The first parameter `value` is the value in [data](~series-${seriesType}.data),
#${prefix} symbolSize(number|Array{{ if: ${hasCallback} }}|Function{{ /if }}) = ${defaultSymbolSize}
+<ExampleUIControlNumber min="0" />
+
${name} symbol size. It can be set to single numbers like `10`, or use an array to represent width and height. For example, `[20, 10]` means symbol width is `20`, and height is`10`.
{{ if: ${hasCallback} }}
@@ -29,6 +33,8 @@ The first parameter `value` is the value in [data](~series-${seriesType}.data),
#${prefix} symbolRotate(number{{ if: ${hasCallback} }}|Function{{ /if }})
+<ExampleUIControlAngle min="-180" max="180" step="1" />
+
Rotate degree of ${name} symbol. The negative value represents clockwise. Note that when `symbol` is set to be `'arrow'` in `markLine`, `symbolRotate` value will be ignored, and compulsively use tangent angle.
{{ if: ${hasCallback} }}
@@ -42,10 +48,14 @@ The first parameter `value` is the value in [data](~series-${seriesType}.data),
#${prefix} symbolKeepAspect(boolean) = false
+<ExampleUIControlBoolean clean="true" />
+
Whether to keep aspect for symbols in the form of `path://`.
#${prefix} symbolOffset(Array) = [0, 0]
+<ExampleUIControlVector separate="true" dims="x,y" />
+
Offset of ${name} symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.
For example, `[0, '50%']` means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.
diff --git a/en/option/partial/text-style.md b/en/option/partial/text-style.md
index 6e395de..64b6af5 100644
--- a/en/option/partial/text-style.md
+++ b/en/option/partial/text-style.md
@@ -39,6 +39,8 @@ Height of text block.
#${prefix} overflow(string) = 'none'
+<ExampleUIControlEnum options="truncate,break,breakAll" />
+
Determine how to display the text when it's overflow. Available when `width` is set.
+ `'truncate'` Truncate the text and trailing with `ellipsis`.
@@ -110,6 +112,8 @@ For more details, see [Rich Text](tutorial.html#Rich%20Text) please.
#${prefix} color(Color) = ${defaultColor|default('"#fff"')}
+<ExampleUIControlColor default="${defaultColor|default(null)}" />
+
${name} text color.
{{ if: ${enableAutoColor} }}
@@ -118,6 +122,8 @@ ${name} text color.
#${prefix} fontStyle(string) = 'normal'
+<ExampleUIControlEnum default="normal" options="normal,italic,oblique" />
+
${name} font style.
Options are:
@@ -127,6 +133,8 @@ Options are:
#${prefix} fontWeight(string|number) = ${defaultFontWeight|default('normal')}
+<ExampleUIControlEnum default="normal" options="normal,bold,bolder,lighter" />
+
${name} font thick weight.
Options are:
@@ -138,17 +146,23 @@ Options are:
#${prefix} fontFamily(string) = 'sans-serif'
+<ExampleUIControlEnum default="sans-serif" options="sans-serif,serif,monospace,Arial,Courier New" />
+
${name} font family.
Can also be 'serif' , 'monospace', ...
#${prefix} fontSize(number) = ${defaultFontSize|default(12)}
+<ExampleUIControlNumber default="${defaultFontSize|default(12)}" min="1" step="1" />
+
${name} font size.
{{ if: !${noAlign} }}
#${prefix} align(string) = ${defaultAlign}
+<ExampleUIControlEnum options="left,center,right" />
+
Horizontal alignment of text, automatic by default.
Options are:
@@ -165,6 +179,8 @@ Options are:
{{ if: !${noVerticalAlign} }}
#${prefix} verticalAlign(string) = ${defaultVerticalAlign}
+<ExampleUIControlEnum options="top,middle,bottom" />
+
Vertical alignment of text, automatic by default.
Options are:
@@ -180,6 +196,8 @@ Options are:
#${prefix} lineHeight(number)
+<ExampleUIControlNumber min="0" step="1" default="12" />
+
Line height of the text fragment.
{{ use: partial-text-style-rich-inherit(
@@ -190,6 +208,8 @@ Line height of the text fragment.
{{ if: !${noBox} }}
#${prefix} backgroundColor(string|Object) = 'transparent'
+<ExampleUIControlColor default="#fff" />
+
Background color of the text fragment.
Can be color string, like `'#123234'`, `'red'`, `'rgba(0,23,11,0.3)'`.
@@ -215,6 +235,8 @@ auto adapted by default.
#${prefix} borderColor(Color) = 'transparent'
+<ExampleUIControlColor default="#fff" />
+
Border color of the text fragment.
{{ if: ${enableAutoColor} }}
@@ -223,14 +245,20 @@ Border color of the text fragment.
#${prefix} borderWidth(number) = 0
+<ExampleUIControlNumber min="0" step="0.5" />
+
Border width of the text fragment.
#${prefix} borderRadius(number) = 0
+<ExampleUIControlVector min="0" dims="LT,RT, RB, LB" />
+
Border radius of the text fragment.
#${prefix} padding(number|Array) = 0
+<ExampleUIControlVector min="0" dims="T,R,B,L" />
+
Padding of the text fragment, for example:
+ `padding: [3, 4, 5, 6]`: represents padding of `[top, right, bottom, left]`.
@@ -241,18 +269,26 @@ Notice, `width` and `height` specifies the width and height of the content, with
#${prefix} shadowColor(Color) = 'transparent'
+<ExampleUIControlColor />
+
Shadow color of the text block.
#${prefix} shadowBlur(number) = 0
+<ExampleUIControlNumber min="0" step="0.5" />
+
Show blur of the text block.
#${prefix} shadowOffsetX(number) = 0
+<ExampleUIControlNumber step="0.5" />
+
Shadow X offset of the text block.
#${prefix} shadowOffsetY(number) = 0
+<ExampleUIControlNumber step="0.5" />
+
Shadow Y offset of the text block.
{{ /if }}
@@ -277,6 +313,8 @@ Notice, `width` and `height` only work when `rich` specified.
#${prefix} textBorderColor(Color) = 'transparent'
+<ExampleUIControlColor />
+
Storke color of the text.
{{ if: ${enableAutoColor} }}
@@ -285,22 +323,32 @@ Storke color of the text.
#${prefix} textBorderWidth(number) = 0
+<ExampleUIControlNumber min="0" step="0.5" />
+
Storke line width of the text.
#${prefix} textShadowColor(Color) = 'transparent'
+<ExampleUIControlColor default="#000" />
+
Shadow color of the text itself.
#${prefix} textShadowBlur(number) = 0
+<ExampleUIControlNumber min="0" step="0.5" />
+
Shadow blue of the text itself.
#${prefix} textShadowOffsetX(number) = 0
+<ExampleUIControlNumber step="0.5" />
+
Shadow X offset of the text itself.
#${prefix} textShadowOffsetY(number) = 0
+<ExampleUIControlNumber step="0.5" />
+
Shadow Y offset of the text itself.
diff --git a/en/option/partial/tooltip-common.md b/en/option/partial/tooltip-common.md
index b0ea043..f5315ce 100644
--- a/en/option/partial/tooltip-common.md
+++ b/en/option/partial/tooltip-common.md
@@ -81,10 +81,14 @@ tooltip settings in this series data.
#${prefix} show(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether to show the tooltip component, including tooltip floating layer and [axisPointer](~tooltip.axisPointer).
#${prefix} trigger(string) = 'item'
+<ExampleUIControlEnum default="item,axis,none" />
+
Type of triggering.
Options:
@@ -116,6 +120,8 @@ Configuration item for axisPointer.
##${prefix} type(string) = 'line'
+<ExampleUIControlEnum default="none,line,shadow,cross" />
+
Indicator type.
Options:
@@ -312,6 +318,8 @@ The background color of tooltip's floating layer.
#${prefix} borderColor(Color) = '#333'
+<ExampleUIControlColor default="#333" />
+
{{ use: partial-tooltip-scope-tip(
scope = ${scope}
) }}
@@ -320,6 +328,8 @@ The border color of tooltip's floating layer.
#${prefix} borderWidth(number) = 0
+<ExampleUIControlNumber default="0" step="0.5" />
+
{{ use: partial-tooltip-scope-tip(
scope = ${scope}
) }}
@@ -328,6 +338,8 @@ The border width of tooltip's floating layer.
#${prefix} padding(number) = 5
+<ExampleUIControlVector dims="T,R,B,L" default="5,5,5,5" />
+
{{ use: partial-tooltip-scope-tip(
scope = ${scope}
) }}
diff --git a/en/option/series/bar.md b/en/option/series/bar.md
index 618fb2e..3773ebc 100644
--- a/en/option/series/bar.md
+++ b/en/option/series/bar.md
@@ -31,6 +31,8 @@ Bar chart shows different data through the height of a bar, which is used in [re
version = "4.5.0"
) }}
+<ExampleUIControlBoolean clean="true" />
+
If to add round caps at the end of the bar sectors. Valid only for bar series on polar coordinates.
~[800x500](${galleryViewPath}polar-roundCap&reset=1&edit=1)
@@ -41,6 +43,8 @@ If to add round caps at the end of the bar sectors. Valid only for bar series on
version = "4.7.0"
) }}
+<ExampleUIControlBoolean clean="true" />
+
Whether to show background behind each bar. Use [backgroundStyle](~series-bar.backgroundStyle) to set background style.
~[800x400](${galleryViewPath}bar-background&reset=1&edit=1)
@@ -249,18 +253,26 @@ The value of a single data item.
#${prefix} color(Color) = ${defaultColor|default('auto')}
+<ExampleUIControlColor />
+
Bar color. {{ if: ${useColorPalatte} }} By default, colors from global palette [option.color](~color) is used. {{ /if }}
#${prefix} borderColor(Color) = '#000'
+<ExampleUIControlColor value="#000" />
+
The border color of bar.
#${prefix} borderWidth(number) = 0
+<ExampleUIControlNumber value="0" min="0" step="0.5" />
+
The border width of bar. defaults to have no border.
#${prefix} borderType(string) = 'solid'
+<ExampleUIControlEnum default="solid" options="solid,dashed,dotted" />
+
柱条的描边类型，默认为实线，支持 `'dashed'`, `'dotted'`。
{{ use: partial-border-radius(
diff --git a/en/option/series/boxplot.md b/en/option/series/boxplot.md
index 80cbdc6..b094c8f 100644
--- a/en/option/series/boxplot.md
+++ b/en/option/series/boxplot.md
@@ -52,6 +52,8 @@ The default value is decided by:
## boxWidth(Array) = [7, 50]
+<ExampleUIControlPercentVector default="7,50" min="0" dims="min,max" />
+
Up and bottom boundary of box width. The array is in the form of `[min, max]`.
It could be absolute value in pixel, such as `[7, 50]`, or percentage, such as `['40%', '90%']`. The percentage means the percentage to the maximum possible width.
@@ -172,8 +174,7 @@ Emphasis state of a single data.
prefix = "#",
seriesType = "boxplot",
hasCoord = true,
- hasType = true,
- name = "mark point"
+ hasType = true
) }}
{{ use: partial-z-zlevel(
diff --git a/en/option/series/candlestick.md b/en/option/series/candlestick.md
index b2b6c74..2c2ed83 100644
--- a/en/option/series/candlestick.md
+++ b/en/option/series/candlestick.md
@@ -65,6 +65,8 @@ The default value is decided by:
## barWidth(number)
+<ExampleUIControlPercent default="70%" min="0" />
+
Specify bar width. Absolute value (like `10`) or percentage (like `'20%'`, according to band width) can be used. Auto adapt by default.
## barMinWidth(number|string)
@@ -193,8 +195,7 @@ Emphasis style of a candle box.
prefix = "#",
seriesType = "candlestick",
hasCoord = true,
- hasType = true,
- name = "mark point"
+ hasType = true
) }}
{{ use: partial-clip(
@@ -225,30 +226,40 @@ Emphasis style of a candle box.
#${prefix} color(Color) = ${defaultColor}
+<ExampleUIControlColor />
+
Fill color of bullish candle stick.
{{ use: partial-color-desc() }}
#${prefix} color0(Color) = ${defaultColor0}
+<ExampleUIControlColor />
+
Fill color of bearish candle stick.
{{ use: partial-color-desc() }}
#${prefix} borderColor(Color) = ${defaultBorderColor}
+<ExampleUIControlColor />
+
Border color of bullish candle stick.
{{ use: partial-color-desc() }}
#${prefix} borderColor0(Color) = ${defaultBorderColor0}
+<ExampleUIControlColor />
+
Border color of bearish candle stick.
{{ use: partial-color-desc() }}
#${prefix} borderWidth(number) = ${defaultBorderWidth}
+<ExampleUIControlNumber min="0" step="0.5" default="${defaultBorderWidth}" />
+
Border width of candlestick. There is no border when it is `0`.
{{ use: partial-style-shadow-opacity(
diff --git a/en/option/series/custom.md b/en/option/series/custom.md
index a2ad61b..dee8f2b 100644
--- a/en/option/series/custom.md
+++ b/en/option/series/custom.md
@@ -447,7 +447,7 @@ Value of data item.
{{ use: partial-clip(
prefix = "#",
- defaultClip = 'false'
+ defaultClip = false
) }}
{{ use: partial-z-zlevel(
diff --git a/en/option/series/effectScatter.md b/en/option/series/effectScatter.md
index eab11fe..fe30c12 100644
--- a/en/option/series/effectScatter.md
+++ b/en/option/series/effectScatter.md
@@ -19,10 +19,14 @@ The scatter (bubble) graph with ripple animation. The special animation effect c
## effectType(string) = 'ripple'
+<ExampleUIControlEnum options="ripple" />
+
Type of effect. Only ripple effect of `'ripple'` is supported currently.
## showEffectOn(string) = 'render'
+<ExampleUIControlEnum options="render,emphasis" default="render" />
+
When to show the effect.
**Options: **
@@ -39,18 +43,26 @@ Related configurations about ripple effect.
version = "4.4.0"
) }}
+<ExampleUIControlColor />
+
Color of the ripple rings. The default value is the color of scatter.
### period(number) = 4
+<ExampleUIControlNumber min="0" default="4" step="0.1" />
+
The period duration of animation, in seconds.
### scale(number) = 2.5
+<ExampleUIControlNumber min="1" default="2.5" step="0.1" />
+
The maximum zooming scale of ripples in animation.
### brushType(string) = 'fill'
+<ExampleUIControlEnum options="stroke,fill" default="fill" />
+
The brush type for ripples. options: `'stroke'` and `'fill'`.
{{ use: partial-coord-sys(
@@ -63,7 +75,6 @@ The brush type for ripples. options: `'stroke'` and `'fill'`.
) }}
{{ use: partial-symbol(
- name = "effectScatter",
seriesType = "effectScatter",
defaultSymbol = "'circle'",
defaultSymbolSize = 10,
@@ -177,8 +188,7 @@ Emphasis state of the specified single data.
prefix = "#",
seriesType = "effectScatter",
hasCoord = true,
- hasType = true,
- name = "mark point"
+ hasType = true
) }}
{{ use: partial-z-zlevel(
diff --git a/en/option/series/funnel.md b/en/option/series/funnel.md
index e93bf6b..3d7751d 100644
--- a/en/option/series/funnel.md
+++ b/en/option/series/funnel.md
@@ -18,40 +18,56 @@
## min(number) = 0
+<ExampleUIControlNumber default="0" step="1" />
+
The specified minimum value.
## max(number) = 100
+<ExampleUIControlNumber default="100" step="1" />
+
The specified maximum value.
## minSize(number|string) = '0%'
+<ExampleUIControlPercent default="0%" />
+
The mapped width from minimum data value [min](~series-funnel.min).
It can be absolute pixel and also the percentage of [layout width](~series-funnel.width). If you don't want the graph of minimum value to be a triangle, you can set up this property larger than 0.
## maxSize(number|string) = '100%'
+<ExampleUIControlPercent default="100%" />
+
The mapped width from maximum data value [max](~series-funnel.max).
It can be absolute pixel and also the percentage of [layout width](~series-funnel.width).
## orient(string) = 'vertical'
+<ExampleUIControlEnum options="vertical,horizontal" />
+
Orient of funnel，Can be `'vertical'` or `'horizontal'`.
## sort(string|Function) = 'descending'
+<ExampleUIControlEnum options="none,descending,ascending" default="descending" />
+
Data sorting, which can be whether `'ascending'`, `'descending'`, `'none'`(in data order) or a function, which is the same as `Array.prototype.sort(function (a, b) { ... })`;
## gap(number) = 0
+<ExampleUIControlNumber default="0" min="0" step="0.5" />
+
Gap between each trapezoid.
{{ use: partial-legend-hover-link() }}
## funnelAlign(string) = 'center'
+<ExampleUIControlEnum options="left,center,right" default="center" />
+
Horizontal align. Defaults to align center. Can be 'left', 'right', 'center'.
## label(Object)
@@ -239,8 +255,7 @@ The label configuration of a single data item.
{{ use: partial-marker(
prefix = "#",
- seriesType = "funnel",
- name = "mark point"
+ seriesType = "funnel"
) }}
{{ use: partial-silent(
diff --git a/en/option/series/gauge.md b/en/option/series/gauge.md
index 641aec6..68569b6 100644
--- a/en/option/series/gauge.md
+++ b/en/option/series/gauge.md
@@ -22,20 +22,28 @@
## radius(number|string) = '75%'
+<ExampleUIControlPercent default="75%" />
+
The radius of gauge chart. It can be a percentage value of the smaller of container half width and half height, also can be an absolute value.
{{ use: partial-legend-hover-link() }}
## startAngle(number) = 225
+<ExampleUIControlAngle min="-360" max="360" default="225" step="1" />
+
The start angle of gauge chart. The direct right side of [circle center](~series-gauge.center) is `0` degree, the right above it is `90` degree, the direct left side of it is `180` degree.
## endAngle(number) = -45
+<ExampleUIControlAngle min="-360" max="360" default="-45" step="1" />
+
The end angle of gauge chart.
## clockwise(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether the scale in gauge chart increases clockwise.
## data(Array)
@@ -48,18 +56,26 @@ Data name.
### value(number)
+<ExampleUIControlNumber default="0" step="1" />
+
Data value.
## min(number) = 0
+<ExampleUIControlNumber default="0" step="1" />
+
The minimum data value which map to [minAngle](~series-gauge.minAngle).
## max(number) = 100
+<ExampleUIControlNumber default="100" step="1" />
+
The maximum data value which map to [maxAngle](~series-gauge.maxAngle).
## splitNumber(number) = 10
+<ExampleUIControlNumber min="1" default="10" step="1" />
+
The number of split segments of gauge chart scale.
## axisLine(Object)
@@ -68,6 +84,8 @@ The related configuration about the axis line of gauge chart.
### show(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether to show the axis line of gauge chart.
### lineStyle(Object)
@@ -97,10 +115,14 @@ The style of split line.
### show(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether to show the split line.
### length(number|string) = 30
+<ExampleUIControlPercent default="30" min="0" step="0.5" />
+
The length of split line, can be a pecentage value relative to radius.
### lineStyle(Object)
@@ -118,14 +140,20 @@ The tick line style.
### show(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether to show the scale.
### splitNumber(number) = 5
+<ExampleUIControlNumber min="1" default="5" step="1" />
+
The split scale number between split line.
### length(number|string) = 8
+<ExampleUIControlPercent default="8" min="0" step="0.5" />
+
The length of tick line, can be a pecentage value relative to radius.
### lineStyle(Object)
@@ -143,10 +171,14 @@ Axis tick label.
### show(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether to show the label.
### distance(number) = 5
+<ExampleUIControlNumber default="5" min="0" step="0.5" />
+
The distance between the label and tick line.
### formatter(string|Function)
@@ -175,14 +207,20 @@ Gauge chart pointer.
### show(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether to show the pointer.
### length(string|number) = '80%'
+<ExampleUIControlPercent default="80%" min="0" step="0.5" />
+
The length of pointer which could be absolute value and also the percentage relative to [radius](~series-gauge.radius).
### width(number) = 8
+<ExampleUIControlNumber default="8" min="0" step="0.5" />
+
The width of pointer.
## itemStyle(Object)
@@ -215,10 +253,14 @@ The title of gauge chart.
### show(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether to show the title.
### offsetCenter(Array) = [0, '-40%']
+<ExampleUIControlPercentVector default="0,-40%" dims="x,y" />
+
The offset position relative to the center of gauge chart. The first item of array is the horizontal offset; the second item of array is the vertical offset. It could be absolute value and also the percentage relative to the radius of gauge chart.
{{ use: partial-text-style(
@@ -235,30 +277,44 @@ The detail about gauge chart which is used to show data.
### show(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether to show the details.
### width(number) = 100
+<ExampleUIControlPercent default="100" min="0" step="1" />
+
The width of detail.
### height(number) = 40
+<ExampleUIControlPercent default="40" min="0" step="1" />
+
The height of detail.
### backgroundColor(Color) = 'transparent'
+<ExampleUIControlColor />
+
The background color of detail.
### borderWidth(number) = 0
+<ExampleUIControlNumber min="0" step="0.5" />
+
The border width of detail.
### borderColor(Color) = '#ccc'
+<ExampleUIControlColor default="#ccc" />
+
The border color of detail.
### offsetCenter(Array) = [0, '40%']
+<ExampleUIControlPercentVector default="0,-40%" dims="x,y" />
+
The offset position relative to the center of gauge chart. The first item of array is the horizontal offset; the second item of array is the vertical offset. It could be absolute value and also the percentage relative to the radius of gauge chart.
### formatter(Function|string)
@@ -283,6 +339,8 @@ formatter: function (value) {
#### color(Color) = 'auto'
+<ExampleUIControlColor />
+
The text color. Defaults to use [the color of section](~series-gauge.axisLine.lineStyle.color) where the numerical value belongs to.
{{ use: partial-marker(
diff --git a/en/option/series/graph.md b/en/option/series/graph.md
index 85b5ec0..e049572 100644
--- a/en/option/series/graph.md
+++ b/en/option/series/graph.md
@@ -37,6 +37,8 @@ Whether to enable the highlight animation effect of mousr hover node.
## center(Array)
+<ExampleUIControlVector default="0,0" dims="x,y" />
+
Center of current view-port.
Example:
@@ -46,10 +48,14 @@ center: [115.97, 29.71]
## zoom(number) = 1
+<ExampleUIControlNumber default="1" min="0" step="0.1" />
+
Zoom rate of current view-port.
## layout(string) = 'none'
+<ExampleUIControlEnum options="none,force,circular" />
+
Graph layout.
**Options: **
@@ -65,6 +71,8 @@ Configuration about circular layout.
### rotateLabel(boolean) = false
+<ExampleUIControlBoolean />
+
Whether to rotate the label automatically.
## force(Object)
@@ -83,26 +91,36 @@ You can also use circular layout `'circular'`.
### repulsion(Array|number) = 50
+<ExampleUIControlNumber min="0" step="5" default="50" />
+
The repulsion factor between nodes. The repulsion will be stronger and the distance between 2 nodes becomes further as this value becomes larger.
It can be an array to represent the range of repulsion. In this case larger value have larger repulsion and smaller value will have smaller repulsion.
### gravity(number) = 0.1
+<ExampleUIControlNumber min="0" step="0.01" default="0.1" />
+
The gravity factor enforcing nodes approach to the center. The nodes will be closer to the center as the value becomes larger.
### edgeLength(Array|number) = 30
+<ExampleUIControlNumber min="0" step="5" default="30" />
+
The distance between 2 nodes on edge. This distance is also affected by [repulsion](~series-graph.force.repulsion).
It can be an array to represent the range of edge length. In this case edge with larger value will be shorter, which means two nodes are closer. And edge with smaller value will be longer.
### layoutAnimation(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Because the force-directed layout will be steady after several iterations, this parameter will be decide whether to show the iteration animation of layout. It is not recommended to be closed on browser when there are a lot of node data (>100) as the layout process will cause browser to hang.
### friction(number) = 0.6
+<ExampleUIControlNumber min="0" max="1" step="0.01" default="0.6" />
+
{{ use: partial-version(
version = "4.5.0"
) }}
@@ -117,14 +135,20 @@ But it is still an experimental option, see [#11024](https://github.com/apache/i
## nodeScaleRatio(number) = 0.6
+<ExampleUIControlNumber min="0" max="1" step="0.01" default="0.6" />
+
Related zooming ratio of nodes when mouse zooming in or out. When it is set as 0, the node will not zoom as the mouse zooms.
## draggable(boolean) = false
+<ExampleUIControlBoolean default="false" />
+
If node is draggable. Only available when using force-directed layout.
## focusNodeAdjacency(boolean) = false
+<ExampleUIControlBoolean default="false" />
+
Whether to focus/highlight the hover node and it's adjacencies.
{{ use: partial-symbol(
@@ -146,6 +170,8 @@ edgeSymbol: ['circle', 'arrow']
## edgeSymbolSize(Array|number) = 10
+<ExampleUIControlVector min="0" default="10" />
+
Size of symbol of two ends of edge line. Can be an array or a single number.
For example:
@@ -187,7 +213,7 @@ The style of edge line. [lineStyle.color](~series-graph.lineStyle.color) can be
{{ use: partial-label(
prefix = "##",
defaultPosition = "'inside'",
- formatter1d = true
+ formatter2d = true
) }}
## edgeLabel(Object)
@@ -262,7 +288,7 @@ The label style of node in this category.
{{ use: partial-label(
prefix = "###",
defaultPosition = "inside",
- formatter1d = true
+ formatter2d = true
) }}
### emphasis(Object)
@@ -412,6 +438,8 @@ Line style of edges.
#### curveness(number) = 0
+<ExampleUIControlNumber min="0" max="1" step="0.01" default="0" />
+
The curveness of edge, supporting values from 0 to 1. The curveness will be larger as the value becomes lager.
### label(Object)
@@ -458,8 +486,7 @@ Alias of [links](~series-graph.links)
prefix = "#",
seriesType = "graph",
hasType = true,
- hasCoord = true,
- name = "mark point"
+ hasCoord = true
) }}
{{ use: partial-rect-layout-width-height(
diff --git a/en/option/series/heatmap.md b/en/option/series/heatmap.md
index 053073b..74ae0cd 100644
--- a/en/option/series/heatmap.md
+++ b/en/option/series/heatmap.md
@@ -135,8 +135,7 @@ Style of a single data point. It is valid with [coordinateSystem](~series-heatma
{{ use: partial-marker(
prefix = "#",
- seriesType = "heatmap",
- name = "mark point"
+ seriesType = "heatmap"
) }}
{{ use: partial-z-zlevel(
diff --git a/en/option/series/line.md b/en/option/series/line.md
index 0d6331e..f10d187 100644
--- a/en/option/series/line.md
+++ b/en/option/series/line.md
@@ -31,19 +31,22 @@ Broken line chart relates all the data points [symbol](~series-line.symbol) by b
{{ use: partial-symbol(
seriesType = "line",
- defaultSymbol = "'circle'",
+ defaultSymbol = "'emptyCircle'",
defaultSymbolSize = 4,
prefix = "#",
- hasCallback = true,
- name = "line point"
+ hasCallback = true
) }}
## showSymbol(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether to show symbol. It would be shown during tooltip hover.
## showAllSymbol(boolean) = 'auto'
+<ExampleUIControlBoolean />
+
Only work when main axis is `'category'` axis (`axis.type` is `'category'`). Optional values:
+ `'auto'`: Default value. Show all symbols if there is enough space. Otherwise follow the interval strategy with with [axisLabel.interval](~xAxis.axisLabel.interval).
+ `true`: Show all symbols.
@@ -51,6 +54,8 @@ Only work when main axis is `'category'` axis (`axis.type` is `'category'`). Opt
## hoverAnimation(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Set this to `false` to prevent the animation effect when the mouse is hovering over a symbol
{{ use: partial-legend-hover-link() }}
@@ -67,6 +72,8 @@ The effect of the below example could be seen through stack switching of [toolbo
## connectNulls(boolean) = false
+<ExampleUIControlBoolean />
+
Whether to connect the line across null points.
{{ use: partial-clip(
@@ -75,6 +82,8 @@ Whether to connect the line across null points.
## step(string|boolean) = false
+<ExampleUIControlEnum options='start,middle,end' />
+
Whether to show as a step line. It can be `true`, `false`. Or `'start'`, `'middle'`, `'end'`. Which will configure the turn point of step line.
See the example using different `step` options:
@@ -246,8 +255,7 @@ Emphasis state of specified single data.
prefix = "#",
seriesType = "line",
hasCoord = true,
- hasType = true,
- name = "mark point"
+ hasType = true
) }}
{{ use: partial-z-zlevel(
diff --git a/en/option/series/lines.md b/en/option/series/lines.md
index bcbe4c1..323ffd2 100644
--- a/en/option/series/lines.md
+++ b/en/option/series/lines.md
@@ -197,8 +197,7 @@ Label of a single line. Available when [polyline](~series-lines.polyline) is not
{{ use: partial-marker(
prefix = "#",
- seriesType = "lines",
- name = "mark point"
+ seriesType = "lines"
) }}
{{ use: partial-clip(
diff --git a/en/option/series/map.md b/en/option/series/map.md
index 361fde3..5a0fdc7 100644
--- a/en/option/series/map.md
+++ b/en/option/series/map.md
@@ -89,7 +89,7 @@ Color of the area.
{{ use: partial-color-desc() }}
{{ use: partial-item-style(
- prefix = '####'
+ prefix = '###'
) }}
### label(Object)
@@ -134,8 +134,7 @@ Area color in the map.
{{ use: partial-marker(
prefix = "#",
seriesType = "map",
- hasCoord = true,
- name = "mark point"
+ hasCoord = true
) }}
{{ use: partial-silent(
diff --git a/en/option/series/parallel.md b/en/option/series/parallel.md
index be39c89..be946a1 100644
--- a/en/option/series/parallel.md
+++ b/en/option/series/parallel.md
@@ -196,18 +196,26 @@ const option = {
## inactiveOpacity(number) = 0.05
+<ExampleUIControlNumber min="0" max="1" default="0.05" step="0.01" />
+
When perform brush selection, the unselected lines will be set as this transparency rate (which could darken those lines).
## activeOpacity(number) = 1
+<ExampleUIControlNumber min="0" max="1" default="1" step="0.01" />
+
When perform brush selection, the selected lines will be set as this transparency rate (which could highlight those lines).
## realtime(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether to update view in realtime.
## smooth(boolean|number) = false
+<ExampleUIControlBoolean />
+
Whether to smooth the line. It defaults to be `false` and can be set as `true` or the values from 0 to 1 which indicating the smoothness.
{{ use: partial-progressive(
diff --git a/en/option/series/pictorialBar.md b/en/option/series/pictorialBar.md
index 0765d8f..96016a7 100644
--- a/en/option/series/pictorialBar.md
+++ b/en/option/series/pictorialBar.md
@@ -112,7 +112,7 @@ See the example below:
) }}
{{ use: partial-barGrid(
- seriesType = 'bar',
+ seriesType = 'pictorialBar',
barGapDefault = "-100%"
) }}
@@ -180,8 +180,7 @@ The style setting of the text label in a single bar.
prefix = "#",
seriesType = "pictorialBar",
hasCoord = true,
- hasType = true,
- name = "mark point"
+ hasType = true
) }}
{{ use: partial-z-zlevel(
@@ -223,6 +222,8 @@ Example:
#${prefix} symbolSize(number|Array) = ['100%', '100%']
+<ExampleUIControlPercent default="100%,100%" dims="W,H" />
+
Symbol size.
It can be set as a array, which means [width, height]. For example, `[20, 10]` means width `20` and height `10`. It can also be set as a single number, like `10`, which is equivalent to `[10, 10]`.
@@ -249,6 +250,8 @@ For example:
#${prefix} symbolPosition(string) = 'start'
+<ExampleUIControlEnum options="start,end,center" default="start" />
+
Specify the location of the graphic elements. Optional values:
+ `'start'`: The edge of graphic element inscribes with the start of the reference bar.
@@ -264,6 +267,8 @@ For example:
#${prefix} symbolOffset(Array) = [0, 0]
+<ExampleUIControlPercentVector default="0,0" dims="x,y" />
+
Specify the offset of graphic element according to its original position. Adopting `symbolOffset` is the final step in layout, which enables adjustment of graphic element position.
A absolute value can be set (like `10`), or a percent value can be set (like `'120%'`、`['55%', 23]`), which is based on its [symbolSize](~series-pictorialBar.symbolSize).
@@ -279,6 +284,8 @@ For example:
#${prefix} symbolRotate(number)
+<ExampleUIControlAngle min="-360" max="360" step="1" />
+
The degree of the rotation of a graphic element.
Notice, `symbolRotate` will not affect the position of the graphic element, but just rotating by its center.
@@ -289,6 +296,8 @@ Notice, `symbolRotate` will not affect the position of the graphic element, but
#${prefix} symbolRepeat(boolean|number|string)
+<ExampleUIControlEnum options="true,false,fixed" />
+
Whether to repeat a graphic element. Optional values:
+ `false`/`null`/`undefined`: Do not repeat, that is, each graphic element represents a data item.
@@ -305,6 +314,8 @@ For example:
#${prefix} symbolRepeatDirection(string) = 'start'
+<ExampleUIControlEnum options="start,end" default="start" />
+
When [symbolRepeat](~series-pictorialBar.symbolRepeat) is used, `symbolRepeatDirection` specifies the render order of the repeated graphic elements. The setting is useful in these cases below:
+ If [symbolMargin](~series-pictorialBar.symbolMargin) is set as a negative value, repeated elements will overlap with each other. `symbolRepeatDirection` can be used to specify the order of overlap.
@@ -322,6 +333,8 @@ For example:
#${prefix} symbolMargin(number|string)
+<ExampleUIControlPercentVector default="0,0" dims="x,y" />
+
Specify margin of both sides of a graphic element. ("both sides" means the two sides in the direction of its value axis). It works only when [symbolRepeat](~series-pictorialBar.symbolRepeat) is used.
Absolute value can be used (like `20`), or percent value can be used (like `'-30%'`), which is based on its [symbolSize](~series-pictorialBar.symbolSize).
@@ -346,6 +359,8 @@ For example:
#${prefix} symbolClip(boolean) = false
+<ExampleUIControlBoolean />
+
Whether to clip graphic elements.
+ `false`/null/undefined: The whole graphic elements represent the size of value.
@@ -409,6 +424,8 @@ Check this example:
#${prefix} symbolPatternSize(number) = 400
+<ExampleUIControlNumber default="400" step="10" min="0" />
+
Image can be used as the pattern of graphic elements.
```js
@@ -442,6 +459,8 @@ Specify the relationship of overlap between graphic elements. A bigger value mea
#${prefix} hoverAnimation(boolean) = false
+<ExampleUIControlBoolean />
+
Whether to enable hover animation.
{{ use: pictorialBar-symbol-attrs-cascade(
diff --git a/en/option/series/pie.md b/en/option/series/pie.md
index f9889ab..afef182 100644
--- a/en/option/series/pie.md
+++ b/en/option/series/pie.md
@@ -31,10 +31,14 @@ For multiple pie series in a single chart, you may use [left](~series-pie.left),
## hoverAnimation(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether to enable the zoom animation effects when hovering sectors.
## hoverOffset(number) = 10
+<ExampleUIControlNumber min="0" default="10" />
+
The offset distance of hovered sector.
## selectedMode(boolean|string) = false
@@ -43,26 +47,38 @@ The offset distance of hovered sector.
## selectedOffset(number) = 10
+<ExampleUIControlNumber min="0" default="10" />
+
The offset distance of selected sector.
## clockwise(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether the layout of sectors of pie chart is clockwise.
## startAngle(number) = 90
+<ExampleUIControlAngle step="1" min="0" max="360" default="90" />
+
The start angle, which range is [0, 360].
## minAngle(number) = 0
+<ExampleUIControlAngle step="1" min="0" max="360" default="0" />
+
The minimum angle of sector (0 ~ 360). It prevents some sector from being too small when value is small, which will affect user interaction.
## minShowLabelAngle(number) = 0
+<ExampleUIControlAngle step="1" min="0" max="360" default="0" />
+
If a sector is less than this angle (0 ~ 360), label and labelLine will not be displayed.
## roseType(boolean|string) = false
+<ExampleUIControlEnum options="radius,area" />
+
Whether to show as Nightingale chart, which distinguishs data through radius. There are 2 optional modes:
+ `'radius'` Use central angle to show the percentage of data, radius to show data size.
@@ -70,10 +86,14 @@ Whether to show as Nightingale chart, which distinguishs data through radius. Th
## avoidLabelOverlap(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether to enable the strategy to avoid labels overlap. Defaults to be enabled, which will move the label positions in the case of labels overlapping
## stillShowZeroSum(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether to show sector when all data are zero.
{{ use: partial-cursor() }}
@@ -100,6 +120,8 @@ Whether to show sector when all data are zero.
### alignTo(string) = 'none'
+<ExampleUIControlEnum options="labelLine,edge" />
+
Label aligning policy. Valid only when `position` is `'outer'`.
Since ECharts v4.6.0, we provide `'labelLine'` and `'edge'` two extra valid `alignTo` values.
@@ -112,6 +134,8 @@ Since ECharts v4.6.0, we provide `'labelLine'` and `'edge'` two extra valid `ali
### margin(string|number) = '25%'
+<ExampleUIControlPercent default="20%" />
+
The horizontal distance between text edges and viewport when [label.position](~series-pie.label.position) is `'outer'` and [label.alignTo](~series-pie.label.alignTo) is `'edge'`.
~[900x250](${galleryViewPath}doc-example/pie-label-margin&edit=1&reset=1)
@@ -120,12 +144,16 @@ In most cases, you need a small `margin` value like `10` for mobile devices to m
### bleedMargin(number) = 10
+<ExampleUIControlNumber default="10" min="0" step="1" />
+
The horizontal distance between text and viewport when [label.position](~series-pie.label.position) is `'outer'` and [label.alignTo](~series-pie.label.alignTo) is `'none'` or `'labelLine'`. Longer text will be truncated into `'...'`.
~[800x250](${galleryViewPath}doc-example/pie-label-bleedMargin&edit=1&reset=1)
### distanceToLabelLine(number) = 5
+<ExampleUIControlNumber default="5" min="0" step="0.5" />
+
Distance between label line and text.
~[800x250](${galleryViewPath}doc-example/pie-label-distanceToLabelLine&edit=1&reset=1)
@@ -275,8 +303,7 @@ The label configuration of a single sector.
{{ use: partial-marker(
prefix = "#",
- seriesType = "pie",
- name = "mark point"
+ seriesType = "pie"
) }}
{{ use: partial-silent(
@@ -285,12 +312,16 @@ The label configuration of a single sector.
## animationType(string) = 'expansion'
+<ExampleUIControlEnum options="expansion,scale" />
+
Initial animation type.
+ `'expansion'` Default expansion animation.
+ `'scale'` Scale animation. You can use it with `animationEasing='elasticOut'` to have popup effect.
## animationTypeUpdate(string) = 'transition'
+<ExampleUIControlEnum options="expansion,transition" />
+
{{ use: partial-version(
version = "4.4.0"
) }}
@@ -361,23 +392,31 @@ Label rotation.
#${prefix} show(boolean)
+<ExampleUIControlBoolean />
+
Whether to show the visual guide ine.
{{ if: ${length} }}
#${prefix} length(number)
+<ExampleUIControlNumber default="15" min="0" step="1" />
+
The length of the first segment of visual guide line.
{{ /if }}
{{ if: ${length2} }}
#${prefix} length2(number)
+<ExampleUIControlNumber default="15" min="0" step="1" />
+
The length of the second segment of visual guide line.
{{ /if }}
{{ if: ${smooth} }}
#${prefix} smooth(boolean|number) = false
+<ExampleUIControlBoolean />
+
Whether to smooth the visual guide line. It defaults to be `false` and can be set as `true` or the values from 0 to 1 which indicating the smoothness.
{{ /if }}
diff --git a/en/option/series/radar.md b/en/option/series/radar.md
index 4e531e9..914efc5 100644
--- a/en/option/series/radar.md
+++ b/en/option/series/radar.md
@@ -24,7 +24,6 @@ Here is the example of AQI data which is presented in radar chart.
Index of [radar](~radar) component that radar chart uses.
{{ use: partial-symbol(
- name = "radar",
seriesType = "radar",
defaultSymbol = "'circle'",
defaultSymbolSize = 4,
diff --git a/en/option/series/sankey.md b/en/option/series/sankey.md
index 8111fae..ac1b3fc 100644
--- a/en/option/series/sankey.md
+++ b/en/option/series/sankey.md
@@ -38,14 +38,20 @@ In addition, the edge between two small rectangles in the diagram encodes the `l
## nodeWidth(number) = 20
+<ExampleUIControlNumber default="20" min="0" step="0.5" />
+
The node width of rectangle in Sankey diagram.
## nodeGap(number) = 8
+<ExampleUIControlNumber default="8" min="0" step="0.5" />
+
The gap between any two rectangles in each column of the Sankey diagram.
## nodeAlign(string) = 'justify'
+<ExampleUIControlEnum options="justify,left,right" />
+
Controls the horizontal alignment of nodes in the diagram.
May be:
@@ -60,18 +66,26 @@ Note when [orient](~series-sankey.orient) is `vertical`, `nodeAlign` controls ve
## layoutIterations(number) = 32
+<ExampleUIControlNumber default="32" min="0" max="100" step="1" />
+
The iterations of layout, which is used to iteratively optimize the position of the nodes and edges in the Sankey diagram to reduce the overlapping between nodes and edges. The default value is `32`. If you want the order of the nodes in the chart to be the same with the order in the original [data](~series-sankey.data), you can set the value to be `0`.
## orient(string) = 'horizontal'
+<ExampleUIControlEnum options="horizontal,vertical" />
+
The layout direction of the nodes in the Sankey diagram, which can be horizontal from left to right or vertical from top to bottom. The corresponding parameter values are `horizontal` or `vertical`.
## draggable(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
The drag-and-drop interaction of the node, which is enabled by default. After opening, the user can drag any node in the Sankey diagram to any position. To turn this interaction off, simply set the value to `false`.
## focusNodeAdjacency(boolean|string) = false
+<ExampleUIControlEnum options="false,true,allEdges,outEdges,inEdges" />
+
Support when mouse hovering over a node or an edge, the adjacent nodes and edges are also highlighted. Default off, can be manually opened.
Optional values:
@@ -125,6 +139,8 @@ levels: [{
### depth(number)
+<ExampleUIControlNumber default="0" min="0" step="1" />
+
Specify which layer is set, value starts from 0.
### itemStyle(Object)
diff --git a/en/option/series/scatter.md b/en/option/series/scatter.md
index f28ad46..7d7c1c9 100644
--- a/en/option/series/scatter.md
+++ b/en/option/series/scatter.md
@@ -27,12 +27,13 @@ It could be used with [rectangular coordinate](~grid) and [polar coordinate](~po
## hoverAnimation(boolean)
+<ExampleUIControlBoolean default="true" />
+
Whether to enable the animation effect when mouse is on the symbol.
{{ use: partial-legend-hover-link() }}
{{ use: partial-symbol(
- name = "scatter",
seriesType = "scatter",
defaultSymbol = "'circle'",
defaultSymbolSize = 10,
@@ -160,8 +161,7 @@ Emphasis state of single data.
prefix = "#",
seriesType = "scatter",
hasCoord = true,
- hasType = true,
- name = "mark point"
+ hasType = true
) }}
{{ use: partial-clip(
diff --git a/en/option/series/sunburst.md b/en/option/series/sunburst.md
index c665205..aaef0f4 100644
--- a/en/option/series/sunburst.md
+++ b/en/option/series/sunburst.md
@@ -3,6 +3,8 @@
#${prefix} rotate(string|number) = 'radial'
+<ExampleUIControlEnum options="radial,tangential" default="radial" />
+
If it is `number` type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.
Besides, it can be string `'radial'`, standing for radial rotation; or `'tangential'`, standing for tangential rotation.
@@ -15,12 +17,16 @@ The following example shows different `rotate` settings:
#${prefix} align(string) = 'center'
+<ExampleUIControlEnum options="left,center,right" default="center" />
+
Align of text, which can be `'left'`, `'center'`, or `'right'`. Note that `'left'` stands for inner side, and `'right'` stands for outer side.
~[700x400](${galleryViewPath}doc-example/sunburst-label-align&edit=1&reset=1)
#${prefix} minAngle(number) = null
+<ExampleUIControlAngle min="0" step="1" max="360" />
+
If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.
{{ use: partial-label(
@@ -232,6 +238,8 @@ Children nodes, which is recursively defined. In the same format to [series-sunb
## highlightPolicy(string) = 'descendant'
+<ExampleUIControlEnum default="descendant" options="descendant,ancestor,none" />
+
When mouse hovers a sector, the sector is emphasized. **If `highlightPolicy` is set to be `'descendant'`, then the sector and its descendant will be *highlighted*, and others will be *downplayed*. If `highlightPolicy` is `'ancestor'`, then the sector and its ancestors will be highlighted. If it is set to be `'self'`, then the sector will be highlighted and others downplayed. If it is set to be `'none'`, then others will not be downplayed.**
~[700x350](${galleryViewPath}doc-example/sunburst-highlight-descendant&edit=1&reset=1)
@@ -260,6 +268,8 @@ If `highlightPolicy` is set to be `'ancestor'`, then the result looks like:
## nodeClick(boolean|string) = 'rootToNode'
+<ExampleUIControlEnum default="rootToNode" options="rootToNode,link" />
+
The action of clicking a sector, which can be:
+ `false`: nothing happens.
@@ -268,6 +278,8 @@ The action of clicking a sector, which can be:
## sort(string|Function) = 'desc'
+<ExampleUIControlEnum default="desc" options="desc,asc" />
+
Sorting method that sectors use based on [`value`](~series-sunburst.data.value), which is the sum of children when not set. The default value `'desc'` states for descending order, while it can also be set to be `'asc'` for ascending order, or `null` for not sorting, or callback function like:
```js
@@ -278,6 +290,8 @@ function(nodeA, nodeB) {
## renderLabelForZeroData(boolean) = false
+<ExampleUIControlBoolean />
+
If there is no `name`, whether need to render it.
{{ use: partial-sunburst-label-props(
diff --git a/en/option/series/tree.md b/en/option/series/tree.md
index 9616cd3..9774189 100644
--- a/en/option/series/tree.md
+++ b/en/option/series/tree.md
@@ -37,6 +37,8 @@ The tree diagram is mainly used to visualize the tree data structure, which is a
## layout(string) = 'orthogonal'
+<ExampleUIControlEnum options="orthogonal,radial" default="orthogonal" />
+
The layout of the tree, which can be `orthogonal` and `radial`. Here the `orthogonal` layout is what we usually refer to the `horizontal` and `vertical` direction, the corresponding parameter value is `orthogonal`. The `radial` layout refers to the view that the root node as the center and each layer of nodes as the ring, the corresponding parameter value is `radial`.
**Orthogonal Example：**
@@ -50,6 +52,8 @@ The layout of the tree, which can be `orthogonal` and `radial`. Here the `orthog
## orient(string) = 'LR'
+<ExampleUIControlEnum options="LR,RL,TB,BT" default="LR" />
+
The direction of the `orthogonal` layout in the tree diagram. That means this configuration takes effect only if `layout = 'orthogonal'`. The corresponding directions are `from left to right`, `from right to left`, `from top to bottom`, `from bottom to top`, with shorthand values `'LR'`, `'RL'`, `'TB'`, `'BT'`.
**Note: The previous configuration value `'horizontal'` is equivalent to `'LR'`, `'vertical'` is equivalent to `'TB'`.**
@@ -58,12 +62,13 @@ The direction of the `orthogonal` layout in the tree diagram. That means this co
defaultSymbol = "'emptyCircle'",
defaultSymbolSize = 7,
prefix = "#",
- hasCallback = true,
- name = "tree node"
+ hasCallback = true
) }}
## edgeShape(string) = 'curve'
+<ExampleUIControlEnum options="curve,polyline" default="curve" />
+
{{ use: partial-version(
version = "4.7.0"
) }}
@@ -74,6 +79,8 @@ The shape of the edge which is under the tree `orthogonal layout`. There are two
## edgeForkPosition(string) = '50%'
+<ExampleUIControlPercent default="50%" />
+
This is the position where the polyline branches in the subtree when the shape of the edge is a polyline in the `orthogonal layout`. The position here refers to the percentage of the distance between the bifurcation point and the parent node of the subtree to the height of the entire subtree. The default value is `'50%'`, which can be between ['0', '100%'].
** Note: This configuration item is only valid when `edgeShape = 'polyline'`. **
@@ -84,12 +91,16 @@ This is the position where the polyline branches in the subtree when the shape o
## expandAndCollapse(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Subtree collapses and expands interaction, `default true`. As the drawing area is limited, and usually the nodes of a tree may be more, so there will be hidden between the nodes. In order to avoid this problem, you can put a temporary unrelated subtree folded away, until you need to start when necessary. Such as the above radial layout tree example, the center of the node is filled with blue is the folded away subtree, you can click to expand it.
**Note: If you configure a custom image as the tag for a node, it is not possible to distinguish whether the current node has a collapsed subtree by the fill color. And currently do not support, upload two pictures, respectively represent the collapsing and expansion state of the node. So, if you want to explicitly show the two states of the node, it is recommended to use `ECharts` regular tag types, such as `emptyCircle`.**
## initialTreeDepth(number) = 2
+<ExampleUIControlNumber default="2" min="0" step="1" />
+
The initial level (depth) of the tree. The root node is the 0th layer, then the first layer, the second layer, ... , until the leaf node. This configuration item is primarily used in conjunction with `collapsing and expansion` interactions. The purpose is to prevent the nodes from obscuring each other. If set as -1 or `null` or `undefined`, all nodes are expanded.
## itemStyle(Object)
@@ -278,14 +289,20 @@ Emphasis state of a single node.
#${prefix} color(Color) = "'#ccc'"
+<ExampleUIControlColor default="#ccc" />
+
The color of the tree edge.
#${prefix} width(number) = 1.5
+<ExampleUIControlNumber default="1.5" min="0" />
+
The width of the tree edge.
#${prefix} curveness(number) = 0.5
+<ExampleUIControlNumber default="0.5" min="0" />
+
The curvature of the tree edge.
{{ use: partial-style-shadow(
diff --git a/en/option/series/treemap.md b/en/option/series/treemap.md
index 4340f23..634731c 100644
--- a/en/option/series/treemap.md
+++ b/en/option/series/treemap.md
@@ -67,12 +67,16 @@ Notice: There are some difference in treemap configuration between ECharts3 and
## squareRatio(number)
+<ExampleUIControlNumber min="0.1" default="0.75" step="0.1" />
+
The expected square ratio. Layout would approach the ratio as close as possible.
It defaults to be the golden ratio: `0.5 * (1 + Math.sqrt(5))`.
## leafDepth(number) = null
+<ExampleUIControlNumber min="1" step="1" />
+
When `leafDepth` is set, the feature "drill down" is enabled, which means when clicking a tree node, this node will be set as root and its children will be shown.
`leafDepth` represents how many levels are shown at most. For example, when `leafDepth` is set to `1`, only one level will be shown.
@@ -105,6 +109,8 @@ The behaviour when clicking a node. Optional values are:
## zoomToNodeRatio(number) = 0.32*0.32
+<ExampleUIControlNumber min="0" default="0.1" step="0.01" />
+
The treemap will be auto zoomed to a appropriate ratio when a node is clicked (when [nodeClick](~series-treemap.nodeClick) is set as `'zoomToNode'` and no drill down happens). This configuration item indicates the ratio.
## levels(Array)
@@ -221,6 +227,8 @@ breadcrumb, showing the path of the current node.
### show(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
Whether to show the breadcrumb.
{{ use: partial-rect-layout(
@@ -233,10 +241,14 @@ Whether to show the breadcrumb.
### height(number) = 22
+<ExampleUIControlNumber min="0" default="22" step="1" />
+
The height of breadcrumb.
### emptyItemWidth(number) = 25
+<ExampleUIControlNumber min="0" default="25" step="1" />
+
When is no content in breadcrumb, this minimal width need to be set up.
### itemStyle(Object)
@@ -406,12 +418,16 @@ The value of [series-treemap.data](~series-treemap.data) can be an array. And ea
#${prefix} visualMin(number) = null
+<ExampleUIControlNumber default="0" />
+
The minimal value of current level. Auto-statistics by default.
When [colorMappingBy](~series-treemap.levels.colorMappingBy) is set to `'value'`, you are able to specify extent manually for visual mapping by specifying `visualMin` or `visualMax`.
#${prefix} visualMax(number) = null
+<ExampleUIControlNumber default="100" />
+
The maximal value of current level. Auto-statistics by default.
When [colorMappingBy](~series-treemap.levels.colorMappingBy) is set to `'value'`, you are able to specify extent manually for visual mapping by specifying `visualMin` or `visualMax`.
@@ -467,6 +483,8 @@ For example, `colorSaturation` can be `[0.3, 1]`.
#${prefix} colorMappingBy(string) = 'index'
+<ExampleUIControlEnum options="index,value,id" />
+
Specify the rule according to which each node obtain color from [color list](~series-treemap.levels.color). Optional values:
* `'value'`:
@@ -498,6 +516,8 @@ Since `id` is used to identify node, if user call `setOption` to modify the tree
#${prefix} visibleMin(number) = 10
+<ExampleUIControlNumber default="10" min="0" />
+
A node will not be shown when its area size is smaller than this value (unit: px square).
In this way, tiny nodes will be hidden, otherwise they will huddle together. When user zoom the treemap, the area size will increase and the rectangle will be shown if the area size is larger than this threshold.
@@ -510,6 +530,8 @@ In this way, tiny nodes will be hidden, otherwise they will huddle together. Whe
#${prefix} childrenVisibleMin(number) = null
+<ExampleUIControlNumber default="10" min="0" step="0.5" />
+
Children will not be shown when area size of a node is smaller than this value (unit: px square).
This can hide the details of nodes when the rectangular area is not large enough. When users zoom nodes, the child node would show if the area is larger than this threshold.
@@ -562,6 +584,8 @@ See:
##${prefix} height(number) = 20
+<ExampleUIControlNumber default="20" min="0" step="0.5" />
+
Height of label area.
#${prefix} itemStyle(Object)
@@ -627,33 +651,47 @@ About visual encoding, see details in [series-treemap.levels](~series-treemap.le
#${prefix} color(Color) = null
+<ExampleUIControlColor />
+
The color of a node. It use global palette [option.color](~color) by default.
{{ if: ${itemStyleType} === 'normal' }}
#${prefix} colorAlpha(number) = null
+<ExampleUIControlNumber step="0.01" min="0" max="1" default="1" />
+
The tranparent rate of a node, the range is between 0 ~ 1.
#${prefix} colorSaturation(number) = null
+<ExampleUIControlNumber step="0.01" min="0" max="1" default="0.5" />
+
The color saturation of a node. The range is between 0 ~ 1.
#${prefix} borderWidth(number) = 0
+<ExampleUIControlNumber step="0.5" min="0" />
+
The border width of a node. There is no border when it is set as `0`.
Tip, gaps between child nodes are specified by [gapWidth](~series-treemap.levels.gapWidth)
#${prefix} gapWidth(number) = 0
+<ExampleUIControlNumber step="0.5" min="0" />
+
Gaps between child nodes.
#${prefix} borderColor(Color) = '#fff',
+<ExampleUIControlColor default="#fff" />
+
The border color and gap color of a node.
#${prefix} borderColorSaturation(Color) = null
+<ExampleUIControlNumber step="0.01" min="0" max="1" default="0.5" />
+
The color saturation of a border or gap. The value range is between 0 ~ 1.
Tips:
diff --git a/tool/patchLanguage.js b/tool/patchLanguage.js
index 01a203a..5292fa6 100644
--- a/tool/patchLanguage.js
+++ b/tool/patchLanguage.js
@@ -1,13 +1,12 @@
/**
* Patch zh option doc to en option doc.
*/
-
+/* global Map */
const fs = require('fs');
const path = require('path');
const {compositeTargets} = require('../editor/common/blockHelper');
const {parseBlocks} = require('../editor/common/parseBlocks');
const _ = require('lodash');
-const arrayDiff = require('zrender/lib/core/arrayDiff2');
const {argv} = require('yargs');
const fromLang = argv.from || 'zh';
@@ -15,47 +14,89 @@ const toLang = argv.to || 'en';
console.log(`Patching from ${fromLang.toUpperCase()} to ${toLang.toUpperCase()}`);
-function applyBlocksPatch(fromBlocks, toBlocks) {
- const patchedBlocks = [];
- const diffResult = arrayDiff(toBlocks, fromBlocks, function (a, b) {
- return a.key === b.key;
- });
+function patchArray(fromArr, toArr, getKey, patchers) {
+ const toArrMap = new Map();
+ const result = [];
+ for (let i = 0; i < toArr.length; i++) {
+ const key = getKey(toArr[i]);
+ if (toArrMap.get(key)) {
+ throw new Error(`Duplicate key ${key}`);
+ }
+ toArrMap.set(key, toArr[i]);
+ }
- for (let part of diffResult) {
- if (part.removed) {
- // Just ignore
- for (let i = 0; i < part.indices.length; i++) {
- const toBlock = toBlocks[part.indices[i]];
- if (toBlock.type === 'uicontrol') {
- // Not remove ui control block when patching from en to zh
- patchedBlocks.push(_.clone(toBlock));
- }
- }
+ for (let i = 0; i < fromArr.length; i++) {
+ const key = getKey(fromArr[i]);
+ if (toArrMap.get(key)) {
+ result.push(
+ patchers.update(fromArr[i], toArrMap.get(key))
+ );
}
else {
- for (let i = 0; i < part.indices.length; i++) {
- const fromBlock = fromBlocks[part.indices[i]];
- // if (fromBlock.key === 'content:top.calendar.splitLine.lineStyle') {
- // console.log(part);
- // }
- // Ignore uicontrol block.
- if (fromBlock.type === 'uicontrol') {
- continue;
- }
- const block = _.clone(
- part.added ? fromBlock // New added content in zh doc
- : toBlocks.find(a => a.key === fromBlock.key) // Keep not change
- );
- block.inline = fromBlock.inline;
- patchedBlocks.push(block);
- }
+ result.push(
+ patchers.add(fromArr[i])
+ );
}
}
- return patchedBlocks;
+ return result;
}
-function applyTargetsPatch(fromJson, toJson) {
+function isSimpleChar(str) {
+ for (let i = 0; i < str.length; i++) {
+ if (str.charCodeAt(i) > 128) {
+ return false;
+ }
+ }
+ return true;
+}
+function applyArgsPatch(fromArgs, toArgs) {
+ return patchArray(fromArgs, toArgs, (a) => a[0], {
+ add(fromArg) {
+ return fromArg.slice();
+ },
+ update(fromArg, toArg) {
+ if (fromArg[1] === toArg[1]) {
+ return fromArg.slice();
+ }
+ if (typeof fromArg[1] !== 'string') {
+ return fromArg.slice();
+ }
+ // A simple strategy to determine if the string is a term can be different in each language.
+ // Or if it's a code.
+ if (!isSimpleChar(fromArg[1]) || !isSimpleChar(toArg[1] + '')) {
+ // Keep the same if it's translated term.
+ return toArg.slice();
+ }
+ else {
+ return fromArg.slice();
+ }
+ }
+ });
+}
+
+function applyBlocksPatch(fromBlocks, toBlocks) {
+ return patchArray(fromBlocks, toBlocks, (a) => a.key, {
+ add(fromBlock) {
+ return _.clone(fromBlock);
+ },
+ update(fromBlock, toBlock) {
+ if (fromBlock.type === 'uicontrol') {
+ // Move uicontrol directly.
+ return _.clone(fromBlock);
+ }
+
+ const newBlock = _.clone(toBlock);
+ newBlock.inline = fromBlock.inline;
+ if (newBlock.type === 'use') {
+ newBlock.args = applyArgsPatch(fromBlock.args || [], toBlock.args || []);
+ }
+ return newBlock;
+ }
+ });
+}
+
+function applyTargetsPatch(fromJson, toJson) {
for (let fileName in fromJson) {
const fromTargets = fromJson[fileName];
const toTargets = toJson[fileName];
@@ -64,34 +105,17 @@ function applyTargetsPatch(fromJson, toJson) {
continue;
}
- const diffResult = arrayDiff(toTargets, fromTargets, function (a, b) {
- return a.name === b.name;
- });
-
- const patchedTargets = [];
- for (let part of diffResult) {
- // New added content in zh doc
- if (part.added) {
- for (let i = 0; i < part.indices.length; i++) {
- patchedTargets.push(_.clone(fromTargets[part.indices[i]]));
- }
+ toJson[fileName] = patchArray(fromTargets, toTargets, (a) => a.name, {
+ add(fromTarget) {
+ return _.clone(fromTarget);
+ },
+ update(fromTarget, toTarget) {
+ return {
+ name: fromTarget.name,
+ blocks: applyBlocksPatch(fromTarget.blocks, toTarget.blocks)
+ };
}
- else if (part.removed) {
- // Just ignore
- }
- else {
- for (let i = 0; i < part.indices.length; i++) {
- const fromTarget = fromTargets[part.indices[i]];
- const toTarget = toTargets.find(a => a.name === fromTarget.name);
- patchedTargets.push({
- name: fromTarget.name,
- blocks: applyBlocksPatch(fromTarget.blocks, toTarget.blocks)
- });
- }
- }
- }
-
- toJson[fileName] = patchedTargets;
+ });
}
}
diff --git a/zh/option/component/graphic.md b/zh/option/component/graphic.md
index 5b250fb..bc87e62 100644
--- a/zh/option/component/graphic.md
+++ b/zh/option/component/graphic.md
@@ -7,7 +7,10 @@
{{ use: partial-graphic-cpt-type-list(
optionPath = 'graphic',
- hostName = 'elements'
+ hostName = 'elements',
+ symbolVisit = '-',
+ symbolDeclare = '.',
+ usageType = 'graphicComponent'
) }}
下面示例中，使用图形元素做了水印，和文本块：
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org