Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Global font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Background color. Defaults to have no background.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
The color list of palette. If no color is set in series, the colors would be adopted sequentially and circularly from this list as the colors of series.
Defaults:
['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
Gauge chart
Example:
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Used to mark an area in chart. For example, mark a time interval.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
The scope of the area is defined by data
, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:
5
), or percent (e.g., the value is '35%'
).The priority follows as above if more than one above definition used.
data: [
[
{
name: 'Mark area in two screen points',
x: 100,
y: 100
}, {
x: '90%',
y: '10%'
}
]
]
Specify the right-bottom point.
Label style of the item. Label style of start point and end point will be merged together.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Style of the item.
itemStyle
of start point and end point will be merged together.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
value of the item, not necessary.
y value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
x value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
Specify the left-top point.
Label style of the item. Label style of start point and end point will be merged together.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Style of the item.
itemStyle
of start point and end point will be merged together.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
value of the item, not necessary.
y value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
x value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
Style of the mark area.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Label in mark area.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Use a line in the chart to illustrate.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.
When multiple attributes exist, priority is as the above order.
data: [
[
{
name: 'Mark line between two points',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]
Data of the ending point.
Label of this data item, which will be merged with label
of starting point and ending point.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Line style of this data item, which will be merged with lineStyle
of starting point and ending point.
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Offset of ending point 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.
Rotate degree of ending point symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
ending point 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 is10
.
Symbol of ending point.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Label value, which can be ignored.
Y position according to container, in pixel.
X position according to container, in pixel.
Data of the starting point.
Label of this data item, which will be merged with label
of starting point and ending point.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Line style of this data item, which will be merged with lineStyle
of starting point and ending point.
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Offset of starting point 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.
Rotate degree of starting point symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
starting point 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 is10
.
Symbol of starting point.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Label value, which can be ignored.
Y position according to container, in pixel.
X position according to container, in pixel.
Mark line style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Mark line text.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Precison of marking line value, which is useful when displaying average value mark line.
Symbol size at the two ends of the mark line. It can be an arrary for two ends, or assigned seperately.
Attention: You cannot assgin width and height seperately as normal symbolSize
.
Symbol type at the two ends of the mark line. It can be an arrary for two ends, or assigned seperately. See data.symbol for more format information.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Mark point in a chart.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
prefix
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Data array for mark points, each of which is an object. Here are some ways to assign mark point position.
When multiple attributes exist, priority is as the above order.
For example:
data: [
{
name: 'screen coordinate',
x: 100,
y: 100
}
]
Mark point style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Label of mark point.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Offset of 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.
Rotate degree of symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
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 is10
.
If size of symbols needs to be different, you can set with callback function in the following format:
(value: Array|number, params: Object) => number|Array
The first parameter value
is the value in data, and the second parameter params
is the rest parameters of data item.
Symbol of .
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
The detail about gauge chart which is used to show data.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
The text color. Defaults to use the color of section where the numerical value belongs to.
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.
The border color of detail.
The border width of detail.
The background color of detail.
The height of detail.
The width of detail.
Whether to show the details.
The title of gauge chart.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
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.
Whether to show the title.
The style of gauge chart.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
The color of pointer. Defaults to use the color of section where the numerical value belongs to.
Gauge chart pointer.
The width of pointer.
The length of pointer which could be absolute value and also the percentage relative to radius.
Whether to show the pointer.
Axis tick label.
The scale color
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
The content formatter of scale label, which supports both string template and callback function. Example:
// use string template. the template variable {value} represent the default label text
formatter: '{value} kg'
// use function callback. the function parameters are scale values.
formatter: function (value) {
return value + 'km/h';
}
Whether to show the label.
The tick line style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
The length of tick line, can be a pecentage value relative to radius.
The split scale number between split line.
Whether to show the scale.
The style of split line.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
The length of split line, can be a pecentage value relative to radius.
Whether to show the split line.
The related configuration about the axis line of gauge chart.
The style of the axis line of gauge chart.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
The width of axis line.
The axis line of gauge chart can be divided to several segments in different colors. The end position and color of each segment can be expressed by an array.
Default value:
[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
Whether to show the axis line of gauge chart.
The number of split segments of gauge chart scale.
The maximum data value which map to maxAngle.
The minimum data value which map to minAngle.
Whether the scale in gauge chart increases clockwise.
The end angle of gauge chart.
The start angle of gauge chart. The direct right side of circle center is 0
degree, the right above it is 90
degree, the direct left side of it is 180
degree.
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 }}
Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption
.
Funnel chart
sample:
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Used to mark an area in chart. For example, mark a time interval.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
The scope of the area is defined by data
, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:
5
), or percent (e.g., the value is '35%'
).The priority follows as above if more than one above definition used.
data: [
[
{
name: 'Mark area in two screen points',
x: 100,
y: 100
}, {
x: '90%',
y: '10%'
}
]
]
Specify the right-bottom point.
Label style of the item. Label style of start point and end point will be merged together.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Style of the item.
itemStyle
of start point and end point will be merged together.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
value of the item, not necessary.
y value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
x value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
Specify the left-top point.
Label style of the item. Label style of start point and end point will be merged together.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Style of the item.
itemStyle
of start point and end point will be merged together.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
value of the item, not necessary.
y value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
x value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
Style of the mark area.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Label in mark area.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Use a line in the chart to illustrate.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.
When multiple attributes exist, priority is as the above order.
data: [
[
{
name: 'Mark line between two points',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]
Data of the ending point.
Label of this data item, which will be merged with label
of starting point and ending point.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Line style of this data item, which will be merged with lineStyle
of starting point and ending point.
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Offset of ending point 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.
Rotate degree of ending point symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
ending point 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 is10
.
Symbol of ending point.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Label value, which can be ignored.
Y position according to container, in pixel.
X position according to container, in pixel.
Data of the starting point.
Label of this data item, which will be merged with label
of starting point and ending point.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Line style of this data item, which will be merged with lineStyle
of starting point and ending point.
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Offset of starting point 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.
Rotate degree of starting point symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
starting point 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 is10
.
Symbol of starting point.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Label value, which can be ignored.
Y position according to container, in pixel.
X position according to container, in pixel.
Mark line style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Mark line text.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Precison of marking line value, which is useful when displaying average value mark line.
Symbol size at the two ends of the mark line. It can be an arrary for two ends, or assigned seperately.
Attention: You cannot assgin width and height seperately as normal symbolSize
.
Symbol type at the two ends of the mark line. It can be an arrary for two ends, or assigned seperately. See data.symbol for more format information.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Mark point in a chart.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
prefix
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Data array for mark points, each of which is an object. Here are some ways to assign mark point position.
When multiple attributes exist, priority is as the above order.
For example:
data: [
{
name: 'screen coordinate',
x: 100,
y: 100
}
]
Mark point style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Label of mark point.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Offset of 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.
Rotate degree of symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
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 is10
.
If size of symbols needs to be different, you can set with callback function in the following format:
(value: Array|number, params: Object) => number|Array
The first parameter value
is the value in data, and the second parameter params
is the rest parameters of data item.
Symbol of .
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Data array of series, which can be a single data value, like:
[12, 34, 56, 10, 23]
Or, if need extra dimensions for components like visualMap to map to graphic attributes like color, it can also be in the form of array. For example:
[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]
In this case, we can assgin the second value in each arrary item to visualMap component.
More likely, we need to assign name to each data item, in which case each item should be an object:
[{
// name of date item
name: 'data1',
// value of date item is 8
value: 10
}, {
name: 'data2',
value: 20
}]
Each data item can be further custerized:
[{
name: 'data1',
value: 10
}, {
// name of data item
name: 'data2',
value : 56,
// user-defined label format that only useful for this data item
label: {},
// user-defined special itemStyle that only useful for this data item
itemStyle:{}
}]
Graphic style of , which has normal
and emphasis
two styles. normal
is the style by default, while emphasis
is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color. Color is taken from option.color Palette 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'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Supports callback functions, in the form of:
(params: Object) => Color
Input parameters are seriesIndex
, dataIndex
, data
, value
, and etc. of data item.
The visual guide line style of label. When label position is set as 'left'
or'right'
, the visual guide line will show.
The style of visual guide line in emphasis status.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Whether to show visual guide line.
The style of visual guide line in normal status.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
The length of the first part from visual guide line.
Whether to show visual guide line.
Text label of funnel chart, to explain some data information about graphic item like value, name and so on. label
is placed under itemStyle.normal
in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, label
is taken to be at the same level with itemStyle
, and has two status normal
and emphasis
as itemStyle
does.
the font style of lable.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
// percentage
percent: number,
}
the font style of lable.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
// percentage
percent: number,
}
Label position.
Options:
'left'
Left side of funnel chart. The corresponding trapezoid would be related to through visual guide line.
'right'
Right side of funnel chart. The corresponding trapezoid would be related to through visual guide line.
'inside'
Inside the trapezoid of funnel chart.
'inner'
equals to 'inside'
.
'center'
equals to 'inside'
.Horizontal align. Defaults to align center. Can be 'left', 'right', 'center'.
Whether to enable highlighting chart when legend is being hovered.
Gap between each trapezoid.
Data sorting, which can be whether 'ascending'
or 'descending'
.
The mapped width from maximum data value max.
It can be absolute pixel and also the percentage of layout width.
The mapped width from minimum data value min.
It can be absolute pixel and also the percentage of layout width. If you don't want the graph of minimum value to be a triangle, you can set up this property larger than 0.
The specified maximum value.
The specified minimum value.
Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption
.
Sankey Graphs
Sankey graphs are a specific type of streamgraphs, in which the width of each branch is shown proportionally to the flow quantity. These graphs are typically used to visualize energy or material or cost transfers between processes. They can also visualize the energy accounts, material flow accounts on a regional or national level, and also the breakdown of cost of item or services.
Example:
Visual Encoding:
The sankey graphs encodes each node
of the raw data into a small rectangular. And different nodes are presented in different colors as far as possible. The label
next to the small rectangular, which encoding the name of the node.
In addition, the edge between two small rectangulars in the graph encoding the link
of the raw data. The width of edge is shown proportionally to the value
of link
.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Equals to links
The links data between nodes. For instance:
links: [{
source: 'n1',
target: 'n2'
}, {
source: 'n2',
target: 'n3'
}]
Equals to data
Data array of series, which can be a single data value, like:
[12, 34, 56, 10, 23]
Or, if need extra dimensions for components like visualMap to map to graphic attributes like color, it can also be in the form of array. For example:
[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]
In this case, we can assgin the second value in each arrary item to visualMap component.
More likely, we need to assign name to each data item, in which case each item should be an object:
[{
// name of date item
name: 'data1',
// value of date item is 8
value: 10
}, {
name: 'data2',
value: 20
}]
Each data item can be further custerized:
[{
name: 'data1',
value: 10
}, {
// name of data item
name: 'data2',
value : 56,
// user-defined label format that only useful for this data item
label: {},
// user-defined special itemStyle that only useful for this data item
itemStyle:{}
}]
The line style of sankey graph, in which lineStyle.normal.color can be assigned to the value of 'source'
of 'target'
, then the edge will automatically take the source node or target node color as its own color.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
The curveness of the edge in sankey graph.
The opacity of the edge in sankey graph.
The color of the edge in sankey graphs.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
The curveness of the edge in sankey graph.
The opacity of the edge in sankey graph.
The color of the edge in sankey graphs.
The style of node rectangle in sankey graphs.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color. Color is taken from option.color Palette 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'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
label
describes the text label style in each rectangular node.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
The iterations of layout, which is used to continuously optimize the positions of nodes in graph, decreasing the overlapping between nodes and edges.
The default iterations of layout: 32
.
The test shows that iterations of layout could not be less than the default value.
The gap between any two regtangles in each column from the graph.
The node width of rectangle in graph.
Height of sankey component.
Width of sankey component.
Distance between sankey component and the bottom side of the container.
bottom
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Distance between sankey component and the right side of the container.
right
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Distance between sankey component and the top side of the container.
top
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'top'
, 'middle'
, or 'bottom'
.
If the left
value is set to be 'top'
, 'middle'
, or 'bottom'
, then the component will be aligned automatically based on position.
Distance between sankey component and the left side of the container.
left
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'left'
, 'center'
, or 'right'
.
If the left
value is set to be 'left'
, 'center'
, or 'right'
, then the component will be aligned automatically based on position.
z
value of all graghical elements in , which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in .
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
relation graph
Graph is a diagram to represent nodes and the links connecting nodes.
Tips: In ECharts 2.x , the diagram of force
type will not be available in ECharts 3 any more, which has been changed to use graph
to show graph data. If you want to use force to lead the layout, you can set the layout configuration as 'force'
.
Example:
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Height of component.
Width of component.
Distance between component and the bottom side of the container.
bottom
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Adaptive by default.
Distance between component and the right side of the container.
right
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Adaptive by default.
Distance between component and the top side of the container.
top
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'top'
, 'middle'
, or 'bottom'
.
If the left
value is set to be 'top'
, 'middle'
, or 'bottom'
, then the component will be aligned automatically based on position.
Distance between component and the left side of the container.
left
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'left'
, 'center'
, or 'right'
.
If the left
value is set to be 'left'
, 'center'
, or 'right'
, then the component will be aligned automatically based on position.
z
value of all graghical elements in , which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in .
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
Used to mark an area in chart. For example, mark a time interval.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
The scope of the area is defined by data
, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:
5
), or percent (e.g., the value is '35%'
).The priority follows as above if more than one above definition used.
data: [
[
{
name: 'Mark area in two screen points',
x: 100,
y: 100
}, {
x: '90%',
y: '10%'
}
]
]
Specify the right-bottom point.
Label style of the item. Label style of start point and end point will be merged together.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Style of the item.
itemStyle
of start point and end point will be merged together.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
value of the item, not necessary.
y value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
x value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
Specify the left-top point.
Label style of the item. Label style of start point and end point will be merged together.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Style of the item.
itemStyle
of start point and end point will be merged together.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
value of the item, not necessary.
y value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
x value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
Style of the mark area.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Label in mark area.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Use a line in the chart to illustrate.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.
When multiple attributes exist, priority is as the above order.
data: [
[
{
name: 'Mark line between two points',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]
Data of the ending point.
Label of this data item, which will be merged with label
of starting point and ending point.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Line style of this data item, which will be merged with lineStyle
of starting point and ending point.
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Offset of ending point 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.
Rotate degree of ending point symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
ending point 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 is10
.
Symbol of ending point.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Label value, which can be ignored.
Y position according to container, in pixel.
X position according to container, in pixel.
Data of the starting point.
Label of this data item, which will be merged with label
of starting point and ending point.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Line style of this data item, which will be merged with lineStyle
of starting point and ending point.
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Offset of starting point 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.
Rotate degree of starting point symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
starting point 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 is10
.
Symbol of starting point.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Label value, which can be ignored.
Y position according to container, in pixel.
X position according to container, in pixel.
Mark line style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Mark line text.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Precison of marking line value, which is useful when displaying average value mark line.
Symbol size at the two ends of the mark line. It can be an arrary for two ends, or assigned seperately.
Attention: You cannot assgin width and height seperately as normal symbolSize
.
Symbol type at the two ends of the mark line. It can be an arrary for two ends, or assigned seperately. See data.symbol for more format information.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Mark point in a chart.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
prefix
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Data array for mark points, each of which is an object. Here are some ways to assign mark point position.
When multiple attributes exist, priority is as the above order.
For example:
data: [
{
name: 'screen coordinate',
x: 100,
y: 100
}
]
Mark point style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Label of mark point.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Offset of 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.
Rotate degree of symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
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 is10
.
If size of symbols needs to be different, you can set with callback function in the following format:
(value: Array|number, params: Object) => number|Array
The first parameter value
is the value in data, and the second parameter params
is the rest parameters of data item.
Symbol of .
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Alias of links
Relational data between nodes. Example:
links: [{
source: 'n1',
target: 'n2'
}, {
source: 'n2',
target: 'n3'
}]
Alias of data
Data array of series, which can be a single data value, like:
[12, 34, 56, 10, 23]
Or, if need extra dimensions for components like visualMap to map to graphic attributes like color, it can also be in the form of array. For example:
[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]
In this case, we can assgin the second value in each arrary item to visualMap component.
More likely, we need to assign name to each data item, in which case each item should be an object:
[{
// name of date item
name: 'data1',
// value of date item is 8
value: 10
}, {
name: 'data2',
value: 20
}]
Each data item can be further custerized:
[{
name: 'data1',
value: 10
}, {
// name of data item
name: 'data2',
value : 56,
// user-defined label format that only useful for this data item
label: {},
// user-defined special itemStyle that only useful for this data item
itemStyle:{}
}]
The categories of node, which is optional.
If there is a classification of nodes, the category of each node can be assigned through data[i].category. And the style of category will also be applied to the style of nodes. categories
can also be used in legend.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position, options:
'start'
'middle'
'end'
If show label on edge.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position, options:
'start'
'middle'
'end'
If show label on edge.
Text label of , to explain some data information about graphic item like value, name and so on. label
is placed under itemStyle.normal
in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, label
is taken to be at the same level with itemStyle
, and has two status normal
and emphasis
as itemStyle
does.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
The style of edge line. lineStyle.normal.color can be 'source'
or 'target'
, which will use the color of source node or target node.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Graphic style of , which has normal
and emphasis
two styles. normal
is the style by default, while emphasis
is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color. Color is taken from option.color Palette 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'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Supports callback functions, in the form of:
(params: Object) => Color
Input parameters are seriesIndex
, dataIndex
, data
, value
, and etc. of data item.
Size of symbol of two ends of edge line. Can be an array or a single number.
For example:
// Start symbol has size 5 and end symbol has size 10
symbolSize: [5, 10],
// All has size 10
symbolSize: 10
Symbol of two ends of edge line.
For example:
edgeSymbol: ['circle', 'arrow']
Whether to focus/highlight the hover node and it's adjacencies.
Offset of node of relation graph 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.
Rotate degree of node of relation graph symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
node of relation graph 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 is10
.
If size of symbols needs to be different, you can set with callback function in the following format:
(value: Array|number, params: Object) => number|Array
The first parameter value
is the value in data, and the second parameter params
is the rest parameters of data item.
Symbol of node of relation graph.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
If node is draggable. Only available when using force-directed layout.
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.
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.
Configuration items about force-directed layout. Force-directed layout simulates spring/charge model, which will add a repulsion between 2 nodes and add a attraction between 2 nodes of each edge. In each iteration nodes will move under the effect of repulsion and attraction. After several iterations, the nodes will be static in a balanced position. As a result, the energy local minimum of this whole model will be realized.
The result of force-directed layout has a good symmetries and clustering, which is also aesthetically pleasing.
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.
The distance between 2 nodes on edge. This distance is also affected by 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.
The gravity factor enforcing nodes approach to the center. The nodes will be closer to the center as the value becomes larger.
The repulsion factor between nodes. The repulsion will be stronger and the distance between 2 nodes becomes further as this value becomes larger.
It can be an array to represent the range of repulsion. In this case larger value have larger repulsion and smaller value will have smaller repulsion.
The initial layout before force-directed layout, which will influence on the result of force-directed layout.
It defaults not to do any layout and use x, y provided in node as the position of node. If it doesn't exist, the position will be generated randomly.
You can also use circular layout 'circular'
.
Configuration about circular layout.
Whether to rotate the label automatically.
Graph layout.
Options:
'none'
No any layout, use x, y provided in node as the position of node.
'circular'
Adopt circular layout, see the example Les Miserables.
'force'
Adopt force-directed layout, see the example Force, the detail about configrations of layout are in graph.force
Whether to enable the highlight animation effect of mousr hover node.
Index of geographic coordinate to combine with, which is useful for multiple geographic axes in one chart.
Index of polar coordinate to combine with, which is useful for multiple polar axes in one chart.
Index of y axis to combine with, which is useful for multiple y axes in one chart.
Index of x axis to combine with, which is useful for multiple x axes in one chart.
The coordinate used in the series, whose options are:
null
No coordinate.
'cartesian2d'
Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with xAxisIndex and yAxisIndex to assign the corresponding axis component.
'polar'
Use polar coordinates, with polarIndex to assign the corresponding polar coordinate component.
'geo'
Use geographic coordinate, with geoIndex to assign the corresponding geographic coordinate components.
Whether to enable highlighting chart when legend is being hovered.
Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption
.
Lines graph
It is used to draw the line data with the information about "from" and "to"; and it is applied fot drawing the air routes on map, which visualizes these routes.
ECharts 2.x uses the markLine
to draw the migrating effect, while in ECharts 3, the lines
graph is recommended to be used.
Migrating example:
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
z
value of all graghical elements in lines graph, which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in lines graph.
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
Used to mark an area in chart. For example, mark a time interval.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
The scope of the area is defined by data
, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:
5
), or percent (e.g., the value is '35%'
).The priority follows as above if more than one above definition used.
data: [
[
{
name: 'Mark area in two screen points',
x: 100,
y: 100
}, {
x: '90%',
y: '10%'
}
]
]
Specify the right-bottom point.
Label style of the item. Label style of start point and end point will be merged together.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Style of the item.
itemStyle
of start point and end point will be merged together.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
value of the item, not necessary.
y value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
x value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
Specify the left-top point.
Label style of the item. Label style of start point and end point will be merged together.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Style of the item.
itemStyle
of start point and end point will be merged together.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
value of the item, not necessary.
y value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
x value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
Style of the mark area.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Label in mark area.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Use a line in the chart to illustrate.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.
When multiple attributes exist, priority is as the above order.
data: [
[
{
name: 'Mark line between two points',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]
Data of the ending point.
Label of this data item, which will be merged with label
of starting point and ending point.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Line style of this data item, which will be merged with lineStyle
of starting point and ending point.
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Offset of ending point 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.
Rotate degree of ending point symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
ending point 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 is10
.
Symbol of ending point.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Label value, which can be ignored.
Y position according to container, in pixel.
X position according to container, in pixel.
Data of the starting point.
Label of this data item, which will be merged with label
of starting point and ending point.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Line style of this data item, which will be merged with lineStyle
of starting point and ending point.
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Offset of starting point 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.
Rotate degree of starting point symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
starting point 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 is10
.
Symbol of starting point.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Label value, which can be ignored.
Y position according to container, in pixel.
X position according to container, in pixel.
Mark line style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Mark line text.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Precison of marking line value, which is useful when displaying average value mark line.
Symbol size at the two ends of the mark line. It can be an arrary for two ends, or assigned seperately.
Attention: You cannot assgin width and height seperately as normal symbolSize
.
Symbol type at the two ends of the mark line. It can be an arrary for two ends, or assigned seperately. See data.symbol for more format information.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Mark point in a chart.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
prefix
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Data array for mark points, each of which is an object. Here are some ways to assign mark point position.
When multiple attributes exist, priority is as the above order.
For example:
data: [
{
name: 'screen coordinate',
x: 100,
y: 100
}
]
Mark point style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Label of mark point.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Offset of 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.
Rotate degree of symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
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 is10
.
If size of symbols needs to be different, you can set with callback function in the following format:
(value: Array|number, params: Object) => number|Array
The first parameter value
is the value in data, and the second parameter params
is the rest parameters of data item.
Symbol of .
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
The data set of lines.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
the position of label, options:
'start'
'middle'
'end'
Whether to show label.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
the position of label, options:
'start'
'middle'
'end'
Whether to show label.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
The curveness of edge. The values from 0 to 1 could be set. The curveness would be larger as the the value becomes larger.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color. Color is taken from option.color Palette by default.
Supports callback functions, in the form of:
(params: Object) => Color
Input parameters are seriesIndex
, dataIndex
, data
, value
, and etc. of data item.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
The threshold enabling the drawing optimization.
Whether to enable the optimization of large-scale lines graph. It could be enabled when there is a particularly large number of data(>=5k) .
After being enabled, largeThreshold can be used to indicate the minimum number for turning on the optimization.
The style of a single data item can't be customized
The setting about special effect of lines.
Tips: All the graphs with trail effect should be put on a individual layer, which means that zlevel need to be different with others. And the animation (animation: false) of this layer is suggested to be turned off at the meanwhile. Otherwise, other graphic elements in other series and the label of animation would produce unnecessary ghosts.
Whether to loop the special effect animation.
The length of trail of special effect. The values from 0 to 1 could be set. Trail would be longer as the the value becomes larger.
The color of special effect symbol, which defaults to be same with lineStyle.normal.color.
The symbol size of special effect, which could be set as single number such as 10
. What's more, arrays could be used to decribe the width and height respectively. For instance, [20, 10]
indicates 20
for width and 10
for height.
The symbol of special effect.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
The above example uses a custom path of plane shape.
Tip: Ahe angle of symbol changes as the tangent of track changes. If you use a custom path, you should make sure that the path shape are upward oriented. It would ensure that the symbol will always move toward the right moving direction when the symbol moves along the track.
If symbol movement of special effect has a constant speed, which unit is pixel per second. period will be ignored if constantSpeed
is larger than 0.
The duration of special effect, which unit is second.
Whether to show special effect.
If draw as polyline.
Default to be false
. Can only draw a two end straight line.
If it is set true, data.coords can have more than two coord to draw a polyline. It is useful when visualizing GPS track data. See example lines-bus.
Index of geographic coordinate to combine with, which is useful for multiple geographic axes in one chart.
Index of y axis to combine with, which is useful for multiple y axes in one chart.
Index of x axis to combine with, which is useful for multiple x axes in one chart.
The coordinate used in the series, whose options are:
'cartesian2d'
Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with xAxisIndex and yAxisIndex to assign the corresponding axis component.
'geo'
Use geographic coordinate, with geoIndex to assign the corresponding geographic coordinate components.
Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption
.
The series in parallel coordinate system.
Introduction about Parallel coordinates
Parallel Coordinates is a common way of visualizing high-dimensional geometry and analyzing multivariate data.
For example, series-parallel.data is the following data:
[
[1, 55, 9, 56, 0.46, 18, 6, 'good'],
[2, 25, 11, 21, 0.65, 34, 9, 'excellent'],
[3, 56, 7, 63, 0.3, 14, 5, 'good'],
[4, 33, 7, 29, 0.33, 16, 6, 'excellent'],
{ // Data item can also be an Object, so that perticular settings of its line can be set here.
value: [5, 42, 24, 44, 0.76, 40, 16, 'excellent']
lineStyle: {...},
}
...
]
In data above, each row is a "data item", and each column represents a "dimension". For example, the meanings of columns above are: "data", "AQI", "PM2.5", "PM10", "carbon monoxide level", "nitrogen dioxide level", and "sulfur dioxide level".
Parallel coordinates are much used to visualize multi-dimension data shown above. Each axis represents a dimension (namely, a column), and each line represents a data item. Data can be brush-selected on axes. For example:
Brief about Configuration
Basic configuration parallel coordinates is shown as follow:
option = {
parallelAxis: [ // Definitions of axes.
{dim: 0, name: schema[0].text}, // Each axis has a 'dim' attribute, representing dimension index in data.
{dim: 1, name: schema[1].text},
{dim: 2, name: schema[2].text},
{dim: 3, name: schema[3].text},
{dim: 4, name: schema[4].text},
{dim: 5, name: schema[5].text},
{dim: 6, name: schema[6].text},
{dim: 7, name: schema[7].text,
type: 'category', // Also supports category data.
data: ['Excellent', 'good', 'light pollution', 'moderate pollution', 'heavy pollution', 'severe pollution']
}
],
parallel: { // Definition of a parallel coordinate system.
left: '5%', // Location of parallel coordinate system.
right: '13%',
bottom: '10%',
top: '20%',
parallelAxisDefault: { // A pattern for axis definition, which can avoid repeating in `parallelAxis`.
type: 'value',
nameLocation: 'end',
nameGap: 20
}
},
series: [ // Here the three series sharing the same parallel coordinate system.
{
name: 'Beijing',
type: 'parallel', // The type of this series is 'parallel'
data: [
[1, 55, 9, 56, 0.46, 18, 6, 'good'],
[2, 25, 11, 21, 0.65, 34, 9, 'excellent'],
...
]
},
{
name: 'Shanghai',
type: 'parallel',
data: [
[3, 56, 7, 63, 0.3, 14, 5, 'good'],
[4, 33, 7, 29, 0.33, 16, 6, 'excellent'],
...
]
},
{
name: 'Guangzhou',
type: 'parallel',
data: [
[4, 33, 7, 29, 0.33, 16, 6, 'excellent'],
[5, 42, 24, 44, 0.76, 40, 16, 'excellent'],
...
]
}
]
};
Three components are involved here: parallel, parallelAxis, series-parallel
This component is the coordinate system. One or more series (like "Beijing", "Shanghai", and "Guangzhou" in the above example) can share one coordinate system.
Like other coordinate systems, multiple parallel coordinate systems can be created in one echarts instance.
Position setting is also carried out here.
This is axis configuration. Multiple axes are needed in parallel coordinates.
parallelAxis.parallelIndex is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.
This is the definition of parallel series, which will be drawn on parallel coordinate system.
parallelAxis.parallelIndex is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.
Notes and Best Practices
When configuring multiple parallelAxis, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under parallel.parallelAxisDefault. Before initializing axis, configurations in parallel.parallelAxisDefault will be merged into parallelAxis to generate the final axis configuration.
If data is too large and cause bad performance
It is suggested to set series-parallel.lineStyle.normal.width to be 0.5
(or less), which may improve performance significantly.
Display High-Dimension Data
When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.
In this case, you may use parallel.axisExpandable to improve the display. See this example:
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
z
value of all graghical elements in parallel, which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in parallel.
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
For example, series-parallel.data is the following data:
[
[1, 55, 9, 56, 0.46, 18, 6, 'good'],
[2, 25, 11, 21, 0.65, 34, 9, 'excellent'],
[3, 56, 7, 63, 0.3, 14, 5, 'good'],
[4, 33, 7, 29, 0.33, 16, 6, 'excellent'],
{ // Data item can also be an Object, so that perticular settings of its line can be set here.
value: [5, 42, 24, 44, 0.76, 40, 16, 'excellent']
lineStyle: {...},
}
...
]
In data above, each row is a "data item", and each column represents a "dimension". For example, the meanings of columns above are: "data", "AQI", "PM2.5", "PM10", "carbon monoxide level", "nitrogen dioxide level", and "sulfur dioxide level".
Whether to update view in realtime.
When perform brush selection, the selected lines will be set as this transparency rate (which could highlight those lines).
When perform brush selection, the unselected lines will be set as this transparency rate (which could darken those lines).
Line style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption
.
Index of parallel coordinates to combine with, which is useful for multiple parallel axes in one chart.
The coordinate used in the series, whose options are:
'parallel'
Use parallel coordinates, with parallelIndex to assign the corresponding parallel coordinate components.
Map.
Map is maily used in the visulization of geographic area data, which can be used with visualMap component to visualize the datas such as population distribution density in diffrent areas.
Series of same map type will show in one map. At this point, the configuration of the first series will be used for the map configuration.
Example:
Data array of map series, which can be a single data value, like:
[12, 34, 56, 10, 23]
Or, if need extra dimensions for components like visualMap to map to graphic attributes like color, it can also be in the form of array. For example:
[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]
In this case, we can assgin the second value in each arrary item to visualMap component.
More likely, we need to assign name to each data item, in which case each item should be an object:
[{
// name of date item
name: 'data1',
// value of date item is 8
value: 10
}, {
name: 'data2',
value: 20
}]
Each data item can be further custerized:
[{
name: 'data1',
value: 10
}, {
// name of data item
name: 'data2',
value : 56,
// user-defined label format that only useful for this data item
label: {},
// user-defined special itemStyle that only useful for this data item
itemStyle:{}
}]
Show the symbol in related area (dot of series symbol). Available when legend component exists.
Value of multiple series with the same map type can use this option to get a statistical value.
Supported statistical methods:
'sum'
'average'
'max'
'min'
Size of map, see layoutCenter
for more information. Percentage relative to screen width, and absolute pixel values are supported.
layoutCenter
and layoutSize
provides layout strategy other than left/right/top/bottom/width/height
.
When using left/right/top/bottom/width/height
, it is hard to put the map inside a box area with a fixed width-height ratio. In this case, layoutCenter
attribute can be used to define the center position of map, and layoutSize
can be used to define the size of map. For example:
layoutCenter: ['30%', '30%'],
// If width-height ratio is larger than 1, then width is set to be 100.
// Otherwise, height is set to be 100.
// This makes sure that it will not exceed the area of 100x100
layoutSize: 100
After setting these two values, left/right/top/bottom/width/height
becomes invalid.
Distance between component and the bottom side of the container.
bottom
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Adaptive by default.
Distance between component and the right side of the container.
right
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Adaptive by default.
Distance between component and the top side of the container.
top
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'top'
, 'middle'
, or 'bottom'
.
If the left
value is set to be 'top'
, 'middle'
, or 'bottom'
, then the component will be aligned automatically based on position.
Distance between component and the left side of the container.
left
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'left'
, 'center'
, or 'right'
.
If the left
value is set to be 'left'
, 'center'
, or 'right'
, then the component will be aligned automatically based on position.
z
value of all graghical elements in , which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in .
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
Graphic style of Map Area Border, which has normal
and emphasis
two styles. normal
is the style by default, while emphasis
is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.
Map area style in highlighted state.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Area filling color.
Map area style in normal state.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Area filling color.
Text label of , to explain some data information about graphic item like value, name and so on. label
is placed under itemStyle.normal
in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, label
is taken to be at the same level with itemStyle
, and has two status normal
and emphasis
as itemStyle
does.
Style of text in highlighted state.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Whether to show label in highlighted state.
Style of text in normal state.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Whether to show label in normal state.
Selected mode of map. 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 selection.
Name mapping for customized areas. For example:
{
'China' : '中国'
}
Limit of scaling, with min
and max
. 1
by default.
Maximum scaling
Minimum scaling
Zoom rate of current view-port.
Used to scale aspect of geo.
The final aspect is calculated by: geoBoundingRect.width / geoBoundingRect.height * aspectScale
.
Center of current view-port, in longitude and latitude.
Example:
center: [115.97, 29.71]
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.
Map charts.
Due to the increase of fineness of map, ECharts 3 doesn't include map data by default for package size consideration. You may find map files you need on map download page and then include and register them in ECharts.
Two formats of map data are provided in ECharts, one of which can be included in <script>
tag as JavaScript file, and the other of is in JSON format and should be loaded using AJAX. Map name and data will be loaded automatically once the JavaScript file is loaded, while in the JSON form, you have to assign name explicitly.
Here are examples of these two types:
JavaScript importing example
<script src="echarts.js"></script>
<script src="map/js/china.js"></script>
<script>
var chart = echarts.init(document.getElmentById('main'));
chart.setOption({
series: [{
type: 'map',
map: 'china'
}]
});
</script>
JSON importing example
$.get('map/json/china.json', function (chinaJson) {
echarts.registerMap('china', chinaJson);
var chart = echarts.init(document.getElmentById('main'));
chart.setOption({
series: [{
type: 'map',
map: 'china'
}]
});
});
ECharts uses geoJSON format as map outline. Besides the methods introduced above, you can also get geoJSON data through in other methods if you like and register it in ECharts. Reference to USA Population Estimates for more information.
Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption
.
heat map
Heat map mainly use colors to represent values, which must be used along with visualMap component.
It can be used in either rectangular coordinate or geographic coordinate. But the behaviour on them are quite different. Rectangular coordinate must have two catagories to use it.
Here are the examples using it in rectangular coordinate and geographic coordinate:
rectangular coordinate:
geographic coordinate:
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
z
value of all graghical elements in heatmap, which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in heatmap.
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
Used to mark an area in chart. For example, mark a time interval.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
The scope of the area is defined by data
, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:
5
), or percent (e.g., the value is '35%'
).The priority follows as above if more than one above definition used.
data: [
[
{
name: 'Mark area in two screen points',
x: 100,
y: 100
}, {
x: '90%',
y: '10%'
}
]
]
Specify the right-bottom point.
Label style of the item. Label style of start point and end point will be merged together.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Style of the item.
itemStyle
of start point and end point will be merged together.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
value of the item, not necessary.
y value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
x value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
Specify the left-top point.
Label style of the item. Label style of start point and end point will be merged together.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Style of the item.
itemStyle
of start point and end point will be merged together.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
value of the item, not necessary.
y value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
x value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
Style of the mark area.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Label in mark area.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Use a line in the chart to illustrate.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.
When multiple attributes exist, priority is as the above order.
data: [
[
{
name: 'Mark line between two points',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]
Data of the ending point.
Label of this data item, which will be merged with label
of starting point and ending point.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Line style of this data item, which will be merged with lineStyle
of starting point and ending point.
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Offset of ending point 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.
Rotate degree of ending point symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
ending point 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 is10
.
Symbol of ending point.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Label value, which can be ignored.
Y position according to container, in pixel.
X position according to container, in pixel.
Data of the starting point.
Label of this data item, which will be merged with label
of starting point and ending point.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Line style of this data item, which will be merged with lineStyle
of starting point and ending point.
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Offset of starting point 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.
Rotate degree of starting point symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
starting point 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 is10
.
Symbol of starting point.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Label value, which can be ignored.
Y position according to container, in pixel.
X position according to container, in pixel.
Mark line style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Mark line text.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Precison of marking line value, which is useful when displaying average value mark line.
Symbol size at the two ends of the mark line. It can be an arrary for two ends, or assigned seperately.
Attention: You cannot assgin width and height seperately as normal symbolSize
.
Symbol type at the two ends of the mark line. It can be an arrary for two ends, or assigned seperately. See data.symbol for more format information.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Mark point in a chart.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
prefix
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Data array for mark points, each of which is an object. Here are some ways to assign mark point position.
When multiple attributes exist, priority is as the above order.
For example:
data: [
{
name: 'screen coordinate',
x: 100,
y: 100
}
]
Mark point style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Label of mark point.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Offset of 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.
Rotate degree of symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
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 is10
.
If size of symbols needs to be different, you can set with callback function in the following format:
(value: Array|number, params: Object) => number|Array
The first parameter value
is the value in data, and the second parameter params
is the rest parameters of data item.
Symbol of .
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Data array of series, which can be in the following forms:
When an axis of the coordinate is of category type, data can be in one dimension, whose length is equals to that of xAxis.data, and they are one-to-one matches. For example:
[12, 34, 56, 10, 23]
When both axes of the coordinate are of value type, every data item needs an array, and at least two values should represent x
and y
in rectangular coordinates, or radius
and angle
in polar coordinates. For example:
[[3.4, 4.5, 15], [4.2, 2.3, 20], [10.8, 9.5, 30], [7.2, 8.8, 18]]
Every data values from the third value can be used to present other data dimensions. With visualMap component, one or more dimensions can be assigned to map to color, size and other graphic attributes.
When both axes in the coordinate are of category type, every data item also needs to be one array. At least two values of a data item should represent category index or name of two axes. For example:
[[0, 0, 2], ['monday', 2, 1], [2, 1, 2], [3, 3, 5]]
Every data values from the third value can be used to present other data dimensions. With visualMap component, one or more dimensions can be assigned to map to color, size and other graphic attributes.
Example with two category axes can be found at Github Punchcard.
When a data item need to be custerized, data item can be an object, whose value
stands for data value, for example:
[
12, 34,
{
value : 56,
// user-defined label format that only useful for this data item
label: {},
// user-defined special itemStyle that only useful for this data item
itemStyle:{}
},
10, 23
]
Tip: When data of certain category does not exist (ps: not exist doesn't mean the value is 0), you may use -
to represent. When there is no data, it should be disconnected in line chart, and no symbols in the chart.
Maximum opacity. It is valid with coordinateSystem of 'geo' value.
Minimum opacity. It is valid with coordinateSystem of 'geo' value.
Blur size of each data point. It is valid with coordinateSystem of 'geo' value.
Index of geographic coordinate to combine with, which is useful for multiple geographic axes in one chart.
Index of y axis to combine with, which is useful for multiple y axes in one chart.
Index of x axis to combine with, which is useful for multiple x axes in one chart.
The coordinate used in the series, whose options are:
'cartesian2d'
Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with xAxisIndex and yAxisIndex to assign the corresponding axis component.
'geo'
Use geographic coordinate, with geoIndex to assign the corresponding geographic coordinate components.
Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption
.
A candlestick chart (also called Japanese candlestick chart) is a style of financial chart used to describe price movements of a security, derivative, or currency.
ECharts3 supports both 'candlestick'
and 'k'
in series.type ('k'
would automatically turns into 'candlestick'
).
An example:
About color of increase and decrease
Different countries or regions have different implications on the color of candle stick chart. It may use red to imply increasing with red and decreasing with blue (in China mainland, Taiwan, Japan, Koera, and so on), or to imply increasing with green and decreasing with red (in Europ, North America, Hong Kong, Singapore, and so on). Besides color, the increase and decrease of stock may also be represented with candle stick with or without filling colors.
We use red to represent increasing and blue decreasing by default. If you want to change the configuration, you may change the following parameters.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
z
value of all graghical elements in candlestick, which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in candlestick.
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
Used to mark an area in chart. For example, mark a time interval.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
The scope of the area is defined by data
, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:
Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 5
), or percent (e.g., the value is '35%'
).
Specify the coordinate in data coordinate system (i.e., cartesian) using
coord, which can be also set as 'min'
, 'max'
, 'average'
(e.g, coord: [23, 'min']
, or coord: ['average', 'max']
)。
series.data
using type, where valueIndex or valueDim can be used to specify the dimension on which the min, max or average are calculated.xAxis
or yAxis
to define a mark area based on only X or Y axis, see sample scatter-weightThe priority follows as above if more than one above definition used.
data: [
[
{
name: 'From average to max',
type: 'average'
},
{
type: 'max'
}
],
[
{
name: 'Mark area between two points in data coordiantes',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [
{
name: 'From 60 to 80',
yAxis: 60
},
{
yAxis: 80
}
], [
{
name: 'Mark area covers all data'
coord: ['min', 'min']
},
{
coord: ['max', 'max']
}
],
[
{
name: 'Mark area in two screen points',
x: 100,
y: 100
}, {
x: '90%',
y: '10%'
}
]
]
Specify the right-bottom point.
Label style of the item. Label style of start point and end point will be merged together.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Style of the item.
itemStyle
of start point and end point will be merged together.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
value of the item, not necessary.
y value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
x value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
The format is [start coordinate, end coordinate], where the coordinate system can be x
, y
on cartesian, or radius
, angle
on polar.
Specify the dimension on which min, max, average are calculated,
available when type used.
The value can be the name of the dimension (for example, the value can be x
, angle
in line chart, and open
, close
in candlestick).
Specify the dimension on which min, max, average are calculated,
available when type used.
The value can be 0
(means xAxis, radiusAxis) or 1
(means yAxis, angleAxis),
using the dimension of the first axis by default.
Specify this item is on min or max or average value.
Options:
'min'
max value。'max'
min value。'average'
average value。Specify the left-top point.
Label style of the item. Label style of start point and end point will be merged together.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Style of the item.
itemStyle
of start point and end point will be merged together.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
value of the item, not necessary.
y value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
x value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
The format is [start coordinate, end coordinate], where the coordinate system can be x
, y
on cartesian, or radius
, angle
on polar.
Specify the dimension on which min, max, average are calculated,
available when type used.
The value can be the name of the dimension (for example, the value can be x
, angle
in line chart, and open
, close
in candlestick).
Specify the dimension on which min, max, average are calculated,
available when type used.
The value can be 0
(means xAxis, radiusAxis) or 1
(means yAxis, angleAxis),
using the dimension of the first axis by default.
Specify this item is on min or max or average value.
Options:
'min'
max value。'max'
min value。'average'
average value。Style of the mark area.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Label in mark area.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Use a line in the chart to illustrate.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.
Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
Assign coordinate position with coord attribute, in which 'min'
, 'max'
, 'average'
are supported for each dimension.
Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.
You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning xAxis
or yAxis
. See scatter-weight for example.
When multiple attributes exist, priority is as the above order.
You may also set the type of mark line through type
, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through valueIndex
.
data: [
{
name: 'average line',
// 'average', 'min', and 'max' are supported
type: 'average'
},
{
name: 'Horizontal line with Y value at 100',
yAxis: 100
},
[
{
// Use the same name with starting and ending point
name: 'Minimum to Maximum',
type: 'min'
},
{
type: 'max'
}
],
[
{
name: 'Markline between two points',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [{
// Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.
yAxis: 'max',
x: '90%'
}, {
type: 'max'
}],
[
{
name: 'Mark line between two points',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]
Data of the ending point.
Label of this data item, which will be merged with label
of starting point and ending point.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Line style of this data item, which will be merged with lineStyle
of starting point and ending point.
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Offset of ending point 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.
Rotate degree of ending point symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
ending point 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 is10
.
Symbol of ending point.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Label value, which can be ignored.
Y position according to container, in pixel.
X position according to container, in pixel.
Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x
, and y
for rectangular coordinates, or radius
, and angle
for polar coordinates.
Notice: For axis with axis.type 'category'
:
number
, it represents index of axis.data.string
, it represents concrete value in axis.data. Please notice that in this case xAxis.data
must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.For example:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine is in the same way.
data: [{
coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.
// coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.
}]
}
}
}
Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x
, or angle
for line charts, or open
, or close
for candlestick charts.
Works only when 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.
Special label types, are used to label maximum value, minimum value and so on.
Options are:
'min'
maximum value.'max'
minimum value.'average'
average value.Data of the starting point.
Label of this data item, which will be merged with label
of starting point and ending point.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Line style of this data item, which will be merged with lineStyle
of starting point and ending point.
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Offset of starting point 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.
Rotate degree of starting point symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
starting point 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 is10
.
Symbol of starting point.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Label value, which can be ignored.
Y position according to container, in pixel.
X position according to container, in pixel.
Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x
, and y
for rectangular coordinates, or radius
, and angle
for polar coordinates.
Notice: For axis with axis.type 'category'
:
number
, it represents index of axis.data.string
, it represents concrete value in axis.data. Please notice that in this case xAxis.data
must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.For example:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine is in the same way.
data: [{
coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.
// coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.
}]
}
}
}
Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x
, or angle
for line charts, or open
, or close
for candlestick charts.
Works only when 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.
Special label types, are used to label maximum value, minimum value and so on.
Options are:
'min'
maximum value.'max'
minimum value.'average'
average value.Mark line style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Mark line text.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Precison of marking line value, which is useful when displaying average value mark line.
Symbol size at the two ends of the mark line. It can be an arrary for two ends, or assigned seperately.
Attention: You cannot assgin width and height seperately as normal symbolSize
.
Symbol type at the two ends of the mark line. It can be an arrary for two ends, or assigned seperately. See data.symbol for more format information.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Mark point in a chart.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
prefix
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Data array for mark points, each of which is an object. Here are some ways to assign mark point position.
Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
Assign coordinate position with coord attribute, in which 'min'
, 'max'
, 'average'
are supported for each dimension.
Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.
When multiple attributes exist, priority is as the above order.
For example:
data: [
{
name: 'maximum',
type: 'max'
},
{
name: 'coordinate',
coord: [10, 20]
}, {
name: 'fixed x position',
yAixs: 10,
x: '90%'
},
{
name: 'screen coordinate',
x: 100,
y: 100
}
]
Mark point style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Label of mark point.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Offset of 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.
Rotate degree of symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
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 is10
.
If size of symbols needs to be different, you can set with callback function in the following format:
(value: Array|number, params: Object) => number|Array
The first parameter value
is the value in data, and the second parameter params
is the rest parameters of data item.
Symbol of .
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Data should be the two-dimensional array shown as follow.
[
[2320.26, 2320.26, 2287.3, 2362.94],
[2300, 2291.3, 2288.26, 2308.38],
{ // the data item could also be an Object, so that it could contains special settings for this data item.
value: [2300, 2291.3, 2288.26, 2308.38],
itemStyle: {...}
},
...
]
Every data item (each line in the example above) represents a box, which contains 4 values. They are:
[open, close, lowest, highest] (namely: [opening value, closing value, lowest value, highest value])
Graphic style of candlestick, which has normal
and emphasis
two styles. normal
is the style by default, while emphasis
is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border width of candlestick. There is no border when it is 0
.
Border color of bearish candle stick.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Border color of bullish candle stick.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Fill color of bearish candle stick.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Fill color of bullish candle stick.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border width of candlestick. There is no border when it is 0
.
Border color of bearish candle stick.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Border color of bullish candle stick.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Fill color of bearish candle stick.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Fill color of bullish candle stick.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Layout method, whose values may be:
'horizontal'
: horizontally layout all boxs.
'vertical'
: vertically layout all boxs.
The default value is decided by:
category
axis:'horizontal'
;'vertical'
;'horizontal'
.Whether to enable animitation when hovering on box.
Whether to enable highlighting chart when legend is being hovered.
Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption
.
Index of y axis to combine with, which is useful for multiple y axes in one chart.
Index of x axis to combine with, which is useful for multiple x axes in one chart.
The coordinate used in the series, whose options are:
'cartesian2d'
Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with xAxisIndex and yAxisIndex to assign the corresponding axis component.
Boxplot is a convenient way of graphically depicting groups of numerical data through their quartiles.
Example:
Multiple series
can be displayed in the same coordinate system. Please refer to this example.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
z
value of all graghical elements in Box plot, which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in Box plot.
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
Used to mark an area in chart. For example, mark a time interval.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
The scope of the area is defined by data
, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:
Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 5
), or percent (e.g., the value is '35%'
).
Specify the coordinate in data coordinate system (i.e., cartesian) using
coord, which can be also set as 'min'
, 'max'
, 'average'
(e.g, coord: [23, 'min']
, or coord: ['average', 'max']
)。
series.data
using type, where valueIndex or valueDim can be used to specify the dimension on which the min, max or average are calculated.xAxis
or yAxis
to define a mark area based on only X or Y axis, see sample scatter-weightThe priority follows as above if more than one above definition used.
data: [
[
{
name: 'From average to max',
type: 'average'
},
{
type: 'max'
}
],
[
{
name: 'Mark area between two points in data coordiantes',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [
{
name: 'From 60 to 80',
yAxis: 60
},
{
yAxis: 80
}
], [
{
name: 'Mark area covers all data'
coord: ['min', 'min']
},
{
coord: ['max', 'max']
}
],
[
{
name: 'Mark area in two screen points',
x: 100,
y: 100
}, {
x: '90%',
y: '10%'
}
]
]
Specify the right-bottom point.
Label style of the item. Label style of start point and end point will be merged together.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Style of the item.
itemStyle
of start point and end point will be merged together.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
value of the item, not necessary.
y value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
x value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
The format is [start coordinate, end coordinate], where the coordinate system can be x
, y
on cartesian, or radius
, angle
on polar.
Specify the dimension on which min, max, average are calculated,
available when type used.
The value can be the name of the dimension (for example, the value can be x
, angle
in line chart, and open
, close
in candlestick).
Specify the dimension on which min, max, average are calculated,
available when type used.
The value can be 0
(means xAxis, radiusAxis) or 1
(means yAxis, angleAxis),
using the dimension of the first axis by default.
Specify this item is on min or max or average value.
Options:
'min'
max value。'max'
min value。'average'
average value。Specify the left-top point.
Label style of the item. Label style of start point and end point will be merged together.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Style of the item.
itemStyle
of start point and end point will be merged together.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
value of the item, not necessary.
y value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
x value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
The format is [start coordinate, end coordinate], where the coordinate system can be x
, y
on cartesian, or radius
, angle
on polar.
Specify the dimension on which min, max, average are calculated,
available when type used.
The value can be the name of the dimension (for example, the value can be x
, angle
in line chart, and open
, close
in candlestick).
Specify the dimension on which min, max, average are calculated,
available when type used.
The value can be 0
(means xAxis, radiusAxis) or 1
(means yAxis, angleAxis),
using the dimension of the first axis by default.
Specify this item is on min or max or average value.
Options:
'min'
max value。'max'
min value。'average'
average value。Style of the mark area.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Label in mark area.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Use a line in the chart to illustrate.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.
Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
Assign coordinate position with coord attribute, in which 'min'
, 'max'
, 'average'
are supported for each dimension.
Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.
You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning xAxis
or yAxis
. See scatter-weight for example.
When multiple attributes exist, priority is as the above order.
You may also set the type of mark line through type
, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through valueIndex
.
data: [
{
name: 'average line',
// 'average', 'min', and 'max' are supported
type: 'average'
},
{
name: 'Horizontal line with Y value at 100',
yAxis: 100
},
[
{
// Use the same name with starting and ending point
name: 'Minimum to Maximum',
type: 'min'
},
{
type: 'max'
}
],
[
{
name: 'Markline between two points',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [{
// Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.
yAxis: 'max',
x: '90%'
}, {
type: 'max'
}],
[
{
name: 'Mark line between two points',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]
Data of the ending point.
Label of this data item, which will be merged with label
of starting point and ending point.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Line style of this data item, which will be merged with lineStyle
of starting point and ending point.
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Offset of ending point 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.
Rotate degree of ending point symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
ending point 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 is10
.
Symbol of ending point.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Label value, which can be ignored.
Y position according to container, in pixel.
X position according to container, in pixel.
Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x
, and y
for rectangular coordinates, or radius
, and angle
for polar coordinates.
Notice: For axis with axis.type 'category'
:
number
, it represents index of axis.data.string
, it represents concrete value in axis.data. Please notice that in this case xAxis.data
must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.For example:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine is in the same way.
data: [{
coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.
// coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.
}]
}
}
}
Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x
, or angle
for line charts, or open
, or close
for candlestick charts.
Works only when 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.
Special label types, are used to label maximum value, minimum value and so on.
Options are:
'min'
maximum value.'max'
minimum value.'average'
average value.Data of the starting point.
Label of this data item, which will be merged with label
of starting point and ending point.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Line style of this data item, which will be merged with lineStyle
of starting point and ending point.
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Offset of starting point 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.
Rotate degree of starting point symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
starting point 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 is10
.
Symbol of starting point.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Label value, which can be ignored.
Y position according to container, in pixel.
X position according to container, in pixel.
Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x
, and y
for rectangular coordinates, or radius
, and angle
for polar coordinates.
Notice: For axis with axis.type 'category'
:
number
, it represents index of axis.data.string
, it represents concrete value in axis.data. Please notice that in this case xAxis.data
must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.For example:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine is in the same way.
data: [{
coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.
// coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.
}]
}
}
}
Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x
, or angle
for line charts, or open
, or close
for candlestick charts.
Works only when 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.
Special label types, are used to label maximum value, minimum value and so on.
Options are:
'min'
maximum value.'max'
minimum value.'average'
average value.Mark line style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Mark line text.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Precison of marking line value, which is useful when displaying average value mark line.
Symbol size at the two ends of the mark line. It can be an arrary for two ends, or assigned seperately.
Attention: You cannot assgin width and height seperately as normal symbolSize
.
Symbol type at the two ends of the mark line. It can be an arrary for two ends, or assigned seperately. See data.symbol for more format information.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Mark point in a chart.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
prefix
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Data array for mark points, each of which is an object. Here are some ways to assign mark point position.
Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
Assign coordinate position with coord attribute, in which 'min'
, 'max'
, 'average'
are supported for each dimension.
Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.
When multiple attributes exist, priority is as the above order.
For example:
data: [
{
name: 'maximum',
type: 'max'
},
{
name: 'coordinate',
coord: [10, 20]
}, {
name: 'fixed x position',
yAixs: 10,
x: '90%'
},
{
name: 'screen coordinate',
x: 100,
y: 100
}
]
Mark point style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Label of mark point.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Offset of 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.
Rotate degree of symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
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 is10
.
If size of symbols needs to be different, you can set with callback function in the following format:
(value: Array|number, params: Object) => number|Array
The first parameter value
is the value in data, and the second parameter params
is the rest parameters of data item.
Symbol of .
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Data should be the two-dimensional array shown as follow.
[
[655, 850, 940, 980, 1175],
[672.5, 800, 845, 885, 1012.5],
[780, 840, 855, 880, 940],
[621.25, 767.5, 815, 865, 1011.25],
{ // the data item could also be an Object, so that it could contains special settings for this data item.
value: [713.75, 807.5, 810, 870, 963.75],
itemStyle: {...}
},
...
]
Every data item (each line in the example above) in the two-dimensional array will be rendered into a box, and each line have five values as:
[min, Q1, median (or Q2), Q3, max]
Data Processing
ECharts doesn't contain data processing modules, so the five statistic values should be calculated by yourself and then passes into boxplot
.
However, ECharts also provide some simple raw data processing tools. For example, this example uses echarts.dataTool.prepareBoxplotData
to proceed simple data statistics.
Graphic style of boxplot, which has normal
and emphasis
two styles. normal
is the style by default, while emphasis
is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
boxplot border width. No border when it is set to be 0.
boxplot border color, whose format is similar to that of color
.
boxplot color. Color is taken from option.color Palette 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'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
boxplot border width. No border when it is set to be 0.
boxplot border color, whose format is similar to that of color
.
boxplot color. Color is taken from option.color Palette 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'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
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.
Layout methods, whose optional values are:
'horizontal'
: horizontally layout all boxes.
'vertical'
: vertically layout all boxes.
The default value is decided by:
category
axis:'horizontal'
;'vertical'
;'horizontal'
.Whether to enable the animation when hovering on box.
Whether to enable highlighting chart when legend is being hovered.
Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption
.
Index of y axis to combine with, which is useful for multiple y axes in one chart.
Index of x axis to combine with, which is useful for multiple x axes in one chart.
The coordinate used in the series, whose options are:
'cartesian2d'
Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with xAxisIndex and yAxisIndex to assign the corresponding axis component.
Treemap is a common way to present "hierarchical data" or "tree data".It primarily highlights the important nodes at all hierarchies in 『Tree』with area.
Example:
Visual Mapping:
treemap maps the numerical values to area.
Moreover, it is able to map some dimensions of data to other visual channel, like colors, lightness of colors and etc.
About visual encoding, see details in series-treemap.levels.
Drill Down:
The feature drill down
means: when clicking a tree node, this node will be set as root and its children will be shown. When leafDepth is set, this feature is enabled.
An example about drill down:
Notice: There are some difference in treemap configuration between ECharts3 and ECharts2. Some immature configuration ways are no longer supported:
The position method using center/size
is no longer supported, and left/top/bottom/right/width/height
are used to position treemap, as other components do.
The configuration item breadcrumb
is moved outside itemStyle.normal/itemStyle.emphasis
, and it is in the same level with itemStyle
now.
The configuration item root
is not avaliable temporarily.User can zoom treemap to see some tiny or deep descendants, or using leafDepth to enable the feature of "drill down".
The configuration item label
is moved outside the itemStyle.normal/itemStyle.emphasis
, and it is in the same level with itemStyle
now.
The configuration items itemStyle.normal.childBorderWidth
and itemStyle.normal.childBorderColor
are not supported anymore (because in this way only 2 levels can be defined). series-treemap.levels is used to define all levels now.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
the the data format of series-treemap.data is a forest. For example:
[ // Tips, the top level is an array.
{
value: 1212,
children: [
{
value: 2323, // The value of this node, indicating the area size.
// it could also be an array, such as [2323, 43, 55], in which the first item of array indicates the area size.
// The other items of the array can be used for extra visual mapping. See details in series-treemp.levels.
id: 'someid-1', // id is not mandatory.
// But if using API, id is used to locate node.
name: 'description of this node', // show the description text in rectangle.
children: [...],
label: { // The label config of this node (if necessary).
... // see series-treemap.label.
},
itemStyle: { // the itemStyle of this node (if necessary).
... // the see series-treemap.itemStyle.
}
},
{
value: 4545,
id: 'someid-2',
name: 'description of this node',
children: [
{
value: 5656,
id: 'someid-3',
name: 'description of this node',
children: [...]
},
...
]
}
]
},
{
value: [23, 59, 12]
// if there is no children, here could be nothing.
},
...
]
breadcrumb, showing the path of the current node.
Graphic style of , which has normal
and emphasis
two styles. normal
is the style by default, while emphasis
is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
boxplot border width. No border when it is set to be 0.
boxplot border color, whose format is similar to that of color
.
boxplot color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
boxplot border width. No border when it is set to be 0.
boxplot border color, whose format is similar to that of color
.
boxplot color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
When is no content in breadcrumb, this minimal width need to be set up.
The height of breadcrumb.
Distance between asdf component and the bottom side of the container.
bottom
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Adaptive by default.
Distance between asdf component and the right side of the container.
right
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Adaptive by default.
Distance between asdf component and the top side of the container.
top
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'top'
, 'middle'
, or 'bottom'
.
If the left
value is set to be 'top'
, 'middle'
, or 'bottom'
, then the component will be aligned automatically based on position.
Distance between asdf component and the left side of the container.
left
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'left'
, 'center'
, or 'right'
.
If the left
value is set to be 'left'
, 'center'
, or 'right'
, then the component will be aligned automatically based on position.
Whether to show the breadcrumb.
Tps: In treemap,
itemStyle
attribute could appear in more than one places:
- It could appear in sereis-treemap, indicating the unified setting of the series.
It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
It could appear in each node of series-treemap.data, indicating the particular setting of each node.
The color of a node. It use global palette option.color by default.
The color saturation of a border or gap. The value range is between 0 ~ 1.
Tips:
When borderColorSaturation
is set, the borderColor
is disabled, and, instead, the final border color is calculated based on the color of this node (this color could be sepcified explicitly or inherited from its parent node) and mixing with borderColorSaturation
.
In this way, a effect can be implemented: different sections have different hue of gap color repectively, which makes users easy to distinguish both sections and levels.
How to avoid confusion by setting border/gap of node
If all of the border/gaps are set with the same color, confusion might occur when rectangulars in different levels display at the same time.
See the example. Noticed that the child rectangles in the red area are in the deeper level than rectangles that are saparated by white gap. So in the red area, basically we set gap color with red, and use borderColorSaturation
to lift the saturation.
The border color and gap color of a node.
Gaps between child nodes.
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
The color saturation of a node. The range is between 0 ~ 1.
The tranparent rate of a node, the range is between 0 ~ 1.
The color of a node. It use global palette option.color by default.
label
decribes the style of the label in each node.
Tps: In treemap,
label
attribute could appear in more than one places:
- It could appear in sereis-treemap, indicating the unified setting of the series.
It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
It could appear in each node of series-treemap.data, indicating the particular setting of each node.
Vertical alignment, Optional values are 'middle'
, 'right
and 'left'
.
Horizontal alignment. Optional values are 'center'
, 'right
and 'left'
.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
When the text is overflow the rectangle boundary, whether to replace the excess part with apostrophe.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Wether to show the text label.
Vertical alignment, Optional values are 'middle'
, 'right
and 'left'
.
Horizontal alignment. Optional values are 'center'
, 'right
and 'left'
.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
When the text is overflow the rectangle boundary, whether to replace the excess part with apostrophe.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Wether to show the text label.
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.
About visual encoding, see details in series-treemap.levels.
Tps: In treemap,
childrenVisibleMin
attribute could appear in more than one places:
- It could appear in sereis-treemap, indicating the unified setting of the series.
It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
It could appear in each node of series-treemap.data, indicating the particular setting of each node.
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.
About visual encoding, see details in series-treemap.levels.
Tps: In treemap,
visibleMin
attribute could appear in more than one places:
- It could appear in sereis-treemap, indicating the unified setting of the series.
It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
It could appear in each node of series-treemap.data, indicating the particular setting of each node.
Specify the rule according to which each node obtain color from color list. Optional values:
'value'
:Map series-treemap.data.value to color.
In this way, the color of each node indicate its value.
visualDimension can be used to specify which dimension of data is used to perform visual mapping.
'index'
:Map the index
(ordinal number) of nodes to color. Namely, in a level, the first node is mapped to the first color of color list, and the second node gets the second color.
In this way, adjacent nodes are distinguished by color.
'id'
:Map series-treemap.data.id to color.
Since id
is used to identify node, if user call setOption
to modify the tree, each node will remain the original color before and after setOption
called. See this example.
About visual encoding, see details in series-treemap.levels.
Tps: In treemap,
colorMappingBy
attribute could appear in more than one places:
- It could appear in sereis-treemap, indicating the unified setting of the series.
It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
It could appear in each node of series-treemap.data, indicating the particular setting of each node.
It indicates the range of saturation (color alpha) of the series. The range of values is 0 ~ 1.
For example, colorSaturation
can be [0.3, 1]
.
About visual encoding, see details in series-treemap.levels.
Tps: In treemap,
colorSaturation
attribute could appear in more than one places:
- It could appear in sereis-treemap, indicating the unified setting of the series.
It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
It could appear in each node of series-treemap.data, indicating the particular setting of each node.
It indicates the range of tranparent rate (color alpha) of the series. The range of values is 0 ~ 1.
For example, colorAlpha
can be [0.3, 1]
.
About visual encoding, see details in series-treemap.levels.
Tps: In treemap,
colorAlpha
attribute could appear in more than one places:
- It could appear in sereis-treemap, indicating the unified setting of the series.
It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
It could appear in each node of series-treemap.data, indicating the particular setting of each node.
The maximal value of current level. Auto-statistics by default.
When colorMappingBy is set to 'value'
, you are able to specify extent manually for visual mapping by specifying visualMin
or visualMax
.
The minimal value of current level. Auto-statistics by default.
When colorMappingBy is set to 'value'
, you are able to specify extent manually for visual mapping by specifying visualMin
or visualMax
.
treemap
is able to map any dimensions of data to visual.
The value of series-treemap.data can be an array. And each item of the array represents a "dimension". visualDimension
specifies the dimension on which visual mapping will be performed.
About visual encoding, see details in series-treemap.levels.
Tps: In treemap,
visualDimension
attribute could appear in more than one places:
- It could appear in sereis-treemap, indicating the unified setting of the series.
It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
It could appear in each node of series-treemap.data, indicating the particular setting of each node.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
child nodes, recursive definition, configurations are the same as series-treemap.data.
The same meaning as target
in html
<a>
label, See series-treemap.data.link. Option values are: 'blank'
or 'self'
.
Enable hyperlink jump when clicking on node. It is avaliable when series-treemap.nodeClick is 'link'
.
See series-treemap.data.target.
Multiple Levels Configuration
treemap adopts 4-level configuration:
"each node" --> "each level" --> "each series".
That is, we can configurate each node, can also configurate each level of the tree, or set overall configurations on each series. The highest priority is node configuration.
levels
is configurations on each levels, which is used most.
For example:
// Notice that in fact the data structure is not "tree", but is "forest".
data: [
{
name: 'nodeA',
children: [
{name: 'nodeAA'},
{name: 'nodeAB'},
]
},
{
name: 'nodeB',
children: [
{name: 'nodeBA'}
]
}
],
levels: [
{...}, // configurations of the top level of the data structure "forest"
// (the level that contains 'nodeA', 'nodeB' shown above).
{...}, // configurations of the next level
// (the level that contains 'nodeAA', 'nodeAB', 'nodeBA' shown above)
{...}, // configurations of the next level
...
]
The Rules about Visual Mapping
When designing a treemap, we primarily focus on how to visually distinguish "different levels", "different categories in the same level", which requires appropriate settings of "rectangular color", "border thickness", "border color" and even "color saturation of rectangular" and so on on each level.
See example. The top level is divided into several parts by colors "red", "green", "blue", and etc ... In each color block, colorSaturation
is used to distinguish nodes in sublevel. The border color of the top level is "white", while the border color of the sublevel is the color that based on the current block color and processed by borderColorSaturation
.
treemap
uses this rule of visual configuration: each level computes its visual value based on the configurations (color
, colorSaturation
, borderColor
, colorSaturation
) on this level. If there is no certain configuration in a node, it inherits the configuration from its parent.
In this way, this effect can be configured: set a color
list on the parent level, and set colorSaturation
on the child level, and then each node in the parent level would obtain a color from the color
list, and each node in the child level would obtain a value from colorSaturation
and compound it with the color inherited from its parent node to get its final color.
Dimensions and "Extra Visual Mapping"
See the example below: every value
field is set as an Array, in which each item in the array represents a dimension respectively.
[
{
value: [434, 6969, 8382],
children: [
{
value: [1212, 4943, 5453],
id: 'someid-1',
name: 'description of this node',
children: [...]
},
{
value: [4545, 192, 439],
id: 'someid-2',
name: 'description of this node',
children: [...]
},
...
]
},
{
value: [23, 59, 12],
children: [...]
},
...
]
treemap
will map the first dimension (the first item of the array) to "area". If we want to express more information, we could map another dimension (specified by series-treemap.visualDimension) to another visual types, such as colorSaturation
and so on. See the example and select the legend 'Growth'.
How to avoid confusion by setting border/gap of node
If all of the border/gaps are set with the same color, confusion might occur when rectangulars in different levels display at the same time.
See the example. Noticed that the child rectangles in the red area are in the deeper level than rectangles that are saparated by white gap. So in the red area, basically we set gap color with red, and use borderColorSaturation
to lift the saturation.
Explanation about borderWidth, gapWidth, borderColor
The treemap will be auto zoomed to a appropriate ratio when a node is clicked (when nodeClick is set as 'zoomToNode'
and no drill down happens). This configuration item indicates the ratio.
The behaviour when clicking a node. Optional values are:
false
: Do nothing after clicked.'zoomToNode'
: Zoom to clicked node.'link'
: If there is link in node data, do hyperlink jump after clicked.Whether to enable dragging roam (move and zoom). Optional values are:
false
: roam is disabled.'scale'
or 'zoom'
: zoom only.'move'
or 'pan'
: move (translation) only.true
: both zoom and move (translation) are avaliable.When leafDepth
is set, the feature "drill down" is enabled, which means when clicking a tree node, this node will be set as root and its children will be shown.
leafDepth
represents how many levels are shown at most. For example, when leafDepth
is set to 1
, only one level will be shown.
leafDepth
is null
/undefined
by default, which means that "drill down" is disabled.
An example about drill down:
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))
.
Height of treemap component.
Width of treemap component.
Distance between treemap component and the bottom side of the container.
bottom
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Adaptive by default.
Distance between treemap component and the right side of the container.
right
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Adaptive by default.
Distance between treemap component and the top side of the container.
top
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'top'
, 'middle'
, or 'bottom'
.
If the left
value is set to be 'top'
, 'middle'
, or 'bottom'
, then the component will be aligned automatically based on position.
Distance between treemap component and the left side of the container.
left
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'left'
, 'center'
, or 'right'
.
If the left
value is set to be 'left'
, 'center'
, or 'right'
, then the component will be aligned automatically based on position.
z
value of all graghical elements in , which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in .
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
radar chart
Radar chart is mainly used to show multi-variable data, such as the analysis of a football player's varied attributes. It relies radar component.
Here is the example of AQI data which is presented in radar chart.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
z
value of all graghical elements in radar chart, which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in radar chart.
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
The data in radar chart is multi-variable (dimension). Here is an example:
data : [
{
value : [4300, 10000, 28000, 35000, 50000, 19000],
name : 'Allocated Budget'
},
{
value : [5000, 14000, 28000, 31000, 42000, 21000],
name : 'Actual Spending'
}
]
Among them, value
item array contains data that is corresponding to radar.indicator.
Area filling style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Fill color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Fill color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Line style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Item style of the inflection point of the lines.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color. Color is taken from option.color Palette 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'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Supports callback functions, in the form of:
(params: Object) => Color
Input parameters are seriesIndex
, dataIndex
, data
, value
, and etc. of data item.
Text label of , to explain some data information about graphic item like value, name and so on. label
is placed under itemStyle.normal
in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, label
is taken to be at the same level with itemStyle
, and has two status normal
and emphasis
as itemStyle
does.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Offset of 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.
Rotate degree of symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
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 is10
.
If size of symbols needs to be different, you can set with callback function in the following format:
(value: Array|number, params: Object) => number|Array
The first parameter value
is the value in data, and the second parameter params
is the rest parameters of data item.
Symbol of .
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Index of radar component that radar chart uses.
Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption
.
The scatter (bubble) graph with ripple animation. The special animation effect can visually highlights some data.
Tip: The effects of map was achieved through markPoint in ECharts 2.x. However, in ECharts 3, effectScatter on geographic coordinate is recommended for achieving that effects of map.
Here is the example:
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
z
value of all graghical elements in , which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in .
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
Used to mark an area in chart. For example, mark a time interval.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
The scope of the area is defined by data
, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:
Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 5
), or percent (e.g., the value is '35%'
).
Specify the coordinate in data coordinate system (i.e., cartesian) using
coord, which can be also set as 'min'
, 'max'
, 'average'
(e.g, coord: [23, 'min']
, or coord: ['average', 'max']
)。
series.data
using type, where valueIndex or valueDim can be used to specify the dimension on which the min, max or average are calculated.xAxis
or yAxis
to define a mark area based on only X or Y axis, see sample scatter-weightThe priority follows as above if more than one above definition used.
data: [
[
{
name: 'From average to max',
type: 'average'
},
{
type: 'max'
}
],
[
{
name: 'Mark area between two points in data coordiantes',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [
{
name: 'From 60 to 80',
yAxis: 60
},
{
yAxis: 80
}
], [
{
name: 'Mark area covers all data'
coord: ['min', 'min']
},
{
coord: ['max', 'max']
}
],
[
{
name: 'Mark area in two screen points',
x: 100,
y: 100
}, {
x: '90%',
y: '10%'
}
]
]
Specify the right-bottom point.
Label style of the item. Label style of start point and end point will be merged together.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Style of the item.
itemStyle
of start point and end point will be merged together.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
value of the item, not necessary.
y value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
x value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
The format is [start coordinate, end coordinate], where the coordinate system can be x
, y
on cartesian, or radius
, angle
on polar.
Specify the dimension on which min, max, average are calculated,
available when type used.
The value can be the name of the dimension (for example, the value can be x
, angle
in line chart, and open
, close
in candlestick).
Specify the dimension on which min, max, average are calculated,
available when type used.
The value can be 0
(means xAxis, radiusAxis) or 1
(means yAxis, angleAxis),
using the dimension of the first axis by default.
Specify this item is on min or max or average value.
Options:
'min'
max value。'max'
min value。'average'
average value。Specify the left-top point.
Label style of the item. Label style of start point and end point will be merged together.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Style of the item.
itemStyle
of start point and end point will be merged together.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
value of the item, not necessary.
y value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
x value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
The format is [start coordinate, end coordinate], where the coordinate system can be x
, y
on cartesian, or radius
, angle
on polar.
Specify the dimension on which min, max, average are calculated,
available when type used.
The value can be the name of the dimension (for example, the value can be x
, angle
in line chart, and open
, close
in candlestick).
Specify the dimension on which min, max, average are calculated,
available when type used.
The value can be 0
(means xAxis, radiusAxis) or 1
(means yAxis, angleAxis),
using the dimension of the first axis by default.
Specify this item is on min or max or average value.
Options:
'min'
max value。'max'
min value。'average'
average value。Style of the mark area.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Label in mark area.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Use a line in the chart to illustrate.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.
Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
Assign coordinate position with coord attribute, in which 'min'
, 'max'
, 'average'
are supported for each dimension.
Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.
You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning xAxis
or yAxis
. See scatter-weight for example.
When multiple attributes exist, priority is as the above order.
You may also set the type of mark line through type
, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through valueIndex
.
data: [
{
name: 'average line',
// 'average', 'min', and 'max' are supported
type: 'average'
},
{
name: 'Horizontal line with Y value at 100',
yAxis: 100
},
[
{
// Use the same name with starting and ending point
name: 'Minimum to Maximum',
type: 'min'
},
{
type: 'max'
}
],
[
{
name: 'Markline between two points',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [{
// Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.
yAxis: 'max',
x: '90%'
}, {
type: 'max'
}],
[
{
name: 'Mark line between two points',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]
Data of the ending point.
Label of this data item, which will be merged with label
of starting point and ending point.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Line style of this data item, which will be merged with lineStyle
of starting point and ending point.
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Offset of ending point 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.
Rotate degree of ending point symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
ending point 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 is10
.
Symbol of ending point.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Label value, which can be ignored.
Y position according to container, in pixel.
X position according to container, in pixel.
Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x
, and y
for rectangular coordinates, or radius
, and angle
for polar coordinates.
Notice: For axis with axis.type 'category'
:
number
, it represents index of axis.data.string
, it represents concrete value in axis.data. Please notice that in this case xAxis.data
must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.For example:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine is in the same way.
data: [{
coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.
// coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.
}]
}
}
}
Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x
, or angle
for line charts, or open
, or close
for candlestick charts.
Works only when 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.
Special label types, are used to label maximum value, minimum value and so on.
Options are:
'min'
maximum value.'max'
minimum value.'average'
average value.Data of the starting point.
Label of this data item, which will be merged with label
of starting point and ending point.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Line style of this data item, which will be merged with lineStyle
of starting point and ending point.
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Offset of starting point 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.
Rotate degree of starting point symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
starting point 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 is10
.
Symbol of starting point.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Label value, which can be ignored.
Y position according to container, in pixel.
X position according to container, in pixel.
Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x
, and y
for rectangular coordinates, or radius
, and angle
for polar coordinates.
Notice: For axis with axis.type 'category'
:
number
, it represents index of axis.data.string
, it represents concrete value in axis.data. Please notice that in this case xAxis.data
must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.For example:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine is in the same way.
data: [{
coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.
// coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.
}]
}
}
}
Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x
, or angle
for line charts, or open
, or close
for candlestick charts.
Works only when 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.
Special label types, are used to label maximum value, minimum value and so on.
Options are:
'min'
maximum value.'max'
minimum value.'average'
average value.Mark line style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Mark line text.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Precison of marking line value, which is useful when displaying average value mark line.
Symbol size at the two ends of the mark line. It can be an arrary for two ends, or assigned seperately.
Attention: You cannot assgin width and height seperately as normal symbolSize
.
Symbol type at the two ends of the mark line. It can be an arrary for two ends, or assigned seperately. See data.symbol for more format information.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Mark point in a chart.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
prefix
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Data array for mark points, each of which is an object. Here are some ways to assign mark point position.
Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
Assign coordinate position with coord attribute, in which 'min'
, 'max'
, 'average'
are supported for each dimension.
Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.
When multiple attributes exist, priority is as the above order.
For example:
data: [
{
name: 'maximum',
type: 'max'
},
{
name: 'coordinate',
coord: [10, 20]
}, {
name: 'fixed x position',
yAixs: 10,
x: '90%'
},
{
name: 'screen coordinate',
x: 100,
y: 100
}
]
Mark point style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Label of mark point.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Offset of 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.
Rotate degree of symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
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 is10
.
If size of symbols needs to be different, you can set with callback function in the following format:
(value: Array|number, params: Object) => number|Array
The first parameter value
is the value in data, and the second parameter params
is the rest parameters of data item.
Symbol of .
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Data array of series, which can be in the following forms:
When an axis of the coordinate is of category type, data can be in one dimension, whose length is equals to that of xAxis.data, and they are one-to-one matches. For example:
[12, 34, 56, 10, 23]
When both axes of the coordinate are of value type, every data item needs an array, and at least two values should represent x
and y
in rectangular coordinates, or radius
and angle
in polar coordinates. For example:
[[3.4, 4.5, 15], [4.2, 2.3, 20], [10.8, 9.5, 30], [7.2, 8.8, 18]]
Every data values from the third value can be used to present other data dimensions. With visualMap component, one or more dimensions can be assigned to map to color, size and other graphic attributes.
When both axes in the coordinate are of category type, every data item also needs to be one array. At least two values of a data item should represent category index or name of two axes. For example:
[[0, 0, 2], ['monday', 2, 1], [2, 1, 2], [3, 3, 5]]
Every data values from the third value can be used to present other data dimensions. With visualMap component, one or more dimensions can be assigned to map to color, size and other graphic attributes.
Example with two category axes can be found at Github Punchcard.
When a data item need to be custerized, data item can be an object, whose value
stands for data value, for example:
[
12, 34,
{
value : 56,
// user-defined label format that only useful for this data item
label: {},
// user-defined special itemStyle that only useful for this data item
itemStyle:{}
},
10, 23
]
Tip: When data of certain category does not exist (ps: not exist doesn't mean the value is 0), you may use -
to represent. When there is no data, it should be disconnected in line chart, and no symbols in the chart.
Graphic style of , which has normal
and emphasis
two styles. normal
is the style by default, while emphasis
is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color. Color is taken from option.color Palette 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'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Supports callback functions, in the form of:
(params: Object) => Color
Input parameters are seriesIndex
, dataIndex
, data
, value
, and etc. of data item.
Text label of , to explain some data information about graphic item like value, name and so on. label
is placed under itemStyle.normal
in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, label
is taken to be at the same level with itemStyle
, and has two status normal
and emphasis
as itemStyle
does.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Offset of 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.
Rotate degree of symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
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 is10
.
Symbol of .
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Index of geographic coordinate to combine with, which is useful for multiple geographic axes in one chart.
Index of polar coordinate to combine with, which is useful for multiple polar axes in one chart.
Index of y axis to combine with, which is useful for multiple y axes in one chart.
Index of x axis to combine with, which is useful for multiple x axes in one chart.
The coordinate used in the series, whose options are:
'cartesian2d'
Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with xAxisIndex and yAxisIndex to assign the corresponding axis component.
'polar'
Use polar coordinates, with polarIndex to assign the corresponding polar coordinate component.
'geo'
Use geographic coordinate, with geoIndex to assign the corresponding geographic coordinate components.
Related configurations about ripple effect.
The brush type for ripples. options: 'stroke'
and 'fill'
.
The maximum zooming scale of ripples in animation.
The duration of animation.
When to show the effect.
Options:
'render'
Show the effect when rendering is done.'emphasis'
Show the effect when it is highlight (hover).Type of effect. Only ripple effect of 'ripple'
is supported currently.
Whether to enable highlighting chart when legend is being hovered.
Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption
.
Scatter (bubble) chart . The scatter chart in rectangular coordinate could be used to present the relation between x
and y
. If data have multiple dimensions, the values of the other dimensions can be visualized through symbol with various sizes and colors, which becomes a bubble chart. These can be done by using with visualMap component.
It could be used with rectangular coordinate and polar coordinate and geographical coordinate.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
z
value of all graghical elements in scatter chart, which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in scatter chart.
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
Used to mark an area in chart. For example, mark a time interval.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
The scope of the area is defined by data
, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:
Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 5
), or percent (e.g., the value is '35%'
).
Specify the coordinate in data coordinate system (i.e., cartesian) using
coord, which can be also set as 'min'
, 'max'
, 'average'
(e.g, coord: [23, 'min']
, or coord: ['average', 'max']
)。
series.data
using type, where valueIndex or valueDim can be used to specify the dimension on which the min, max or average are calculated.xAxis
or yAxis
to define a mark area based on only X or Y axis, see sample scatter-weightThe priority follows as above if more than one above definition used.
data: [
[
{
name: 'From average to max',
type: 'average'
},
{
type: 'max'
}
],
[
{
name: 'Mark area between two points in data coordiantes',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [
{
name: 'From 60 to 80',
yAxis: 60
},
{
yAxis: 80
}
], [
{
name: 'Mark area covers all data'
coord: ['min', 'min']
},
{
coord: ['max', 'max']
}
],
[
{
name: 'Mark area in two screen points',
x: 100,
y: 100
}, {
x: '90%',
y: '10%'
}
]
]
Specify the right-bottom point.
Label style of the item. Label style of start point and end point will be merged together.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Style of the item.
itemStyle
of start point and end point will be merged together.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
value of the item, not necessary.
y value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
x value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
The format is [start coordinate, end coordinate], where the coordinate system can be x
, y
on cartesian, or radius
, angle
on polar.
Specify the dimension on which min, max, average are calculated,
available when type used.
The value can be the name of the dimension (for example, the value can be x
, angle
in line chart, and open
, close
in candlestick).
Specify the dimension on which min, max, average are calculated,
available when type used.
The value can be 0
(means xAxis, radiusAxis) or 1
(means yAxis, angleAxis),
using the dimension of the first axis by default.
Specify this item is on min or max or average value.
Options:
'min'
max value。'max'
min value。'average'
average value。Specify the left-top point.
Label style of the item. Label style of start point and end point will be merged together.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Style of the item.
itemStyle
of start point and end point will be merged together.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
value of the item, not necessary.
y value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
x value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
The format is [start coordinate, end coordinate], where the coordinate system can be x
, y
on cartesian, or radius
, angle
on polar.
Specify the dimension on which min, max, average are calculated,
available when type used.
The value can be the name of the dimension (for example, the value can be x
, angle
in line chart, and open
, close
in candlestick).
Specify the dimension on which min, max, average are calculated,
available when type used.
The value can be 0
(means xAxis, radiusAxis) or 1
(means yAxis, angleAxis),
using the dimension of the first axis by default.
Specify this item is on min or max or average value.
Options:
'min'
max value。'max'
min value。'average'
average value。Style of the mark area.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Label in mark area.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Use a line in the chart to illustrate.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.
Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
Assign coordinate position with coord attribute, in which 'min'
, 'max'
, 'average'
are supported for each dimension.
Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.
You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning xAxis
or yAxis
. See scatter-weight for example.
When multiple attributes exist, priority is as the above order.
You may also set the type of mark line through type
, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through valueIndex
.
data: [
{
name: 'average line',
// 'average', 'min', and 'max' are supported
type: 'average'
},
{
name: 'Horizontal line with Y value at 100',
yAxis: 100
},
[
{
// Use the same name with starting and ending point
name: 'Minimum to Maximum',
type: 'min'
},
{
type: 'max'
}
],
[
{
name: 'Markline between two points',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [{
// Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.
yAxis: 'max',
x: '90%'
}, {
type: 'max'
}],
[
{
name: 'Mark line between two points',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]
Data of the ending point.
Label of this data item, which will be merged with label
of starting point and ending point.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Line style of this data item, which will be merged with lineStyle
of starting point and ending point.
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Offset of ending point 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.
Rotate degree of ending point symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
ending point 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 is10
.
Symbol of ending point.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Label value, which can be ignored.
Y position according to container, in pixel.
X position according to container, in pixel.
Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x
, and y
for rectangular coordinates, or radius
, and angle
for polar coordinates.
Notice: For axis with axis.type 'category'
:
number
, it represents index of axis.data.string
, it represents concrete value in axis.data. Please notice that in this case xAxis.data
must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.For example:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine is in the same way.
data: [{
coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.
// coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.
}]
}
}
}
Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x
, or angle
for line charts, or open
, or close
for candlestick charts.
Works only when 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.
Special label types, are used to label maximum value, minimum value and so on.
Options are:
'min'
maximum value.'max'
minimum value.'average'
average value.Data of the starting point.
Label of this data item, which will be merged with label
of starting point and ending point.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Line style of this data item, which will be merged with lineStyle
of starting point and ending point.
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Offset of starting point 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.
Rotate degree of starting point symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
starting point 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 is10
.
Symbol of starting point.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Label value, which can be ignored.
Y position according to container, in pixel.
X position according to container, in pixel.
Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x
, and y
for rectangular coordinates, or radius
, and angle
for polar coordinates.
Notice: For axis with axis.type 'category'
:
number
, it represents index of axis.data.string
, it represents concrete value in axis.data. Please notice that in this case xAxis.data
must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.For example:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine is in the same way.
data: [{
coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.
// coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.
}]
}
}
}
Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x
, or angle
for line charts, or open
, or close
for candlestick charts.
Works only when 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.
Special label types, are used to label maximum value, minimum value and so on.
Options are:
'min'
maximum value.'max'
minimum value.'average'
average value.Mark line style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Mark line text.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Precison of marking line value, which is useful when displaying average value mark line.
Symbol size at the two ends of the mark line. It can be an arrary for two ends, or assigned seperately.
Attention: You cannot assgin width and height seperately as normal symbolSize
.
Symbol type at the two ends of the mark line. It can be an arrary for two ends, or assigned seperately. See data.symbol for more format information.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Mark point in a chart.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
prefix
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Data array for mark points, each of which is an object. Here are some ways to assign mark point position.
Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
Assign coordinate position with coord attribute, in which 'min'
, 'max'
, 'average'
are supported for each dimension.
Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.
When multiple attributes exist, priority is as the above order.
For example:
data: [
{
name: 'maximum',
type: 'max'
},
{
name: 'coordinate',
coord: [10, 20]
}, {
name: 'fixed x position',
yAixs: 10,
x: '90%'
},
{
name: 'screen coordinate',
x: 100,
y: 100
}
]
Mark point style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Label of mark point.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Offset of 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.
Rotate degree of symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
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 is10
.
If size of symbols needs to be different, you can set with callback function in the following format:
(value: Array|number, params: Object) => number|Array
The first parameter value
is the value in data, and the second parameter params
is the rest parameters of data item.
Symbol of .
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Data array of series, which can be in the following forms:
When an axis of the coordinate is of category type, data can be in one dimension, whose length is equals to that of xAxis.data, and they are one-to-one matches. For example:
[12, 34, 56, 10, 23]
When both axes of the coordinate are of value type, every data item needs an array, and at least two values should represent x
and y
in rectangular coordinates, or radius
and angle
in polar coordinates. For example:
[[3.4, 4.5, 15], [4.2, 2.3, 20], [10.8, 9.5, 30], [7.2, 8.8, 18]]
Every data values from the third value can be used to present other data dimensions. With visualMap component, one or more dimensions can be assigned to map to color, size and other graphic attributes.
When both axes in the coordinate are of category type, every data item also needs to be one array. At least two values of a data item should represent category index or name of two axes. For example:
[[0, 0, 2], ['monday', 2, 1], [2, 1, 2], [3, 3, 5]]
Every data values from the third value can be used to present other data dimensions. With visualMap component, one or more dimensions can be assigned to map to color, size and other graphic attributes.
Example with two category axes can be found at Github Punchcard.
When a data item need to be custerized, data item can be an object, whose value
stands for data value, for example:
[
12, 34,
{
value : 56,
// user-defined label format that only useful for this data item
label: {},
// user-defined special itemStyle that only useful for this data item
itemStyle:{}
},
10, 23
]
Tip: When data of certain category does not exist (ps: not exist doesn't mean the value is 0), you may use -
to represent. When there is no data, it should be disconnected in line chart, and no symbols in the chart.
Graphic style of , which has normal
and emphasis
two styles. normal
is the style by default, while emphasis
is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color. Color is taken from option.color Palette 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'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Supports callback functions, in the form of:
(params: Object) => Color
Input parameters are seriesIndex
, dataIndex
, data
, value
, and etc. of data item.
Text label of , to explain some data information about graphic item like value, name and so on. label
is placed under itemStyle.normal
in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, label
is taken to be at the same level with itemStyle
, and has two status normal
and emphasis
as itemStyle
does.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
The threshold enabling the drawing optimization.
Whether to enable the optimization of large-scale scatter graph. It could be enabled when there is a particularly large number of data(>=5k) .
After being enabled, largeThreshold can be used to indicate the minimum number for turning on the optimization.
The style of a single data item can't be customided.
Offset of 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.
Rotate degree of symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
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 is10
.
If size of symbols needs to be different, you can set with callback function in the following format:
(value: Array|number, params: Object) => number|Array
The first parameter value
is the value in data, and the second parameter params
is the rest parameters of data item.
Symbol of .
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Whether to enable highlighting chart when legend is being hovered.
Whether to enable the animation effect when mouse is on the symbol.
Index of geographic coordinate to combine with, which is useful for multiple geographic axes in one chart.
Index of polar coordinate to combine with, which is useful for multiple polar axes in one chart.
Index of y axis to combine with, which is useful for multiple y axes in one chart.
Index of x axis to combine with, which is useful for multiple x axes in one chart.
The coordinate used in the series, whose options are:
'cartesian2d'
Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with xAxisIndex and yAxisIndex to assign the corresponding axis component.
'polar'
Use polar coordinates, with polarIndex to assign the corresponding polar coordinate component.
'geo'
Use geographic coordinate, with geoIndex to assign the corresponding geographic coordinate components.
Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption
.
pie chart
The pie chart is mainly used for showing proportion of different categories. Each arc length represents the proportion of data quantity.
Tip: The pie chart is more suitable for illustrating the numerical proportion. If you just to present the numerical differences of various categories, the bar graph chart is more suggested. Because compared to tiny length difference, people is less sensitive to the minor radian difference. Otherwise, it can also be shown as Nightingale chart by using the roseType to distinguish different data through radius.
The below example shows a customized Nightingale chart:
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Used to mark an area in chart. For example, mark a time interval.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
The scope of the area is defined by data
, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:
5
), or percent (e.g., the value is '35%'
).The priority follows as above if more than one above definition used.
data: [
[
{
name: 'Mark area in two screen points',
x: 100,
y: 100
}, {
x: '90%',
y: '10%'
}
]
]
Specify the right-bottom point.
Label style of the item. Label style of start point and end point will be merged together.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Style of the item.
itemStyle
of start point and end point will be merged together.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
value of the item, not necessary.
y value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
x value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
Specify the left-top point.
Label style of the item. Label style of start point and end point will be merged together.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Style of the item.
itemStyle
of start point and end point will be merged together.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
value of the item, not necessary.
y value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
x value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
Style of the mark area.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Label in mark area.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Use a line in the chart to illustrate.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.
When multiple attributes exist, priority is as the above order.
data: [
[
{
name: 'Mark line between two points',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]
Data of the ending point.
Label of this data item, which will be merged with label
of starting point and ending point.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Line style of this data item, which will be merged with lineStyle
of starting point and ending point.
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Offset of ending point 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.
Rotate degree of ending point symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
ending point 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 is10
.
Symbol of ending point.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Label value, which can be ignored.
Y position according to container, in pixel.
X position according to container, in pixel.
Data of the starting point.
Label of this data item, which will be merged with label
of starting point and ending point.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Line style of this data item, which will be merged with lineStyle
of starting point and ending point.
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Offset of starting point 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.
Rotate degree of starting point symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
starting point 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 is10
.
Symbol of starting point.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Label value, which can be ignored.
Y position according to container, in pixel.
X position according to container, in pixel.
Mark line style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Mark line text.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Precison of marking line value, which is useful when displaying average value mark line.
Symbol size at the two ends of the mark line. It can be an arrary for two ends, or assigned seperately.
Attention: You cannot assgin width and height seperately as normal symbolSize
.
Symbol type at the two ends of the mark line. It can be an arrary for two ends, or assigned seperately. See data.symbol for more format information.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Mark point in a chart.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
prefix
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Data array for mark points, each of which is an object. Here are some ways to assign mark point position.
When multiple attributes exist, priority is as the above order.
For example:
data: [
{
name: 'screen coordinate',
x: 100,
y: 100
}
]
Mark point style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Label of mark point.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Offset of 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.
Rotate degree of symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
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 is10
.
If size of symbols needs to be different, you can set with callback function in the following format:
(value: Array|number, params: Object) => number|Array
The first parameter value
is the value in data, and the second parameter params
is the rest parameters of data item.
Symbol of .
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Data array of series, which can be a single data value, like:
[12, 34, 56, 10, 23]
Or, if need extra dimensions for components like visualMap to map to graphic attributes like color, it can also be in the form of array. For example:
[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]
In this case, we can assgin the second value in each arrary item to visualMap component.
More likely, we need to assign name to each data item, in which case each item should be an object:
[{
// name of date item
name: 'data1',
// value of date item is 8
value: 10
}, {
name: 'data2',
value: 20
}]
Each data item can be further custerized:
[{
name: 'data1',
value: 10
}, {
// name of data item
name: 'data2',
value : 56,
// user-defined label format that only useful for this data item
label: {},
// user-defined special itemStyle that only useful for this data item
itemStyle:{}
}]
Radius of Pie chart, the first of which is inner radius, and the second is outer radius.
Percentage is supported. When set in percentage, it's relative to the smaller size between height and width of the container.
You can set a large inner radius for a Donut chart.
Center position of Pie chart, the first of which is the horizontal position, and the second is the vertical position.
Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.
Example:
// Set to absolute pixel values
center: [400, 300]
// Set to relative percent
center: ['50%', '50%']
z
value of all graghical elements in , which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in .
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
Graphic style of , which has normal
and emphasis
two styles. normal
is the style by default, while emphasis
is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color. Color is taken from option.color Palette 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'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Supports callback functions, in the form of:
(params: Object) => Color
Input parameters are seriesIndex
, dataIndex
, data
, value
, and etc. of data item.
The style of visual guide line. Will show when label position is set as 'outside'
.
The style of visual guide line in emphasis status.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Whether to show the visual guide line in emphasis status.
The style of visual guide line in normal status.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Whether to smooth the visual guide line. It defaults to be unsmooth and can be set as true
or the values from 0 to 1 which indicating the smoothness.
The length of the second segment of visual guide line.
The length of the first segment of visual guide line.
Whether to show the visual guide ine in normal status.
Text label of pie chart, to explain some data information about graphic item like value, name and so on. label
is placed under itemStyle.normal
in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, label
is taken to be at the same level with itemStyle
, and has two status normal
and emphasis
as itemStyle
does.
The text style of labels.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
// percentage
percent: number,
}
The text style of labels.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
// percentage
percent: number,
}
The position of label.
Options:
'outside'
Outside of sectors of pie chart, which relates to corresponding sector through visual guide line.
'inside'
Inside the sectors of pie chart.
'inner'
is the same with 'inside'
.
'center'
In the center of pie chart. See pie-doughnut example
Whether to show sector when all data are zero.
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
Whether to show as Nightingale chart, which distinguishs data through radius. There are 2 optional modes:
'radius'
Use area to show the percentage of data, radius to show data size.'area'
All the sectors will share the same area, the data size is shown only through radiuses.The minimum angle of sector (0 ~ 360). It prevents some sector from being too small when value is small, which will affect user interaction.
The start angle, which range is [0, 360].
Whether the layout of sectors of pie chart is clockwise.
The offset distance of selected sector.
Selected mode of pie. It is enabled by default, and you may set it to be false
to disabled it.
Besides, it can be set to 'single'
or 'multiple'
, for single selection and multiple selection.
Whether to enable the zoom animation effects when hovering sectors.
Whether to enable highlighting chart when legend is being hovered.
Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption
.
bar chart
Bar chart shows different data through the height of a bar, which is used in rectangular coordinate with at least 1 category axis.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
z
value of all graghical elements in bar graph, which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in bar graph.
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
Used to mark an area in chart. For example, mark a time interval.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
The scope of the area is defined by data
, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:
Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 5
), or percent (e.g., the value is '35%'
).
Specify the coordinate in data coordinate system (i.e., cartesian) using
coord, which can be also set as 'min'
, 'max'
, 'average'
(e.g, coord: [23, 'min']
, or coord: ['average', 'max']
)。
series.data
using type, where valueIndex or valueDim can be used to specify the dimension on which the min, max or average are calculated.xAxis
or yAxis
to define a mark area based on only X or Y axis, see sample scatter-weightThe priority follows as above if more than one above definition used.
data: [
[
{
name: 'From average to max',
type: 'average'
},
{
type: 'max'
}
],
[
{
name: 'Mark area between two points in data coordiantes',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [
{
name: 'From 60 to 80',
yAxis: 60
},
{
yAxis: 80
}
], [
{
name: 'Mark area covers all data'
coord: ['min', 'min']
},
{
coord: ['max', 'max']
}
],
[
{
name: 'Mark area in two screen points',
x: 100,
y: 100
}, {
x: '90%',
y: '10%'
}
]
]
Specify the right-bottom point.
Label style of the item. Label style of start point and end point will be merged together.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Style of the item.
itemStyle
of start point and end point will be merged together.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
value of the item, not necessary.
y value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
x value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
The format is [start coordinate, end coordinate], where the coordinate system can be x
, y
on cartesian, or radius
, angle
on polar.
Specify the dimension on which min, max, average are calculated,
available when type used.
The value can be the name of the dimension (for example, the value can be x
, angle
in line chart, and open
, close
in candlestick).
Specify the dimension on which min, max, average are calculated,
available when type used.
The value can be 0
(means xAxis, radiusAxis) or 1
(means yAxis, angleAxis),
using the dimension of the first axis by default.
Specify this item is on min or max or average value.
Options:
'min'
max value。'max'
min value。'average'
average value。Specify the left-top point.
Label style of the item. Label style of start point and end point will be merged together.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Style of the item.
itemStyle
of start point and end point will be merged together.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
value of the item, not necessary.
y value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
x value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
The format is [start coordinate, end coordinate], where the coordinate system can be x
, y
on cartesian, or radius
, angle
on polar.
Specify the dimension on which min, max, average are calculated,
available when type used.
The value can be the name of the dimension (for example, the value can be x
, angle
in line chart, and open
, close
in candlestick).
Specify the dimension on which min, max, average are calculated,
available when type used.
The value can be 0
(means xAxis, radiusAxis) or 1
(means yAxis, angleAxis),
using the dimension of the first axis by default.
Specify this item is on min or max or average value.
Options:
'min'
max value。'max'
min value。'average'
average value。Style of the mark area.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Label in mark area.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Use a line in the chart to illustrate.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.
Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
Assign coordinate position with coord attribute, in which 'min'
, 'max'
, 'average'
are supported for each dimension.
Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.
You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning xAxis
or yAxis
. See scatter-weight for example.
When multiple attributes exist, priority is as the above order.
You may also set the type of mark line through type
, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through valueIndex
.
data: [
{
name: 'average line',
// 'average', 'min', and 'max' are supported
type: 'average'
},
{
name: 'Horizontal line with Y value at 100',
yAxis: 100
},
[
{
// Use the same name with starting and ending point
name: 'Minimum to Maximum',
type: 'min'
},
{
type: 'max'
}
],
[
{
name: 'Markline between two points',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [{
// Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.
yAxis: 'max',
x: '90%'
}, {
type: 'max'
}],
[
{
name: 'Mark line between two points',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]
Data of the ending point.
Label of this data item, which will be merged with label
of starting point and ending point.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Line style of this data item, which will be merged with lineStyle
of starting point and ending point.
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Offset of ending point 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.
Rotate degree of ending point symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
ending point 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 is10
.
Symbol of ending point.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Label value, which can be ignored.
Y position according to container, in pixel.
X position according to container, in pixel.
Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x
, and y
for rectangular coordinates, or radius
, and angle
for polar coordinates.
Notice: For axis with axis.type 'category'
:
number
, it represents index of axis.data.string
, it represents concrete value in axis.data. Please notice that in this case xAxis.data
must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.For example:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine is in the same way.
data: [{
coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.
// coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.
}]
}
}
}
Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x
, or angle
for line charts, or open
, or close
for candlestick charts.
Works only when 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.
Special label types, are used to label maximum value, minimum value and so on.
Options are:
'min'
maximum value.'max'
minimum value.'average'
average value.Data of the starting point.
Label of this data item, which will be merged with label
of starting point and ending point.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Line style of this data item, which will be merged with lineStyle
of starting point and ending point.
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Offset of starting point 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.
Rotate degree of starting point symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
starting point 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 is10
.
Symbol of starting point.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Label value, which can be ignored.
Y position according to container, in pixel.
X position according to container, in pixel.
Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x
, and y
for rectangular coordinates, or radius
, and angle
for polar coordinates.
Notice: For axis with axis.type 'category'
:
number
, it represents index of axis.data.string
, it represents concrete value in axis.data. Please notice that in this case xAxis.data
must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.For example:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine is in the same way.
data: [{
coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.
// coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.
}]
}
}
}
Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x
, or angle
for line charts, or open
, or close
for candlestick charts.
Works only when 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.
Special label types, are used to label maximum value, minimum value and so on.
Options are:
'min'
maximum value.'max'
minimum value.'average'
average value.Mark line style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Mark line text.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Precison of marking line value, which is useful when displaying average value mark line.
Symbol size at the two ends of the mark line. It can be an arrary for two ends, or assigned seperately.
Attention: You cannot assgin width and height seperately as normal symbolSize
.
Symbol type at the two ends of the mark line. It can be an arrary for two ends, or assigned seperately. See data.symbol for more format information.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Mark point in a chart.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
prefix
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Data array for mark points, each of which is an object. Here are some ways to assign mark point position.
Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
Assign coordinate position with coord attribute, in which 'min'
, 'max'
, 'average'
are supported for each dimension.
Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.
When multiple attributes exist, priority is as the above order.
For example:
data: [
{
name: 'maximum',
type: 'max'
},
{
name: 'coordinate',
coord: [10, 20]
}, {
name: 'fixed x position',
yAixs: 10,
x: '90%'
},
{
name: 'screen coordinate',
x: 100,
y: 100
}
]
Mark point style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Label of mark point.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Offset of 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.
Rotate degree of symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
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 is10
.
If size of symbols needs to be different, you can set with callback function in the following format:
(value: Array|number, params: Object) => number|Array
The first parameter value
is the value in data, and the second parameter params
is the rest parameters of data item.
Symbol of .
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Data array of series, which can be in the following forms:
When an axis of the coordinate is of category type, data can be in one dimension, whose length is equals to that of xAxis.data, and they are one-to-one matches. For example:
[12, 34, 56, 10, 23]
When both axes of the coordinate are of value type, every data item needs an array, and at least two values should represent x
and y
in rectangular coordinates, or radius
and angle
in polar coordinates. For example:
[[3.4, 4.5, 15], [4.2, 2.3, 20], [10.8, 9.5, 30], [7.2, 8.8, 18]]
Every data values from the third value can be used to present other data dimensions. With visualMap component, one or more dimensions can be assigned to map to color, size and other graphic attributes.
When both axes in the coordinate are of category type, every data item also needs to be one array. At least two values of a data item should represent category index or name of two axes. For example:
[[0, 0, 2], ['monday', 2, 1], [2, 1, 2], [3, 3, 5]]
Every data values from the third value can be used to present other data dimensions. With visualMap component, one or more dimensions can be assigned to map to color, size and other graphic attributes.
Example with two category axes can be found at Github Punchcard.
When a data item need to be custerized, data item can be an object, whose value
stands for data value, for example:
[
12, 34,
{
value : 56,
// user-defined label format that only useful for this data item
label: {},
// user-defined special itemStyle that only useful for this data item
itemStyle:{}
},
10, 23
]
Tip: When data of certain category does not exist (ps: not exist doesn't mean the value is 0), you may use -
to represent. When there is no data, it should be disconnected in line chart, and no symbols in the chart.
The bar gap between each category of bar, defaults to be 20%
of the category gap, can be set as a fixed value.
The gap between bars, defaults to be 30%
of the bar width, can be set as a fixed value like 20
.
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.
The maximum width of the bar. Adaptive when not specified.
The width of the bar. Adaptive when not specified.
Name of stack. On the same category axis, the series with the same stack
name would be put on top of each other.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
The bodrder width of bar. defaults to have no border.
The bodrder color of bar.
Bar color..
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
The radius of rounded corner of bar border. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses of the bar.
For example:
barBorderRadius: 5, // consistently set the size of 4 rounded corners
barBorderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)
The bodrder width of bar. defaults to have no border.
The bodrder color of bar.
Bar color. defaults to acquire colors from global palette option.color .
Text label of , to explain some data information about graphic item like value, name and so on. label
is placed under itemStyle.normal
in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, label
is taken to be at the same level with itemStyle
, and has two status normal
and emphasis
as itemStyle
does.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Index of y axis to combine with, which is useful for multiple y axes in one chart.
Index of x axis to combine with, which is useful for multiple x axes in one chart.
The coordinate used in the series, whose options are:
'cartesian2d'
Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with xAxisIndex and yAxisIndex to assign the corresponding axis component.
Whether to enable highlighting chart when legend is being hovered.
Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption
.
broken line chart
Broken line chart relates all the data points symbol by broken lines, which is used to show the trend of data changing. It could be used in both rectangular coordinate andpolar coordinate.
Tip: When areaStyle is set, area chart will be drew.
Tip: With visualMap component, Broken line / area chart can have different colors on different sections, as below:
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
z
value of all graghical elements in broken line graph, which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in broken line graph.
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
Used to mark an area in chart. For example, mark a time interval.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
The scope of the area is defined by data
, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:
Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 5
), or percent (e.g., the value is '35%'
).
Specify the coordinate in data coordinate system (i.e., cartesian) using
coord, which can be also set as 'min'
, 'max'
, 'average'
(e.g, coord: [23, 'min']
, or coord: ['average', 'max']
)。
series.data
using type, where valueIndex or valueDim can be used to specify the dimension on which the min, max or average are calculated.xAxis
or yAxis
to define a mark area based on only X or Y axis, see sample scatter-weightThe priority follows as above if more than one above definition used.
data: [
[
{
name: 'From average to max',
type: 'average'
},
{
type: 'max'
}
],
[
{
name: 'Mark area between two points in data coordiantes',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [
{
name: 'From 60 to 80',
yAxis: 60
},
{
yAxis: 80
}
], [
{
name: 'Mark area covers all data'
coord: ['min', 'min']
},
{
coord: ['max', 'max']
}
],
[
{
name: 'Mark area in two screen points',
x: 100,
y: 100
}, {
x: '90%',
y: '10%'
}
]
]
Specify the right-bottom point.
Label style of the item. Label style of start point and end point will be merged together.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Style of the item.
itemStyle
of start point and end point will be merged together.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
value of the item, not necessary.
y value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
x value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
The format is [start coordinate, end coordinate], where the coordinate system can be x
, y
on cartesian, or radius
, angle
on polar.
Specify the dimension on which min, max, average are calculated,
available when type used.
The value can be the name of the dimension (for example, the value can be x
, angle
in line chart, and open
, close
in candlestick).
Specify the dimension on which min, max, average are calculated,
available when type used.
The value can be 0
(means xAxis, radiusAxis) or 1
(means yAxis, angleAxis),
using the dimension of the first axis by default.
Specify this item is on min or max or average value.
Options:
'min'
max value。'max'
min value。'average'
average value。Specify the left-top point.
Label style of the item. Label style of start point and end point will be merged together.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Style of the item.
itemStyle
of start point and end point will be merged together.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
value of the item, not necessary.
y value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
x value on screen coordinate system, can be pixel number (like 5
), or percent value (like '20%'
).
The format is [start coordinate, end coordinate], where the coordinate system can be x
, y
on cartesian, or radius
, angle
on polar.
Specify the dimension on which min, max, average are calculated,
available when type used.
The value can be the name of the dimension (for example, the value can be x
, angle
in line chart, and open
, close
in candlestick).
Specify the dimension on which min, max, average are calculated,
available when type used.
The value can be 0
(means xAxis, radiusAxis) or 1
(means yAxis, angleAxis),
using the dimension of the first axis by default.
Specify this item is on min or max or average value.
Options:
'min'
max value。'max'
min value。'average'
average value。Style of the mark area.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Label in mark area.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Use a line in the chart to illustrate.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.
Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
Assign coordinate position with coord attribute, in which 'min'
, 'max'
, 'average'
are supported for each dimension.
Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.
You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning xAxis
or yAxis
. See scatter-weight for example.
When multiple attributes exist, priority is as the above order.
You may also set the type of mark line through type
, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through valueIndex
.
data: [
{
name: 'average line',
// 'average', 'min', and 'max' are supported
type: 'average'
},
{
name: 'Horizontal line with Y value at 100',
yAxis: 100
},
[
{
// Use the same name with starting and ending point
name: 'Minimum to Maximum',
type: 'min'
},
{
type: 'max'
}
],
[
{
name: 'Markline between two points',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [{
// Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.
yAxis: 'max',
x: '90%'
}, {
type: 'max'
}],
[
{
name: 'Mark line between two points',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]
Data of the ending point.
Label of this data item, which will be merged with label
of starting point and ending point.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Line style of this data item, which will be merged with lineStyle
of starting point and ending point.
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Offset of ending point 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.
Rotate degree of ending point symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
ending point 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 is10
.
Symbol of ending point.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Label value, which can be ignored.
Y position according to container, in pixel.
X position according to container, in pixel.
Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x
, and y
for rectangular coordinates, or radius
, and angle
for polar coordinates.
Notice: For axis with axis.type 'category'
:
number
, it represents index of axis.data.string
, it represents concrete value in axis.data. Please notice that in this case xAxis.data
must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.For example:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine is in the same way.
data: [{
coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.
// coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.
}]
}
}
}
Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x
, or angle
for line charts, or open
, or close
for candlestick charts.
Works only when 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.
Special label types, are used to label maximum value, minimum value and so on.
Options are:
'min'
maximum value.'max'
minimum value.'average'
average value.Data of the starting point.
Label of this data item, which will be merged with label
of starting point and ending point.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Line style of this data item, which will be merged with lineStyle
of starting point and ending point.
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Offset of starting point 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.
Rotate degree of starting point symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
starting point 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 is10
.
Symbol of starting point.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Label value, which can be ignored.
Y position according to container, in pixel.
X position according to container, in pixel.
Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x
, and y
for rectangular coordinates, or radius
, and angle
for polar coordinates.
Notice: For axis with axis.type 'category'
:
number
, it represents index of axis.data.string
, it represents concrete value in axis.data. Please notice that in this case xAxis.data
must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.For example:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine is in the same way.
data: [{
coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.
// coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.
}]
}
}
}
Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x
, or angle
for line charts, or open
, or close
for candlestick charts.
Works only when 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.
Special label types, are used to label maximum value, minimum value and so on.
Options are:
'min'
maximum value.'max'
minimum value.'average'
average value.Mark line style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Mark line text.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Template variables includes {a}
, {b}
, {c}
, {d}
, representing series name, data name, data value, and percent respectively.
example:
formatter: '{b}: {d}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Positions of labels can be:
'start'
starting point of the line.'middle'
middle point of the line.'end'
ending point of the line.Whether show label or not.
Precison of marking line value, which is useful when displaying average value mark line.
Symbol size at the two ends of the mark line. It can be an arrary for two ends, or assigned seperately.
Attention: You cannot assgin width and height seperately as normal symbolSize
.
Symbol type at the two ends of the mark line. It can be an arrary for two ends, or assigned seperately. See data.symbol for more format information.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Mark point in a chart.
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
prefix
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
Data array for mark points, each of which is an object. Here are some ways to assign mark point position.
Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
Assign coordinate position with coord attribute, in which 'min'
, 'max'
, 'average'
are supported for each dimension.
Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.
When multiple attributes exist, priority is as the above order.
For example:
data: [
{
name: 'maximum',
type: 'max'
},
{
name: 'coordinate',
coord: [10, 20]
}, {
name: 'fixed x position',
yAixs: 10,
x: '90%'
},
{
name: 'screen coordinate',
x: 100,
y: 100
}
]
Mark point style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Label of mark point.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Offset of 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.
Rotate degree of symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
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 is10
.
If size of symbols needs to be different, you can set with callback function in the following format:
(value: Array|number, params: Object) => number|Array
The first parameter value
is the value in data, and the second parameter params
is the rest parameters of data item.
Symbol of .
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Data array of series, which can be in the following forms:
When an axis of the coordinate is of category type, data can be in one dimension, whose length is equals to that of xAxis.data, and they are one-to-one matches. For example:
[12, 34, 56, 10, 23]
When both axes of the coordinate are of value type, every data item needs an array, and at least two values should represent x
and y
in rectangular coordinates, or radius
and angle
in polar coordinates. For example:
[[3.4, 4.5, 15], [4.2, 2.3, 20], [10.8, 9.5, 30], [7.2, 8.8, 18]]
Every data values from the third value can be used to present other data dimensions. With visualMap component, one or more dimensions can be assigned to map to color, size and other graphic attributes.
When both axes in the coordinate are of category type, every data item also needs to be one array. At least two values of a data item should represent category index or name of two axes. For example:
[[0, 0, 2], ['monday', 2, 1], [2, 1, 2], [3, 3, 5]]
Every data values from the third value can be used to present other data dimensions. With visualMap component, one or more dimensions can be assigned to map to color, size and other graphic attributes.
Example with two category axes can be found at Github Punchcard.
When a data item need to be custerized, data item can be an object, whose value
stands for data value, for example:
[
12, 34,
{
value : 56,
// user-defined label format that only useful for this data item
label: {},
// user-defined special itemStyle that only useful for this data item
itemStyle:{}
},
10, 23
]
Tip: When data of certain category does not exist (ps: not exist doesn't mean the value is 0), you may use -
to represent. When there is no data, it should be disconnected in line chart, and no symbols in the chart.
The dowmsampling strategy used when the data size is much larger than pixel size. It will improve the performance when turned on. Defaults to be turned off, indicating that all the data points will be drawn.
Options:
'average'
Use average value of filter points'max'
Use maximum value of filter points'min'
Use minimum value of filter points'sum'
Use sum of filter pointsWhether the broken line keep the monotonicity when it is smoothed. It can be set as 'x'
, 'y'
to keep the monotonicity on x axis or y axis.
It is usually used on dual value axis.
Here are 2 examples of broken line chart with dual value axis, showing the differences when smoothMonotone
is without any setting, and smoothMonotone
is set as 'x'
.
smoothMonotone
:'x'
:Whether to show as smooth curve.
The style of area.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Fill color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Fill color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Line style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
The style of the symbol point of broken line.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color. Color is taken from option.color Palette 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'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Supports callback functions, in the form of:
(params: Object) => Color
Input parameters are seriesIndex
, dataIndex
, data
, value
, and etc. of data item.
Text label of , to explain some data information about graphic item like value, name and so on. label
is placed under itemStyle.normal
in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, label
is taken to be at the same level with itemStyle
, and has two status normal
and emphasis
as itemStyle
does.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Label font style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Data label formatter, which supoports string template and callback function. In either form, \n
is supported to represent a new line.
String template
Model variation includes {a}
, {b}
, {c}
, representing series name, date name, data value respectively.
example:
formatter: '{b}: {c}'
Callback function
Callback function is in form of:
(params: Object|Array) => string
where params
is the single dataset needed by formatter, which is formed as:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
}
Label position.
Followings are the options:
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values
position: [10, 10],
// Relative percentage
position: ['50%', '50%']
'top'
Whether to show label.
Whether to show as a step line. It can be true
, false
. Or 'start'
, 'middle'
, 'end'
. Which will configure the turn point of step line.
See the example using different step
options:
Whether to connect the line across null points.
Whether to clip the overflowing part, which defaults to clip.
If stack the value. On the same category axis, the series with the same stack
name would be put on top of each other.
The effect of the below example could be seen through stack switching of toolbox on the top right corner:
Whether to enable highlighting chart when legend is being hovered.
Whether to enable the animation effect when mouse is on the symbol.
Symbols are shown when label of main axis is shown. Which means it has same interval strategy with axisLabel.interval.
If you want to show them all, set this property as true
.
Whether to show symbol. It would be shown during tooltip hover.
Offset of 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.
Rotate degree of symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
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 is10
.
If size of symbols needs to be different, you can set with callback function in the following format:
(value: Array|number, params: Object) => number|Array
The first parameter value
is the value in data, and the second parameter params
is the rest parameters of data item.
Symbol of .
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Index of polar coordinate to combine with, which is useful for multiple polar axes in one chart.
Index of y axis to combine with, which is useful for multiple y axes in one chart.
Index of x axis to combine with, which is useful for multiple x axes in one chart.
The coordinate used in the series, whose options are:
'cartesian2d'
Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with xAxisIndex and yAxisIndex to assign the corresponding axis component.
'polar'
Use polar coordinates, with polarIndex to assign the corresponding polar coordinate component.
Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption
.
graphic
component enable creating graphic elements in echarts.
Those graphic type are supported.
image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
下面示例中,使用图形元素做了水印,和文本块:
This example shows how to make a watermark and text block:
This example use hidden graphic elements to implement dragging:
Graphic Component Configuration
A simple way to define a graphic element:
myChart.setOption({
...,
graphic: {
type: 'image',
...
}
});
Define multiple graphic elements:
myChart.setOption({
...,
graphic: [
{ // A 'image' element.
type: 'image',
...
},
{ // A 'text' element, with id specified.
type: 'text',
id: 'text1',
...
},
{ // A 'group' element, in which children can be defined.
type: 'group',
children: [
{
type: 'rect',
id: 'rect1',
...
},
{
type: 'image',
...
},
...
]
}
...
]
});
How to remove or replace existing elements by setOption
:
myChart.setOption({
...,
graphic: [
{ // Remove the element 'text1' defined above.
id: 'text1',
$action: 'remove',
...
},
{ // Replace the element 'rect1' to a new circle element.
// Note, although in the sample above 'rect1' is a children of a group,
// it is not necessary to consider level relationship when setOption
// again if you use id to specify them.
id: 'rect1',
$action: 'replace',
type: 'circle',
...
}
]
});
Notice, when using setOption
to modify existing elements, if id is not specified, new options will be mapped to exsiting elements by their order, which might bring unexpected result sometimes. So, generally, using id is recommended.
Graphic Element Configuration
介绍每个图形元素的配置。不同类型的图形元素的设置有这些共性:
Different types of graphic elements has their own configuration respectively, but they have these common configuration below:
{
// id is used to specifying element when willing to update it.
// id can be ignored if you do not need it.
id: 'xxx',
// Specify element type. Can not be ignored when define a element at the first time.
type: 'image',
// All of the properties below can be ignored and a default value will be assigned.
// Specify the operation should be performed to the element when calling `setOption`.
// Default value is 'merge', other values can be 'replace' or 'remove'.
$action: 'replace',
// These four properties is used to locating the element. Each property can be absolute
// value (like 10, means 10 pixel) or precent (like '12%') or 'center'/'middle'.
left: 10,
// right: 10,
top: 'center',
// bottom: '10%',
shape: {
// Here are configurations for shape, like `x`, `y`, `cx`, `cy`, `width`,
// `height`, `r`, `points`, ...
// Note, if `left`/`right`/`top`/`bottom` has been set, `x`/`y`/`cx`/`cy`
// do not work here.
},
style: {
// Here are configurations for style of the element, like `fill`, `stroke`,
// `lineWidth`, `shadowBlur`, ...
},
// z value of the elements.
z: 10,
// Whether response to mouse events / touch events.
silent: true,
// Whether the element is visible.
invisible: false,
// Used to specify whether the entire transformed element (containing children if is group)
// is confined in its container. Optional values: 'raw', 'all'.
bounding: 'raw',
// Can be dragged or not.
draggable: false,
// Event handler, can also be onmousemove, ondrag, ... (listed below)
onclick: function () {...}
}
Event Handlers of Graphic Element
These events are supported:
onclick
, onmouseover
, onmouseout
, onmousemove
, onmousewheel
, onmousedown
, onmouseup
, ondrag
, ondragstart
, ondragend
, ondragenter
, ondragleave
, ondragover
, ondrop
.
Hierarchy of Graphic Elements
Only group
element has children, which enable a group of elements to be positioned and transformed together.
Shape Configuration of Graphic Element
Elements with different types have different shape setting repectively. For example:
{
type: 'rect',
shape: {
x: 10,
y: 10,
width: 100,
height: 200
}
},
{
type: 'circle',
shape: {
cx: 20,
cy: 30,
r: 100
}
},
{
type: 'image',
style: {
image: 'http://xxx.xxx.xxx/a.png',
x: 100,
y: 200,
width: 230,
height: 400
}
},
{
type: 'text',
style: {
text: 'This text',
x: 100,
y: 200
}
}
Transforming and Absolutely Positioning of Graphic Element
Element can be transformed (translation, rotation, scale). For example:
{
type: 'rect', // or any other types.
// Translation, using [0, 0] by default.
position: [100, 200],
// Scale, using [1, 1] by default.
scale: [2, 4],
// Rotation, using 0 by default. Negative value means rotating clockwise.
rotation: Math.PI / 4,
// Origin point of rotation and scale, using [0, 0] by default.
origin: [10, 20],
shape: {
// ...
}
}
Each element is transformed in the coordinate system of its parent, namely, transform of a element and its parent can be "stacked".
Transformation is performed by this order:
Relatively Positioning
In real application, size of a container is always not fixed. So mechanism of relative position is required. In graphic
component, left / right / top / bottom / width / height are used to position element relatively.
For example:
{ // Position the image at the bottom center of its container.
type: 'image',
left: 'center', // Position at the center horizontally.
bottom: '10%', // Position beyond the bottom boundary 10%.
style: {
image: 'http://xxx.xxx.xxx/a.png',
width: 45,
height: 45
}
},
{ // Position the entire rotated group at the right-bottom corner of its container.
type: 'group',
right: 0, // Position at the right boundary.
bottom: 0, // Position at the bottom boundary.
rotation: Math.PI / 4,
children: [
{
type: 'rect',
left: 'center', // Position at horizontal center according to its parent.
top: 'middle', // Position at vertical center according to its parent.
shape: {
width: 190,
height: 90
},
style: {
fill: '#fff',
stroke: '#999',
lineWidth: 2,
shadowBlur: 8,
shadowOffsetX: 3,
shadowOffsetY: 3,
shadowColor: 'rgba(0,0,0,0.3)'
}
},
{
type: 'text',
left: 'center', // Position at horizontal center according to its parent.
top: 'middle', // Position at vertical center according to its parent.
style: {
fill: '#777',
text: [
'This is text',
'This is text',
'Print some text'
].join('\n'),
font: '14px Microsoft YaHei'
}
}
]
}
Note, bounding can be used to specify whether the entire transformed element (containing children if is group) is confined in its container.
Detailed configurations are listed as follows.
A list of all graphic elements.
Note, the standard configuration of graphic component is:
{
graphic: {
elements: [
{type: 'rect', ...}, {type: 'circle', ...}, ...
]
}
}
But we always use short patterns for convenience:
{
graphic: { // Declare only one graphic element.
type: 'rect',
...
}
}
Or:
{
graphic: [ // Declare multiple graphic elements.
{type: 'rect', ...}, {type: 'circle', ...}, ...
]
}
Quadratic bezier curve or cubic bezier curve.
color of shadow.
Y offset of shadow.
X offset of shadow.
Width of shadow.
Width of stroke.
Color of stroke.
Color filled in this element.
Specify the percentage of drawing, useful in animation.
Value range: [0, 1].
y of the second control point. If specified, cubic bezier is used.
If both cpx2
and cpy2
are not set, quatratic bezier is used.
x of the second control point. If specified, cubic bezier is used.
If both cpx2
and cpy2
are not set, quatratic bezier is used.
y of control point.
x of control point.
y value of the end point.
x value of the end point.
y value of the start point.
x value of the start point.
Whether use progressive render to improve performance. Usually used when number of element is too large.
Can be dragged or not.
The mouse style when mouse hover on this element, the same as cursor
property in CSS
.
Whether the element is visible.
Whether response to mouse events / touch events.
Determine which canvas layer this element should be in.
Notice: Multiple canvas layer may affect performance.
z value of the elements, determine the overlap order.
Used to specify whether the entire transformed element (containing children if is group) is confined in its container.
See sample:
Optional values:
'all'
: (default)
Use the transformed bounding box of itself and its descentants to perform position calculation, which confine the entire body in the boundary of its parent.
'raw'
:
Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the width of its parent.'middle'
: means position the element in the middle of according to its parent.Only one between top and bottom can work.
If top or bottom is specified, positioning attributes in shape (like y
, cy
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the width of its parent.'middle'
: means position the element in the middle of according to its parent.Only one between top and bottom can work.
If top or bottom is specified, positioning attributes in shape (like y
, cy
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the height of its parent.'center'
: means position the element in the middle of according to its parent.Only one between left and right can work.
If left or right is specified, positioning attributes in shape (like x
, cx
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the height of its parent.'center'
: means position the element in the middle of according to its parent.Only one between left and right can work.
If left or right is specified, positioning attributes in shape (like x
, cx
) will not work.
Specify the operation should be performed to the element when calling setOption
.
Default value is 'merge', other values can be 'replace' or 'remove'.
Optional values:
'merge'
: merge the given option to existing element (if any), otherwise create a new elemnt.'replace'
: create a new element accordint to the given option and replace the existing element (if any).'remove'
: delete the existing element (if any).id is used to specifying element when willing to update it. id can be ignored if you do not need it.
Must be specified when define a graphic element at the first time.
Optional values:
image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
Line element.
color of shadow.
Y offset of shadow.
X offset of shadow.
Width of shadow.
Width of stroke.
Color of stroke.
Color filled in this element.
Specify the percentage of drawing, useful in animation.
Value range: [0, 1].
y value of the end point.
x value of the end point.
y value of the start point.
x value of the start point.
Whether use progressive render to improve performance. Usually used when number of element is too large.
Can be dragged or not.
The mouse style when mouse hover on this element, the same as cursor
property in CSS
.
Whether the element is visible.
Whether response to mouse events / touch events.
Determine which canvas layer this element should be in.
Notice: Multiple canvas layer may affect performance.
z value of the elements, determine the overlap order.
Used to specify whether the entire transformed element (containing children if is group) is confined in its container.
See sample:
Optional values:
'all'
: (default)
Use the transformed bounding box of itself and its descentants to perform position calculation, which confine the entire body in the boundary of its parent.
'raw'
:
Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the width of its parent.'middle'
: means position the element in the middle of according to its parent.Only one between top and bottom can work.
If top or bottom is specified, positioning attributes in shape (like y
, cy
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the width of its parent.'middle'
: means position the element in the middle of according to its parent.Only one between top and bottom can work.
If top or bottom is specified, positioning attributes in shape (like y
, cy
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the height of its parent.'center'
: means position the element in the middle of according to its parent.Only one between left and right can work.
If left or right is specified, positioning attributes in shape (like x
, cx
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the height of its parent.'center'
: means position the element in the middle of according to its parent.Only one between left and right can work.
If left or right is specified, positioning attributes in shape (like x
, cx
) will not work.
Specify the operation should be performed to the element when calling setOption
.
Default value is 'merge', other values can be 'replace' or 'remove'.
Optional values:
'merge'
: merge the given option to existing element (if any), otherwise create a new elemnt.'replace'
: create a new element accordint to the given option and replace the existing element (if any).'remove'
: delete the existing element (if any).id is used to specifying element when willing to update it. id can be ignored if you do not need it.
Must be specified when define a graphic element at the first time.
Optional values:
image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
Polyline element.
color of shadow.
Y offset of shadow.
X offset of shadow.
Width of shadow.
Width of stroke.
Color of stroke.
Color filled in this element.
Whether prevent the smooth process cause the line out of the bounding box.
Only works when smooth
is number
(bezier smooth).
Whether smooth the line.
[0, 1]
.'spline'
, Catmull-Rom spline interpolation is used.A list of points, which defines the shape, like [[22, 44], [44, 55], [11, 44], ...]
.
Whether use progressive render to improve performance. Usually used when number of element is too large.
Can be dragged or not.
The mouse style when mouse hover on this element, the same as cursor
property in CSS
.
Whether the element is visible.
Whether response to mouse events / touch events.
Determine which canvas layer this element should be in.
Notice: Multiple canvas layer may affect performance.
z value of the elements, determine the overlap order.
Used to specify whether the entire transformed element (containing children if is group) is confined in its container.
See sample:
Optional values:
'all'
: (default)
Use the transformed bounding box of itself and its descentants to perform position calculation, which confine the entire body in the boundary of its parent.
'raw'
:
Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the width of its parent.'middle'
: means position the element in the middle of according to its parent.Only one between top and bottom can work.
If top or bottom is specified, positioning attributes in shape (like y
, cy
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the width of its parent.'middle'
: means position the element in the middle of according to its parent.Only one between top and bottom can work.
If top or bottom is specified, positioning attributes in shape (like y
, cy
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the height of its parent.'center'
: means position the element in the middle of according to its parent.Only one between left and right can work.
If left or right is specified, positioning attributes in shape (like x
, cx
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the height of its parent.'center'
: means position the element in the middle of according to its parent.Only one between left and right can work.
If left or right is specified, positioning attributes in shape (like x
, cx
) will not work.
Specify the operation should be performed to the element when calling setOption
.
Default value is 'merge', other values can be 'replace' or 'remove'.
Optional values:
'merge'
: merge the given option to existing element (if any), otherwise create a new elemnt.'replace'
: create a new element accordint to the given option and replace the existing element (if any).'remove'
: delete the existing element (if any).id is used to specifying element when willing to update it. id can be ignored if you do not need it.
Must be specified when define a graphic element at the first time.
Optional values:
image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
Polygon element.
color of shadow.
Y offset of shadow.
X offset of shadow.
Width of shadow.
Width of stroke.
Color of stroke.
Color filled in this element.
Whether prevent the smooth process cause the line out of the bounding box.
Only works when smooth
is number
(bezier smooth).
Whether smooth the line.
[0, 1]
.'spline'
, Catmull-Rom spline interpolation is used.A list of points, which defines the shape, like [[22, 44], [44, 55], [11, 44], ...]
.
Whether use progressive render to improve performance. Usually used when number of element is too large.
Can be dragged or not.
The mouse style when mouse hover on this element, the same as cursor
property in CSS
.
Whether the element is visible.
Whether response to mouse events / touch events.
Determine which canvas layer this element should be in.
Notice: Multiple canvas layer may affect performance.
z value of the elements, determine the overlap order.
Used to specify whether the entire transformed element (containing children if is group) is confined in its container.
See sample:
Optional values:
'all'
: (default)
Use the transformed bounding box of itself and its descentants to perform position calculation, which confine the entire body in the boundary of its parent.
'raw'
:
Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the width of its parent.'middle'
: means position the element in the middle of according to its parent.Only one between top and bottom can work.
If top or bottom is specified, positioning attributes in shape (like y
, cy
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the width of its parent.'middle'
: means position the element in the middle of according to its parent.Only one between top and bottom can work.
If top or bottom is specified, positioning attributes in shape (like y
, cy
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the height of its parent.'center'
: means position the element in the middle of according to its parent.Only one between left and right can work.
If left or right is specified, positioning attributes in shape (like x
, cx
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the height of its parent.'center'
: means position the element in the middle of according to its parent.Only one between left and right can work.
If left or right is specified, positioning attributes in shape (like x
, cx
) will not work.
Specify the operation should be performed to the element when calling setOption
.
Default value is 'merge', other values can be 'replace' or 'remove'.
Optional values:
'merge'
: merge the given option to existing element (if any), otherwise create a new elemnt.'replace'
: create a new element accordint to the given option and replace the existing element (if any).'remove'
: delete the existing element (if any).id is used to specifying element when willing to update it. id can be ignored if you do not need it.
Must be specified when define a graphic element at the first time.
Optional values:
image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
Arc element.
color of shadow.
Y offset of shadow.
X offset of shadow.
Width of shadow.
Width of stroke.
Color of stroke.
Color filled in this element.
Whether draw clockwise.
end anble, in radian.
start angle, in radian.
Inside radius.
Outside radius.
The y value of the center of the element in the coordinate system of its parent.
The x value of the center of the element in the coordinate system of its parent.
Whether use progressive render to improve performance. Usually used when number of element is too large.
Can be dragged or not.
The mouse style when mouse hover on this element, the same as cursor
property in CSS
.
Whether the element is visible.
Whether response to mouse events / touch events.
Determine which canvas layer this element should be in.
Notice: Multiple canvas layer may affect performance.
z value of the elements, determine the overlap order.
Used to specify whether the entire transformed element (containing children if is group) is confined in its container.
See sample:
Optional values:
'all'
: (default)
Use the transformed bounding box of itself and its descentants to perform position calculation, which confine the entire body in the boundary of its parent.
'raw'
:
Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the width of its parent.'middle'
: means position the element in the middle of according to its parent.Only one between top and bottom can work.
If top or bottom is specified, positioning attributes in shape (like y
, cy
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the width of its parent.'middle'
: means position the element in the middle of according to its parent.Only one between top and bottom can work.
If top or bottom is specified, positioning attributes in shape (like y
, cy
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the height of its parent.'center'
: means position the element in the middle of according to its parent.Only one between left and right can work.
If left or right is specified, positioning attributes in shape (like x
, cx
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the height of its parent.'center'
: means position the element in the middle of according to its parent.Only one between left and right can work.
If left or right is specified, positioning attributes in shape (like x
, cx
) will not work.
Specify the operation should be performed to the element when calling setOption
.
Default value is 'merge', other values can be 'replace' or 'remove'.
Optional values:
'merge'
: merge the given option to existing element (if any), otherwise create a new elemnt.'replace'
: create a new element accordint to the given option and replace the existing element (if any).'remove'
: delete the existing element (if any).id is used to specifying element when willing to update it. id can be ignored if you do not need it.
Must be specified when define a graphic element at the first time.
Optional values:
image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
Sector element.
color of shadow.
Y offset of shadow.
X offset of shadow.
Width of shadow.
Width of stroke.
Color of stroke.
Color filled in this element.
Whether draw clockwise.
end anble, in radian.
start angle, in radian.
Inside radius.
Outside radius.
The y value of the center of the element in the coordinate system of its parent.
The x value of the center of the element in the coordinate system of its parent.
Whether use progressive render to improve performance. Usually used when number of element is too large.
Can be dragged or not.
The mouse style when mouse hover on this element, the same as cursor
property in CSS
.
Whether the element is visible.
Whether response to mouse events / touch events.
Determine which canvas layer this element should be in.
Notice: Multiple canvas layer may affect performance.
z value of the elements, determine the overlap order.
Used to specify whether the entire transformed element (containing children if is group) is confined in its container.
See sample:
Optional values:
'all'
: (default)
Use the transformed bounding box of itself and its descentants to perform position calculation, which confine the entire body in the boundary of its parent.
'raw'
:
Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the width of its parent.'middle'
: means position the element in the middle of according to its parent.Only one between top and bottom can work.
If top or bottom is specified, positioning attributes in shape (like y
, cy
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the width of its parent.'middle'
: means position the element in the middle of according to its parent.Only one between top and bottom can work.
If top or bottom is specified, positioning attributes in shape (like y
, cy
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the height of its parent.'center'
: means position the element in the middle of according to its parent.Only one between left and right can work.
If left or right is specified, positioning attributes in shape (like x
, cx
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the height of its parent.'center'
: means position the element in the middle of according to its parent.Only one between left and right can work.
If left or right is specified, positioning attributes in shape (like x
, cx
) will not work.
Specify the operation should be performed to the element when calling setOption
.
Default value is 'merge', other values can be 'replace' or 'remove'.
Optional values:
'merge'
: merge the given option to existing element (if any), otherwise create a new elemnt.'replace'
: create a new element accordint to the given option and replace the existing element (if any).'remove'
: delete the existing element (if any).id is used to specifying element when willing to update it. id can be ignored if you do not need it.
Must be specified when define a graphic element at the first time.
Optional values:
image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
Ring element.
color of shadow.
Y offset of shadow.
X offset of shadow.
Width of shadow.
Width of stroke.
Color of stroke.
Color filled in this element.
Inside radius.
Outside radius.
The y value of the center of the element in the coordinate system of its parent.
The x value of the center of the element in the coordinate system of its parent.
Whether use progressive render to improve performance. Usually used when number of element is too large.
Can be dragged or not.
The mouse style when mouse hover on this element, the same as cursor
property in CSS
.
Whether the element is visible.
Whether response to mouse events / touch events.
Determine which canvas layer this element should be in.
Notice: Multiple canvas layer may affect performance.
z value of the elements, determine the overlap order.
Used to specify whether the entire transformed element (containing children if is group) is confined in its container.
See sample:
Optional values:
'all'
: (default)
Use the transformed bounding box of itself and its descentants to perform position calculation, which confine the entire body in the boundary of its parent.
'raw'
:
Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the width of its parent.'middle'
: means position the element in the middle of according to its parent.Only one between top and bottom can work.
If top or bottom is specified, positioning attributes in shape (like y
, cy
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the width of its parent.'middle'
: means position the element in the middle of according to its parent.Only one between top and bottom can work.
If top or bottom is specified, positioning attributes in shape (like y
, cy
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the height of its parent.'center'
: means position the element in the middle of according to its parent.Only one between left and right can work.
If left or right is specified, positioning attributes in shape (like x
, cx
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the height of its parent.'center'
: means position the element in the middle of according to its parent.Only one between left and right can work.
If left or right is specified, positioning attributes in shape (like x
, cx
) will not work.
Specify the operation should be performed to the element when calling setOption
.
Default value is 'merge', other values can be 'replace' or 'remove'.
Optional values:
'merge'
: merge the given option to existing element (if any), otherwise create a new elemnt.'replace'
: create a new element accordint to the given option and replace the existing element (if any).'remove'
: delete the existing element (if any).id is used to specifying element when willing to update it. id can be ignored if you do not need it.
Must be specified when define a graphic element at the first time.
Optional values:
image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
Circle element.
color of shadow.
Y offset of shadow.
X offset of shadow.
Width of shadow.
Width of stroke.
Color of stroke.
Color filled in this element.
Outside radius.
The y value of the center of the element in the coordinate system of its parent.
The x value of the center of the element in the coordinate system of its parent.
Whether use progressive render to improve performance. Usually used when number of element is too large.
Can be dragged or not.
The mouse style when mouse hover on this element, the same as cursor
property in CSS
.
Whether the element is visible.
Whether response to mouse events / touch events.
Determine which canvas layer this element should be in.
Notice: Multiple canvas layer may affect performance.
z value of the elements, determine the overlap order.
Used to specify whether the entire transformed element (containing children if is group) is confined in its container.
See sample:
Optional values:
'all'
: (default)
Use the transformed bounding box of itself and its descentants to perform position calculation, which confine the entire body in the boundary of its parent.
'raw'
:
Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the width of its parent.'middle'
: means position the element in the middle of according to its parent.Only one between top and bottom can work.
If top or bottom is specified, positioning attributes in shape (like y
, cy
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the width of its parent.'middle'
: means position the element in the middle of according to its parent.Only one between top and bottom can work.
If top or bottom is specified, positioning attributes in shape (like y
, cy
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the height of its parent.'center'
: means position the element in the middle of according to its parent.Only one between left and right can work.
If left or right is specified, positioning attributes in shape (like x
, cx
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the height of its parent.'center'
: means position the element in the middle of according to its parent.Only one between left and right can work.
If left or right is specified, positioning attributes in shape (like x
, cx
) will not work.
Specify the operation should be performed to the element when calling setOption
.
Default value is 'merge', other values can be 'replace' or 'remove'.
Optional values:
'merge'
: merge the given option to existing element (if any), otherwise create a new elemnt.'replace'
: create a new element accordint to the given option and replace the existing element (if any).'remove'
: delete the existing element (if any).id is used to specifying element when willing to update it. id can be ignored if you do not need it.
Must be specified when define a graphic element at the first time.
Optional values:
image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
Rectangle element.
color of shadow.
Y offset of shadow.
X offset of shadow.
Width of shadow.
Width of stroke.
Color of stroke.
Color filled in this element.
The height of the shape of the element.
The width of the shape of the element.
The y value of the left-top corner of the element in the coordinate system of its parent.
The x value of the left-top corner of the element in the coordinate system of its parent.
Whether use progressive render to improve performance. Usually used when number of element is too large.
Can be dragged or not.
The mouse style when mouse hover on this element, the same as cursor
property in CSS
.
Whether the element is visible.
Whether response to mouse events / touch events.
Determine which canvas layer this element should be in.
Notice: Multiple canvas layer may affect performance.
z value of the elements, determine the overlap order.
Used to specify whether the entire transformed element (containing children if is group) is confined in its container.
See sample:
Optional values:
'all'
: (default)
Use the transformed bounding box of itself and its descentants to perform position calculation, which confine the entire body in the boundary of its parent.
'raw'
:
Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the width of its parent.'middle'
: means position the element in the middle of according to its parent.Only one between top and bottom can work.
If top or bottom is specified, positioning attributes in shape (like y
, cy
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the width of its parent.'middle'
: means position the element in the middle of according to its parent.Only one between top and bottom can work.
If top or bottom is specified, positioning attributes in shape (like y
, cy
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the height of its parent.'center'
: means position the element in the middle of according to its parent.Only one between left and right can work.
If left or right is specified, positioning attributes in shape (like x
, cx
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the height of its parent.'center'
: means position the element in the middle of according to its parent.Only one between left and right can work.
If left or right is specified, positioning attributes in shape (like x
, cx
) will not work.
Specify the operation should be performed to the element when calling setOption
.
Default value is 'merge', other values can be 'replace' or 'remove'.
Optional values:
'merge'
: merge the given option to existing element (if any), otherwise create a new elemnt.'replace'
: create a new element accordint to the given option and replace the existing element (if any).'remove'
: delete the existing element (if any).id is used to specifying element when willing to update it. id can be ignored if you do not need it.
Must be specified when define a graphic element at the first time.
Optional values:
image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
Text block.
color of shadow.
Y offset of shadow.
X offset of shadow.
Width of shadow.
Width of stroke.
Color of stroke.
Color filled in this element.
Text vertical alignment. Optional values: 'top'
, 'middle'
, 'bottom'
.
Text horizontal alignment. Optional values: 'left'
, 'center'
, 'right'
.
'left'
means the left side of the text block is specified by the style.x, while 'right'
means the right side of the text block is specified by style.y.
Font size, font type, font weight, font color, follow the form of css font.
For example:
// size | family
font: '2em "STHeiti", sans-serif'
// style | weight | size | family
font: 'italic bolder 16px cursive'
// weight | size | family
font: 'bolder 2em "Microsoft YaHei", sans-serif'
The y value of the left-top corner of the element in the coordinate system of its parent.
The x value of the left-top corner of the element in the coordinate system of its parent.
Text content. \n
can be used as a line break.
Whether use progressive render to improve performance. Usually used when number of element is too large.
Can be dragged or not.
The mouse style when mouse hover on this element, the same as cursor
property in CSS
.
Whether the element is visible.
Whether response to mouse events / touch events.
Determine which canvas layer this element should be in.
Notice: Multiple canvas layer may affect performance.
z value of the elements, determine the overlap order.
Used to specify whether the entire transformed element (containing children if is group) is confined in its container.
See sample:
Optional values:
'all'
: (default)
Use the transformed bounding box of itself and its descentants to perform position calculation, which confine the entire body in the boundary of its parent.
'raw'
:
Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the width of its parent.'middle'
: means position the element in the middle of according to its parent.Only one between top and bottom can work.
If top or bottom is specified, positioning attributes in shape (like y
, cy
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the width of its parent.'middle'
: means position the element in the middle of according to its parent.Only one between top and bottom can work.
If top or bottom is specified, positioning attributes in shape (like y
, cy
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the height of its parent.'center'
: means position the element in the middle of according to its parent.Only one between left and right can work.
If left or right is specified, positioning attributes in shape (like x
, cx
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the height of its parent.'center'
: means position the element in the middle of according to its parent.Only one between left and right can work.
If left or right is specified, positioning attributes in shape (like x
, cx
) will not work.
Specify the operation should be performed to the element when calling setOption
.
Default value is 'merge', other values can be 'replace' or 'remove'.
Optional values:
'merge'
: merge the given option to existing element (if any), otherwise create a new elemnt.'replace'
: create a new element accordint to the given option and replace the existing element (if any).'remove'
: delete the existing element (if any).id is used to specifying element when willing to update it. id can be ignored if you do not need it.
Must be specified when define a graphic element at the first time.
Optional values:
image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
color of shadow.
Y offset of shadow.
X offset of shadow.
Width of shadow.
Width of stroke.
Color of stroke.
Color filled in this element.
The height of the shape of the element.
The width of the shape of the element.
The y value of the left-top corner of the element in the coordinate system of its parent.
The x value of the left-top corner of the element in the coordinate system of its parent.
Specify contant of the image, can be a URL, or dataURI.
Whether use progressive render to improve performance. Usually used when number of element is too large.
Can be dragged or not.
The mouse style when mouse hover on this element, the same as cursor
property in CSS
.
Whether the element is visible.
Whether response to mouse events / touch events.
Determine which canvas layer this element should be in.
Notice: Multiple canvas layer may affect performance.
z value of the elements, determine the overlap order.
Used to specify whether the entire transformed element (containing children if is group) is confined in its container.
See sample:
Optional values:
'all'
: (default)
Use the transformed bounding box of itself and its descentants to perform position calculation, which confine the entire body in the boundary of its parent.
'raw'
:
Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the width of its parent.'middle'
: means position the element in the middle of according to its parent.Only one between top and bottom can work.
If top or bottom is specified, positioning attributes in shape (like y
, cy
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the width of its parent.'middle'
: means position the element in the middle of according to its parent.Only one between top and bottom can work.
If top or bottom is specified, positioning attributes in shape (like y
, cy
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the height of its parent.'center'
: means position the element in the middle of according to its parent.Only one between left and right can work.
If left or right is specified, positioning attributes in shape (like x
, cx
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the height of its parent.'center'
: means position the element in the middle of according to its parent.Only one between left and right can work.
If left or right is specified, positioning attributes in shape (like x
, cx
) will not work.
Specify the operation should be performed to the element when calling setOption
.
Default value is 'merge', other values can be 'replace' or 'remove'.
Optional values:
'merge'
: merge the given option to existing element (if any), otherwise create a new elemnt.'replace'
: create a new element accordint to the given option and replace the existing element (if any).'remove'
: delete the existing element (if any).id is used to specifying element when willing to update it. id can be ignored if you do not need it.
Must be specified when define a graphic element at the first time.
Optional values:
image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
group
is the only type that can contain children, so that a group of elements can be positioned and transformed together.
A list of children, each item is a declaration of an element.
Specify height of this group
.
This height is only used for the positioning of its children.
When height is 0
, children can also be positioned according to its parent using top: 'middle'
.
Specify width of this group
.
This width is only used for the positioning of its children.
When width is 0
, children can also be positioned according to its parent using left: 'center'
.
Whether use progressive render to improve performance. Usually used when number of element is too large.
Can be dragged or not.
The mouse style when mouse hover on this element, the same as cursor
property in CSS
.
Whether the element is visible.
Whether response to mouse events / touch events.
Determine which canvas layer this element should be in.
Notice: Multiple canvas layer may affect performance.
z value of the elements, determine the overlap order.
Used to specify whether the entire transformed element (containing children if is group) is confined in its container.
See sample:
Optional values:
'all'
: (default)
Use the transformed bounding box of itself and its descentants to perform position calculation, which confine the entire body in the boundary of its parent.
'raw'
:
Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the width of its parent.'middle'
: means position the element in the middle of according to its parent.Only one between top and bottom can work.
If top or bottom is specified, positioning attributes in shape (like y
, cy
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the width of its parent.'middle'
: means position the element in the middle of according to its parent.Only one between top and bottom can work.
If top or bottom is specified, positioning attributes in shape (like y
, cy
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the height of its parent.'center'
: means position the element in the middle of according to its parent.Only one between left and right can work.
If left or right is specified, positioning attributes in shape (like x
, cx
) will not work.
Specify how to be positioned in its parent.
When the element is at the top level, the parent is the contianer of the chart instance.
Otherwise, the parent is a group
element.
Optional values:
30
, means 30px
.'33%'
, means the final result should be calculated by this value and the height of its parent.'center'
: means position the element in the middle of according to its parent.Only one between left and right can work.
If left or right is specified, positioning attributes in shape (like x
, cx
) will not work.
Specify the operation should be performed to the element when calling setOption
.
Default value is 'merge', other values can be 'replace' or 'remove'.
Optional values:
'merge'
: merge the given option to existing element (if any), otherwise create a new elemnt.'replace'
: create a new element accordint to the given option and replace the existing element (if any).'remove'
: delete the existing element (if any).id is used to specifying element when willing to update it. id can be ignored if you do not need it.
Must be specified when define a graphic element at the first time.
Optional values:
image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
timeline
component, which provides functions like switching and playing between multiple ECharts options
.
Here is an example:
Different from other components, timeline
component requires multiple options. If the traditional way of ECharts option is called atomic option, then, the option used along with timeline should be call a compound option composed with multiple atomic options. For example:
// In the following example, baseOption is an *atomic option*, so as each item in options array.
// Each of the atomic option follows configuration introduced in this document.
myChart.setOption(
{
baseOption: {
timeline: {
...,
data: ['2002-01-01', '2003-01-01', '2004-01-01']
},
title: {
subtext: ' Data is from National Bureau of Statistics '
},
grid: {...},
xAxis: [...],
yAxis: [...],
series: [
{ // other configurations of series 1
type: 'bar',
...
},
{ // other configurations of series 2
type: 'line',
...
},
{ // other configurations of series 3
type: 'pie',
...
}
]
},
options: [
{ // it is an option corresponding to '2002-01-01'
title: {
text: 'the statistics of the year 2002'
},
series: [
{data: []}, // the data of series 1
{data: []}, // the data of series 2
{data: []} // the data of series 3
]
},
{ // it is an option corresponding to '2003-01-01'
title: {
text: 'the statistics of the year 2003'
},
series: [
{data: []},
{data: []},
{data: []}
]
},
{ // it is an option corresponding to '2004-01-01'
title: {
text: 'the statistics of the year 2004'
},
series: [
{data: []},
{data: []},
{data: []}
]
}
]
}
);
In the above example, each item in timeline.data
corresponds to each option
of options
array.
Attention and Best Practice:
Shared configuration items are recommended to be set in baseOption
. When switching in timeline
, option
in corresponding options
array will be merged with baseOption
to form the final option
.
In options
array, if an attribute is configured in one of the options, then, it should also be configured in other options. Otherwise, this attribute will be ignored.
options
in compound option doesn't support merge.
That is to say, when calling chart.setOption(rawOption)
after the first time, if rawOption
is a compound option (meaning that it contains an array of options
), then the new rawOption.options
will replace the old one, instead of merging with it. Of course, rawOption.baseOption
will be merged with that of old option normally.
Compatibility with ECharts 2:
ECharts3 doesn't support timeline.notMerge
parameter any more, which implies notMerge mode is no longer supported. If you need this function, you may manage the option in your own program before passing to setOption(option, true)
.
Comparing ECharts 3 with ECharts 2, the definition location of timeline attributes are different. The one in ECharts 3 is moved to baseOption
and is regarded as a seperate component, which is also compatible with the timeline definition location of ECharts 2. But it is not recommended to do so.
timeline
data. Each item of Array
can be a instant value. If you need to set style individually for a data item, the data
item should be written as Object
. In then Object
, the attribute of value
is numerical value. Other attributes, such as shown the examples below, could cover the attribute configurations in timeline
.
as follows:
[
'2002-01-01',
'2003-01-01',
'2004-01-01',
{
value: '2005-01-01',
tooltip: { // enables `tooltip` to be displayed as mouse hovering to this item.
formatter: '{b} xxxx'
},
symbol: 'diamond', // the special setting of this item's symbol.
symbolSize: 16 // the special setting of this item's size.
},
'2006-01-01',
'2007-01-01',
'2008-01-01',
'2009-01-01',
'2010-01-01',
{
value: '2011-01-01',
tooltip: { // enables `tooltip` to be displayed as mouse hovering to this item.
formatter: function (params) {
return params.name + 'xxxx';
}
},
symbol: 'diamond',
symbolSize: 18
},
]
The style of control button, which includes: play button, previous button, and next button.
Button style in highlighted state (when it's hovered by mouse).
Width of button border.
Color of button border.
Button color.
Style of normal state for control button.
Border width of button.
Color of button border.
Button color.
Icon of next button.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Icon of previous button.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Icon of stop status for play button.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Icon of play status for play button.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
the location of control button.
When timeline.orient is set to be 'horizontal'
, 'left'
and 'right'
are valid.
When timeline.orient is set to be 'vertical'
, 'top'
and 'bottom'
are valid.
Interval between control button, in pixels (px).
Size of control button, in pixels (px).
Whether to show next button.
Whether to show previous button.
Whether to show play button.
Whether to show control button. false
for hide all.
Style of the selected item (checkpoint
).
The easing effect of animation of checkpoint
in timeline
component. Refers to easing sample for different easing effects.
The animation duration of checkpoint
in timeline
component.
In timeline
component, whether there is animation in checkpoint
moving during the process of timeline
playing and switching.
The border-color of checkpoint
in timeline
component.
The border-width of checkpoint
in timeline
component.
Color of checkpoint
in timeline
component.
Offset of timeline.checkpointStyle 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.
Rotate degree of timeline.checkpointStyle symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
timeline.checkpointStyle 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 is10
.
Symbol of timeline.checkpointStyle .
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
Graphic style of timeline , which has normal
and emphasis
two styles. normal
is the style by default, while emphasis
is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
timeline border width. No border when it is set to be 0.
timeline border color, whose format is similar to that of color
.
timeline color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
timeline border width. No border when it is set to be 0.
timeline border color, whose format is similar to that of color
.
timeline color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Label axis, which has normal
and emphasis
status. normal
refers to the normal style of text, while emphasis
is the highlighted style of text. For instance, text style in emphasis
would be used when mouse hovers or legend connects.
timeline.lable.emphasis font size
timeline.lable.emphasis font family
timeline.lable.emphasis font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
timeline.lable.emphasis font style
Options are:
'normal'
'italic'
'oblique'
timeline.lable.emphasis text color.
Formatter of axis label, which supports string template and callback function.
Example:
// Use string template; template variable is the default label of axis {value}
formatter: '{value} kg'
// Use callback function; function parameters are axis index
formatter: function (value, index) {
// Formatted to be month/day; display year only in the first label
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (idx === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
Rotation angle of label
, in which positive values refer to counter clockwise rotation.
Interval of label
. When it is assigned with a numerical value, such as 2
, a label would show every 2 items.
Whether to show the label.
timeline.lable.normal font size
timeline.lable.normal font family
timeline.lable.normal font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
timeline.lable.normal font style
Options are:
'normal'
'italic'
'oblique'
timeline.lable.normal text color.
Formatter of axis label, which supports string template and callback function.
Example:
// Use string template; template variable is the default label of axis {value}
formatter: '{value} kg'
// Use callback function; function parameters are axis index
formatter: function (value, index) {
// Formatted to be month/day; display year only in the first label
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (idx === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
Rotation angle of label
, in which positive values refer to counter clockwise rotation.
Interval of label
. When it is assigned with a numerical value, such as 2
, a label would show every 2 items.
Whether to show the label.
Configurations:
'auto'
:
Automatic layout.
'left'
:
Put it along the left margin.
It is valid when timline.orient is set as 'horizontal'
.
'right'
:
Put it along the right margin.
It is valid when timline.orient is set as 'horizontal'
.
'top'
:
Put it along the margin of the top.
It is valid when timline.orient is set as 'vertical'
.
'bottom'
:
Put it along the margin of the bottom.
It is valid when timline.orient is set as 'vertical'
.
number
:
When it is assigned to be a a number value, it indicates the distance between label
and axis. If it is set to be 0
, label
would be at the same position with axis. Negative value is valid for the other side of the axis.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
timeline line type.
Options are:
'solid'
'dashed'
'dotted'
timeline line width.
timeline Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Whether to show the axis. It can be set to be false
to hide the axis line to make a different style.
Offset of timeline 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.
Rotate degree of timeline symbol. Note that when symbol
is set to be 'arrow'
in markLine
, symbolRotate
value will be ignored, and compulsively use tangent angle.
timeline 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 is10
.
Symbol of timeline.
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
timeline
component reversely, which makes the elements in the front to be at the end.Orientation of the component, whose valid values are:
'vertical'
: vertical layout.'horizontal'
: horizontal layout.timeline 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:
// Set padding to be 5
padding: 5
// Set the top and bottom paddings to be 5, and left and right paddings to be 10
padding: [5, 10]
// Set each of the four paddings seperately
padding: [
5, // up
10, // right
5, // down
10, // left
]
Distance between timeline component and the bottom side of the container.
bottom
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Adaptive by default.
Distance between timeline component and the right side of the container.
right
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Adaptive by default.
Distance between timeline component and the top side of the container.
top
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'top'
, 'middle'
, or 'bottom'
.
If the left
value is set to be 'top'
, 'middle'
, or 'bottom'
, then the component will be aligned automatically based on position.
Distance between timeline component and the left side of the container.
left
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'left'
, 'center'
, or 'right'
.
If the left
value is set to be 'left'
, 'center'
, or 'right'
, then the component will be aligned automatically based on position.
z
value of all graghical elements in , which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in .
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
Position of the play button, whose valid values are 'left'
and 'right'
.
Whether the view updates in real time during dragging the control dot.
Indicates play speed (gap time between two state), whose unit is millisecond.
Whether to loop playing.
Whether supports playing reversely.
Whether to play automatically.
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]
).
Type of axis, whose values may be:
'value'
Numeric axis, which is suitable for continuous data.'category'
Category axis, which is suitable for category data.'time'
Time axis, which is suitable for continuous time data. Compared with value axis, time axis is equipped with time formatting function and has a different method when calculating axis ticks. For example, for time axis, axis ticks may vary in choosing unit as month, week, date, or hour based on the range of data. This attribute has only one valid value as slider
by now. You don't have to change it.
Whether to show the timeline
component. It would not show with a setting of false
, but its functions still remain.
An axis with a single dimension. It can be used to display data in one dimension. For example:
Category data, available in type: 'category' axis.
Example:
// Name list of all categories
data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
// Each item could also be a specific configuration item.
// In this case, `value` is used as the category name.
data: [{
value: 'Monday',
// Highlight Monday
textStyle: {
fontSize: 20,
color: 'red'
}
}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
Split area of axis in grid area, not shown by default.
Split area style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Color of split area. SplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.
Whether to show the splitArea.
SplitLine of axis in grid area.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
splitLine line type.
Options are:
'solid'
'dashed'
'dotted'
splitLine line width.
The color of the splitLine, which could be set separately.
SplitLine color could also be set in color array, which the split lines would take as their colors in turns.
Example:
splitLine: {
lineStyle: {
// Dark and light colors will be used in turns
color: ['#aaa', '#ddd']
}
}
Whether to show the splitLine. Value axes are shown by default, while category axes are not.
Settings related to axis label.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
Color of axis label is set to be axisLine.lineStyle.color by default. Callback function is supported, in the following format:
(val: string) => Color
Parameter is the text of label, and return value is the color. See the following example:
textStyle: {
color: function (val) {
return val >= 0 ? 'green' : 'red';
}
}
Formatter of axis label, which supports string template and callback function.
Example:
// Use string template; template variable is the default label of axis {value}
formatter: '{value} kg'
// Use callback function; function parameters are axis index
formatter: function (value, index) {
// Formatted to be month/day; display year only in the first label
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (idx === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
The margin between the axis label and the axis line.
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.
Specifies whether the axis label faces Inside. False by default.
Whether to show the label of axis label or not.
Settings related to axis tick.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
axisTick line type.
Options are:
'solid'
'dashed'
'dotted'
axisTick line width.
Color of axis label is set to be axisLine.lineStyle.color by default.
The length of the axis tick.
Specifies whether the axis label faces Inside. False by default.
Align axis tick with label, which is available only when boundaryGap
is set to be true
in category axis. See the following picture:
Whether to show the axis tick.
Settings related to axis line.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line style line type.
Options are:
'solid'
'dashed'
'dotted'
line style line width.
line styleLine color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Whether to show the axis line or not.
Whether the labels of axis triggers and reacts to mouse events.
Parameters of event includes:
{
// Component type: xAxis, yAxis, radiusAxis, angleAxis
// Each of which has an attribute for index, e.g., xAxisIndex for xAxis
componentType: string,
// Value on axis before being formatted.
// Click on value label to trigger event.
value: '',
// Name of axis.
// Click on laben name to trigger event.
name: ''
}
True for axis that cannot be interacted with.
Base of logarithm, which is valid only for numeric axes with type: 'log'.
Compulsively set segmentation interval for axis.
As 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 and max to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.
This is unavailable for category axis. Timestamp should be passed for type: 'time' axis. Logged value should be passed for type: 'log' axis.
Minimum gap between split lines.
For example, it can be set to be 1
to make sure axis label is show as integer.
{
minInterval: 1
}
It is available only for axis of type 'value'.
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.
It is available only in numerical axis, i.e., type: 'value'.
It specifies whether not to contain zero position of axis compulsively. When it is set to be true
, the axis may not contain zero position, which is useful in the scatter chart for both value axes.
This configuration item is unavailable when the min and max are set.
The maximum value of axis, unavailable in category axis.
It can be set to a special value 'dataMax'
so that the minimum value on this axis is set to be the maximum label.
It will be automatically computed to make sure axis tick is equally distributed when not set.
The minimun value of axis, unavailable in category 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.
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 is served only as a separation line, and labels and data appear only in the center part of two axis ticks, which is called band.
For non-category axis, including time, numerical value, and log axes, boundaryGap
is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting min and max.
Example:
boundaryGap: ['20%', '20%']
Whether axis is inversed. New option from ECharts 3.
Rotation of axis name.
Gap between axis name and axis line.
Text style of axis name.
axis name font size
axis name font family
axis name font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
axis name font style
Options are:
'normal'
'italic'
'oblique'
Color of axis name uses axisLine.lineStyle.color by default.
Location of axis name.
Options:
'start'
'middle'
'end'
Name of axis.
Type of axis
Option:
'value'
Numerical axis, suitable for continuous data.
'category'
Category axis, suitable for discrete category data. Data should only be set via data for this type.
'time'
Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.
'log'
Log axis, suitable for log data.
Orientation of the axis. By default, it's 'horizontal'
. You can set it to be 'vertical'
to make a vertical axis.
Height of grid component. Adaptive by default.
Width of grid component. Adaptive by default.
Distance between grid component and the bottom side of the container.
bottom
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Distance between grid component and the right side of the container.
right
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Distance between grid component and the top side of the container.
top
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'top'
, 'middle'
, or 'bottom'
.
If the left
value is set to be 'top'
, 'middle'
, or 'bottom'
, then the component will be aligned automatically based on position.
Distance between grid component and the left side of the container.
left
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'left'
, 'center'
, or 'right'
.
If the left
value is set to be 'left'
, 'center'
, or 'right'
, then the component will be aligned automatically based on position.
z
value of all graghical elements in , which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in .
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
This component is the coordinate axis for parallel coordinate.
Introduction about Parallel coordinates
Parallel Coordinates is a common way of visualizing high-dimensional geometry and analyzing multivariate data.
For example, series-parallel.data is the following data:
[
[1, 55, 9, 56, 0.46, 18, 6, 'good'],
[2, 25, 11, 21, 0.65, 34, 9, 'excellent'],
[3, 56, 7, 63, 0.3, 14, 5, 'good'],
[4, 33, 7, 29, 0.33, 16, 6, 'excellent'],
{ // Data item can also be an Object, so that perticular settings of its line can be set here.
value: [5, 42, 24, 44, 0.76, 40, 16, 'excellent']
lineStyle: {...},
}
...
]
In data above, each row is a "data item", and each column represents a "dimension". For example, the meanings of columns above are: "data", "AQI", "PM2.5", "PM10", "carbon monoxide level", "nitrogen dioxide level", and "sulfur dioxide level".
Parallel coordinates are much used to visualize multi-dimension data shown above. Each axis represents a dimension (namely, a column), and each line represents a data item. Data can be brush-selected on axes. For example:
Brief about Configuration
Basic configuration parallel coordinates is shown as follow:
option = {
parallelAxis: [ // Definitions of axes.
{dim: 0, name: schema[0].text}, // Each axis has a 'dim' attribute, representing dimension index in data.
{dim: 1, name: schema[1].text},
{dim: 2, name: schema[2].text},
{dim: 3, name: schema[3].text},
{dim: 4, name: schema[4].text},
{dim: 5, name: schema[5].text},
{dim: 6, name: schema[6].text},
{dim: 7, name: schema[7].text,
type: 'category', // Also supports category data.
data: ['Excellent', 'good', 'light pollution', 'moderate pollution', 'heavy pollution', 'severe pollution']
}
],
parallel: { // Definition of a parallel coordinate system.
left: '5%', // Location of parallel coordinate system.
right: '13%',
bottom: '10%',
top: '20%',
parallelAxisDefault: { // A pattern for axis definition, which can avoid repeating in `parallelAxis`.
type: 'value',
nameLocation: 'end',
nameGap: 20
}
},
series: [ // Here the three series sharing the same parallel coordinate system.
{
name: 'Beijing',
type: 'parallel', // The type of this series is 'parallel'
data: [
[1, 55, 9, 56, 0.46, 18, 6, 'good'],
[2, 25, 11, 21, 0.65, 34, 9, 'excellent'],
...
]
},
{
name: 'Shanghai',
type: 'parallel',
data: [
[3, 56, 7, 63, 0.3, 14, 5, 'good'],
[4, 33, 7, 29, 0.33, 16, 6, 'excellent'],
...
]
},
{
name: 'Guangzhou',
type: 'parallel',
data: [
[4, 33, 7, 29, 0.33, 16, 6, 'excellent'],
[5, 42, 24, 44, 0.76, 40, 16, 'excellent'],
...
]
}
]
};
Three components are involved here: parallel, parallelAxis, series-parallel
This component is the coordinate system. One or more series (like "Beijing", "Shanghai", and "Guangzhou" in the above example) can share one coordinate system.
Like other coordinate systems, multiple parallel coordinate systems can be created in one echarts instance.
Position setting is also carried out here.
This is axis configuration. Multiple axes are needed in parallel coordinates.
parallelAxis.parallelIndex is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.
This is the definition of parallel series, which will be drawn on parallel coordinate system.
parallelAxis.parallelIndex is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.
Notes and Best Practices
When configuring multiple parallelAxis, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under parallel.parallelAxisDefault. Before initializing axis, configurations in parallel.parallelAxisDefault will be merged into parallelAxis to generate the final axis configuration.
If data is too large and cause bad performance
It is suggested to set series-parallel.lineStyle.normal.width to be 0.5
(or less), which may improve performance significantly.
Display High-Dimension Data
When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.
In this case, you may use parallel.axisExpandable to improve the display. See this example:
Category data, available in type: 'category' axis.
Example:
// Name list of all categories
data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
// Each item could also be a specific configuration item.
// In this case, `value` is used as the category name.
data: [{
value: 'Monday',
// Highlight Monday
textStyle: {
fontSize: 20,
color: 'red'
}
}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
Settings related to axis label.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
Color of axis label is set to be axisLine.lineStyle.color by default. Callback function is supported, in the following format:
(val: string) => Color
Parameter is the text of label, and return value is the color. See the following example:
textStyle: {
color: function (val) {
return val >= 0 ? 'green' : 'red';
}
}
Formatter of axis label, which supports string template and callback function.
Example:
// Use string template; template variable is the default label of axis {value}
formatter: '{value} kg'
// Use callback function; function parameters are axis index
formatter: function (value, index) {
// Formatted to be month/day; display year only in the first label
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (idx === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
The margin between the axis label and the axis line.
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.
Specifies whether the axis label faces Inside. False by default.
Whether to show the label of axis label or not.
Settings related to axis tick.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
axisTick line type.
Options are:
'solid'
'dashed'
'dotted'
axisTick line width.
Color of axis label is set to be axisLine.lineStyle.color by default.
The length of the axis tick.
Specifies whether the axis label faces Inside. False by default.
Align axis tick with label, which is available only when boundaryGap
is set to be true
in category axis. See the following picture:
Whether to show the axis tick.
Settings related to axis line.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line style line type.
Options are:
'solid'
'dashed'
'dotted'
line style line width.
line styleLine color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Whether to show the axis line or not.
Whether the labels of axis triggers and reacts to mouse events.
Parameters of event includes:
{
// Component type: xAxis, yAxis, radiusAxis, angleAxis
// Each of which has an attribute for index, e.g., xAxisIndex for xAxis
componentType: string,
// Value on axis before being formatted.
// Click on value label to trigger event.
value: '',
// Name of axis.
// Click on laben name to trigger event.
name: ''
}
True for axis that cannot be interacted with.
Base of logarithm, which is valid only for numeric axes with type: 'log'.
Compulsively set segmentation interval for axis.
As 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 and max to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.
This is unavailable for category axis. Timestamp should be passed for type: 'time' axis. Logged value should be passed for type: 'log' axis.
Minimum gap between split lines.
For example, it can be set to be 1
to make sure axis label is show as integer.
{
minInterval: 1
}
It is available only for axis of type 'value'.
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.
It is available only in numerical axis, i.e., type: 'value'.
It specifies whether not to contain zero position of axis compulsively. When it is set to be true
, the axis may not contain zero position, which is useful in the scatter chart for both value axes.
This configuration item is unavailable when the min and max are set.
The maximum value of axis, unavailable in category axis.
It can be set to a special value 'dataMax'
so that the minimum value on this axis is set to be the maximum label.
It will be automatically computed to make sure axis tick is equally distributed when not set.
The minimun value of axis, unavailable in category 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.
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 is served only as a separation line, and labels and data appear only in the center part of two axis ticks, which is called band.
For non-category axis, including time, numerical value, and log axes, boundaryGap
is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting min and max.
Example:
boundaryGap: ['20%', '20%']
Whether axis is inversed. New option from ECharts 3.
Rotation of axis name.
Gap between axis name and axis line.
Text style of axis name.
axis name font size
axis name font family
axis name font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
axis name font style
Options are:
'normal'
'italic'
'oblique'
Color of axis name uses axisLine.lineStyle.color by default.
Location of axis name.
Options:
'start'
'middle'
'end'
Name of axis.
Type of axis
Option:
'value'
Numerical axis, suitable for continuous data.
'category'
Category axis, suitable for discrete category data. Data should only be set via data for this type.
'time'
Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.
'log'
Log axis, suitable for log data.
Area selecting is available on axes. Here is some configurations.
Opacity of the select box.
Border fill color of the select box.
Border color of the select box.
Border width of the select box.
Width of selecting box.
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.
It is used to define which coordinate the axis should map to.
For example:
myChart.setOption({
parallel: [
{...}, // the first parallel coordinate
{...} // the second parallel coordinate
],
parallelAxis: [
{parallelIndex: 1, ...}, // the first coordinate axis, mapping to the second parallel coordinate
{parallelIndex: 0, ...}, // the second coordinate axis, mapping to the first parallel coordinate
{parallelIndex: 1, ...}, // the third coordinate axis, mapping to the second parallel coordinate
{parallelIndex: 0, ...} // the fourth coordinate axis, mapping to the first parallel coordinate
],
...
});
If there is only one parallel coordinate, you don't have to configure it, whose default value is 0
.
Dimension index of coordinate axis.
For example, series-parallel.data is the following data:
[
[1, 55, 9, 56, 0.46, 18, 6, 'good'],
[2, 25, 11, 21, 0.65, 34, 9, 'excellent'],
[3, 56, 7, 63, 0.3, 14, 5, 'good'],
[4, 33, 7, 29, 0.33, 16, 6, 'excellent'],
{ // Data item can also be an Object, so that perticular settings of its line can be set here.
value: [5, 42, 24, 44, 0.76, 40, 16, 'excellent']
lineStyle: {...},
}
...
]
In data above, each row is a "data item", and each column represents a "dimension". For example, the meanings of columns above are: "data", "AQI", "PM2.5", "PM10", "carbon monoxide level", "nitrogen dioxide level", and "sulfur dioxide level".
dim
defines which dimension (which row) of data would map to this axis.
Started from 0
. For example, if the dim
of coordinate axis is 1
, it indicates that the second row of data would map to this axis.
Introduction about Parallel coordinates
Parallel Coordinates is a common way of visualizing high-dimensional geometry and analyzing multivariate data.
For example, series-parallel.data is the following data:
[
[1, 55, 9, 56, 0.46, 18, 6, 'good'],
[2, 25, 11, 21, 0.65, 34, 9, 'excellent'],
[3, 56, 7, 63, 0.3, 14, 5, 'good'],
[4, 33, 7, 29, 0.33, 16, 6, 'excellent'],
{ // Data item can also be an Object, so that perticular settings of its line can be set here.
value: [5, 42, 24, 44, 0.76, 40, 16, 'excellent']
lineStyle: {...},
}
...
]
In data above, each row is a "data item", and each column represents a "dimension". For example, the meanings of columns above are: "data", "AQI", "PM2.5", "PM10", "carbon monoxide level", "nitrogen dioxide level", and "sulfur dioxide level".
Parallel coordinates are much used to visualize multi-dimension data shown above. Each axis represents a dimension (namely, a column), and each line represents a data item. Data can be brush-selected on axes. For example:
Brief about Configuration
Basic configuration parallel coordinates is shown as follow:
option = {
parallelAxis: [ // Definitions of axes.
{dim: 0, name: schema[0].text}, // Each axis has a 'dim' attribute, representing dimension index in data.
{dim: 1, name: schema[1].text},
{dim: 2, name: schema[2].text},
{dim: 3, name: schema[3].text},
{dim: 4, name: schema[4].text},
{dim: 5, name: schema[5].text},
{dim: 6, name: schema[6].text},
{dim: 7, name: schema[7].text,
type: 'category', // Also supports category data.
data: ['Excellent', 'good', 'light pollution', 'moderate pollution', 'heavy pollution', 'severe pollution']
}
],
parallel: { // Definition of a parallel coordinate system.
left: '5%', // Location of parallel coordinate system.
right: '13%',
bottom: '10%',
top: '20%',
parallelAxisDefault: { // A pattern for axis definition, which can avoid repeating in `parallelAxis`.
type: 'value',
nameLocation: 'end',
nameGap: 20
}
},
series: [ // Here the three series sharing the same parallel coordinate system.
{
name: 'Beijing',
type: 'parallel', // The type of this series is 'parallel'
data: [
[1, 55, 9, 56, 0.46, 18, 6, 'good'],
[2, 25, 11, 21, 0.65, 34, 9, 'excellent'],
...
]
},
{
name: 'Shanghai',
type: 'parallel',
data: [
[3, 56, 7, 63, 0.3, 14, 5, 'good'],
[4, 33, 7, 29, 0.33, 16, 6, 'excellent'],
...
]
},
{
name: 'Guangzhou',
type: 'parallel',
data: [
[4, 33, 7, 29, 0.33, 16, 6, 'excellent'],
[5, 42, 24, 44, 0.76, 40, 16, 'excellent'],
...
]
}
]
};
Three components are involved here: parallel, parallelAxis, series-parallel
This component is the coordinate system. One or more series (like "Beijing", "Shanghai", and "Guangzhou" in the above example) can share one coordinate system.
Like other coordinate systems, multiple parallel coordinate systems can be created in one echarts instance.
Position setting is also carried out here.
This is axis configuration. Multiple axes are needed in parallel coordinates.
parallelAxis.parallelIndex is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.
This is the definition of parallel series, which will be drawn on parallel coordinate system.
parallelAxis.parallelIndex is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.
Notes and Best Practices
When configuring multiple parallelAxis, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under parallel.parallelAxisDefault. Before initializing axis, configurations in parallel.parallelAxisDefault will be merged into parallelAxis to generate the final axis configuration.
If data is too large and cause bad performance
It is suggested to set series-parallel.lineStyle.normal.width to be 0.5
(or less), which may improve performance significantly.
Display High-Dimension Data
When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.
In this case, you may use parallel.axisExpandable to improve the display. See this example:
When configuring multiple parallelAxis, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under parallel.parallelAxisDefault. Before initializing axis, configurations in parallel.parallelAxisDefault will be merged into parallelAxis to generate the final axis configuration.
Category data, available in type: 'category' axis.
Example:
// Name list of all categories
data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
// Each item could also be a specific configuration item.
// In this case, `value` is used as the category name.
data: [{
value: 'Monday',
// Highlight Monday
textStyle: {
fontSize: 20,
color: 'red'
}
}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
Settings related to axis label.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
Color of axis label is set to be axisLine.lineStyle.color by default. Callback function is supported, in the following format:
(val: string) => Color
Parameter is the text of label, and return value is the color. See the following example:
textStyle: {
color: function (val) {
return val >= 0 ? 'green' : 'red';
}
}
Formatter of axis label, which supports string template and callback function.
Example:
// Use string template; template variable is the default label of axis {value}
formatter: '{value} kg'
// Use callback function; function parameters are axis index
formatter: function (value, index) {
// Formatted to be month/day; display year only in the first label
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (idx === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
The margin between the axis label and the axis line.
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.
Specifies whether the axis label faces Inside. False by default.
Whether to show the label of axis label or not.
Settings related to axis tick.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
axisTick line type.
Options are:
'solid'
'dashed'
'dotted'
axisTick line width.
Color of axis label is set to be axisLine.lineStyle.color by default.
The length of the axis tick.
Specifies whether the axis label faces Inside. False by default.
Align axis tick with label, which is available only when boundaryGap
is set to be true
in category axis. See the following picture:
Whether to show the axis tick.
Settings related to axis line.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line style line type.
Options are:
'solid'
'dashed'
'dotted'
line style line width.
line styleLine color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Whether to show the axis line or not.
Whether the labels of axis triggers and reacts to mouse events.
Parameters of event includes:
{
// Component type: xAxis, yAxis, radiusAxis, angleAxis
// Each of which has an attribute for index, e.g., xAxisIndex for xAxis
componentType: string,
// Value on axis before being formatted.
// Click on value label to trigger event.
value: '',
// Name of axis.
// Click on laben name to trigger event.
name: ''
}
True for axis that cannot be interacted with.
Base of logarithm, which is valid only for numeric axes with type: 'log'.
Compulsively set segmentation interval for axis.
As 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 and max to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.
This is unavailable for category axis. Timestamp should be passed for type: 'time' axis. Logged value should be passed for type: 'log' axis.
Minimum gap between split lines.
For example, it can be set to be 1
to make sure axis label is show as integer.
{
minInterval: 1
}
It is available only for axis of type 'value'.
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.
It is available only in numerical axis, i.e., type: 'value'.
It specifies whether not to contain zero position of axis compulsively. When it is set to be true
, the axis may not contain zero position, which is useful in the scatter chart for both value axes.
This configuration item is unavailable when the min and max are set.
The maximum value of axis, unavailable in category axis.
It can be set to a special value 'dataMax'
so that the minimum value on this axis is set to be the maximum label.
It will be automatically computed to make sure axis tick is equally distributed when not set.
The minimun value of axis, unavailable in category 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.
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 is served only as a separation line, and labels and data appear only in the center part of two axis ticks, which is called band.
For non-category axis, including time, numerical value, and log axes, boundaryGap
is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting min and max.
Example:
boundaryGap: ['20%', '20%']
Whether axis is inversed. New option from ECharts 3.
Rotation of axis name.
Gap between axis name and axis line.
Text style of axis name.
axis name font size
axis name font family
axis name font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
axis name font style
Options are:
'normal'
'italic'
'oblique'
Color of axis name uses axisLine.lineStyle.color by default.
Location of axis name.
Options:
'start'
'middle'
'end'
Name of axis.
Type of axis
Option:
'value'
Numerical axis, suitable for continuous data.
'category'
Category axis, suitable for discrete category data. Data should only be set via data for this type.
'time'
Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.
'log'
Log axis, suitable for log data.
Distance between two axes when at expanding state, in pixels.
Please refer to parallel.axisExpandable for more information.
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 and parallel.axisExpandable.
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 for more information.
When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.
In this case, you may use parallel.axisExpandable to improve the display. See this example:
Whether to enable toggling axis on clicking.
Layout modes, whose optional values are:
'horizontal'
: place each axis horizontally.
'vertical'
: place each axis vertically.
Height of parallel component. Adaptive by default.
Width of parallel component. Adaptive by default.
Distance between parallel component and the bottom side of the container.
bottom
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Distance between parallel component and the right side of the container.
right
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Distance between parallel component and the top side of the container.
top
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'top'
, 'middle'
, or 'bottom'
.
If the left
value is set to be 'top'
, 'middle'
, or 'bottom'
, then the component will be aligned automatically based on position.
Distance between parallel component and the left side of the container.
left
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'left'
, 'center'
, or 'right'
.
If the left
value is set to be 'left'
, 'center'
, or 'right'
, then the component will be aligned automatically based on position.
z
value of all graghical elements in , which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in .
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
Geographic coorinate system component.
Geographic coorinate system component is used to draw maps, which also supports scatter series, and line series.
Example of using scatter series in geographic coordinate:
From 3.1.10
, geo component also supports mouse events, whose parameters are:
{
componentType: 'geo',
// geo component's index in option
geoIndex: number,
// name of clicking area, e.g., Shanghai
name: string,
// clicking region object as input, see geo.regions
region: Object
}
Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.
Configure style for specified regions. For example:
regions: [{
name: 'Guangdong',
itemStyle: {
normal: {
color: 'red'
}
}
}]
Size of map, see layoutCenter
for more information. Percentage relative to screen width, and absolute pixel values are supported.
layoutCenter
and layoutSize
provides layout strategy other than left/right/top/bottom/width/height
.
When using left/right/top/bottom/width/height
, it is hard to put the map inside a box area with a fixed width-height ratio. In this case, layoutCenter
attribute can be used to define the center position of map, and layoutSize
can be used to define the size of map. For example:
layoutCenter: ['30%', '30%'],
// If width-height ratio is larger than 1, then width is set to be 100.
// Otherwise, height is set to be 100.
// This makes sure that it will not exceed the area of 100x100
layoutSize: 100
After setting these two values, left/right/top/bottom/width/height
becomes invalid.
Distance between component and the bottom side of the container.
bottom
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Adaptive by default.
Distance between component and the right side of the container.
right
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Adaptive by default.
Distance between component and the top side of the container.
top
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'top'
, 'middle'
, or 'bottom'
.
If the left
value is set to be 'top'
, 'middle'
, or 'bottom'
, then the component will be aligned automatically based on position.
Distance between component and the left side of the container.
left
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'left'
, 'center'
, or 'right'
.
If the left
value is set to be 'left'
, 'center'
, or 'right'
, then the component will be aligned automatically based on position.
z
value of all graghical elements in , which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in .
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
Graphic style of Map Area Border, which has normal
and emphasis
two styles. normal
is the style by default, while emphasis
is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.
Map area style in highlighted state.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Map area style in normal state.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Text label of , to explain some data information about graphic item like value, name and so on. label
is placed under itemStyle.normal
in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, label
is taken to be at the same level with itemStyle
, and has two status normal
and emphasis
as itemStyle
does.
Style of text in highlighted state.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Whether to show label in highlighted state.
Style of text in normal state.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Whether to show label in normal state.
Selected mode decides whether multiple selecting is supported. By default, false
is used for disabling selection. Its value can also be 'single'
for selecting single area, or 'multiple'
for selecting multiple areas.
Name mapping for customized areas. For example:
{
'China' : '中国'
}
Limit of scaling, with min
and max
. 1
by default.
Maximum scaling
Minimum scaling
Zoom rate of current view-port.
Used to scale aspect of geo.
The final aspect is calculated by: geoBoundingRect.width / geoBoundingRect.height * aspectScale
.
Center of current view-port, in longitude and latitude.
Example:
center: [115.97, 29.71]
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.
Map charts.
Due to the increase of fineness of map, ECharts 3 doesn't include map data by default for package size consideration. You may find map files you need on map download page and then include and register them in ECharts.
Two formats of map data are provided in ECharts, one of which can be included in <script>
tag as JavaScript file, and the other of is in JSON format and should be loaded using AJAX. Map name and data will be loaded automatically once the JavaScript file is loaded, while in the JSON form, you have to assign name explicitly.
Here are examples of these two types:
JavaScript importing example
<script src="echarts.js"></script>
<script src="map/js/china.js"></script>
<script>
var chart = echarts.init(document.getElmentById('main'));
chart.setOption({
series: [{
type: 'map',
map: 'china'
}]
});
</script>
JSON importing example
$.get('map/json/china.json', function (chinaJson) {
echarts.registerMap('china', chinaJson);
var chart = echarts.init(document.getElmentById('main'));
chart.setOption({
series: [{
type: 'map',
map: 'china'
}]
});
});
ECharts uses geoJSON format as map outline. Besides the methods introduced above, you can also get geoJSON data through in other methods if you like and register it in ECharts. Reference to USA Population Estimates for more information.
Whether to show the geo component.
brush
is an area-selecting component, with which user can select part of data from a chart to display in detail, or doing calculations with them.
Example:
Brush type and triggering button
Currently, supported brush
types include: scatter
, bar
, candlestick
. (Note that parallel
contains brush function by itself, which is not provided by brush component.)
Click the button in toolbox
to enable operations like area selecting, or canceling selecting.
Example of horizontal brush
: (Click the button in toolbox
to enable brushing.)
Example of brush
in bar
charts:
Button for brush
can be assigned in toolbox
or brush
configuration.
The following types of brushes are supported: rect
, polygon
, lineX
, lineY
. See brush.toolbox for more information.
keep
button can be used to toggle single or multiple selection.
Relationship between brush-selecting and coordinates
brush
can be set to be global, or belonging to a particular coordinate.
Global brushes
Selecting is enabled for everywhere in ECharts's instance in this case. This is the default situation, when brush is not set to be global.
Coordinate brushes
Selecting is enabled only in the assigned coordinates in this case. Selecting-box will be altered according to scaling and translating of coordinate (see roam
and dataZoom
).
In practice, you may often find coordinate brush to be a more frequently made choice, particularly in geo
charts.
By assigning brush.geoIndex, or brush.xAxisIndex, or brush.yAxisIndex, brush selecting axes can be assigned, whose value can be:
'all'
: for all axes;number
: like 0
, for a particular coordinate with that index;Array
: like [0, 4, 2]
, for coordinates with those indexes;'none'
, or null
, or undefined
: for not assigning.Example:
option = {
geo: {
...
},
brush: {
geoIndex: 'all', // brush selecting is enabled only in all geo charts above
...
}
};
Example:
option = {
grid: [
{...}, // grid 0
{...} // grid 1
],
xAxis: [
{gridIndex: 1, ...}, // xAxis 0 for grid 1
{gridIndex: 0, ...} // xAxis 1 for grid 0
],
yAxis: [
{gridIndex: 1, ...}, // yAxis 0 for grid 1
{gridIndex: 0, ...} // yAxis 1 for grid 0
],
brush: {
xAxisIndex: [0, 1], // brush selecting is enabled only in coordinates with xAxisIndex as `0` or `1`
...
}
};
Control select-box with API
dispatchAction
can be used to render select-box programatically. For example:
myChart.dispatchAction({
type: 'brush',
areas: [
{
geoIndex: 0,
// Assign select-box type
brushType: 'polygon',
// Assign select-box shape
coordRange: [[119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77]]
}
]
});
Please refer to action.brush for more information.
brushLink
Links interaction between selected items in different series.
Following is an example of enabling selected effect for scatter
and parallel
charts once a scatter chart is selected.
brushLink
is an array of seriesIndex
es, which assignes the series that can be interacted. For example, it can be:
[3, 4, 5]
for interacting series with seriesIndex as 3
, 4
, or 5
;'all'
for interacting all series;'none'
, or null
, or undefined
for disabling brushLink
.Attention
brushLink
is a mapping of dataIndex
. So data
of every series with brushLink
should be guaranteed to correspond to the other.
Example:
option = {
brush: {
brushLink: [0, 1]
},
series: [
{
type: 'bar'
data: [232, 4434, 545, 654] // data has 4 items
},
{
type: 'parallel',
data: [[4, 5], [3, 5], [66, 33], [99, 66]] // data also has 4 items, which correspond to the data above
}
]
};
Please refer to brush.brushLink.
throttle / debounce
By default, brushSelected
is always triggered when selection-box is selected or moved, to tell the outside about the event.
But efficiency problems may occur when events are triggered too frequently, or the animation result may be affected. So brush components provides brush.throttleType and brush.throttleDelay to solve this problem.
Valid throttleType
values can be:
'debounce'
: for triggering events only when the action has been stopped (no action after some duration). Time threshold can be assigned with brush.throttleDelay;'fixRate'
: for triggering event with a certain frequency. The frequency can be assigned with brush.throttleDelay.In this example, debounce
is used to make sure the bar chart is updated only when the user has stopped action. In other cases, the animation result may not be so good.
Visual configurations of selected and unselected items
Refer to brush.inBrush and brush.outOfBrush.
Here is the configuration in details.
Defines visual effects of items out of selection.
Available visual effects include:
symbol
: Type of symbol.symbolSize
: Symbol size.color
: Symbol color.colorAlpha
: Symbol alpha channel.opacity
: Opacity of symbol and others (like labels).colorLightness
: Lightness in HSL.colorSaturation
: Saturation in HSL.colorHue
: Hue in HSL.Note: If outOfBrush
is not assigned, color
will be set to be '#ddd'
by default. If the color is not desired, you can use:
brush: {
...,
outOfBrush: {
colorAlpha: 0.1
}
}
Defines visual effects of items in selection.
Available visual effects include:
symbol
: Type of symbol.symbolSize
: Symbol size.color
: Symbol color.colorAlpha
: Symbol alpha channel.opacity
: Opacity of symbol and others (like labels).colorLightness
: Lightness in HSL.colorSaturation
: Saturation in HSL.colorHue
: Hue in HSL.In most cases, inBrush can be left unassigned, in which case default visual configuration is remained.
Defined whether clearing all select-boxes on click is enabled when brush.brushMode is 'single'
.
0
for disabling throttle。
By default, brushSelected
is always triggered when selection-box is selected or moved, to tell the outside about the event.
But efficiency problems may occur when events are triggered too frequently, or the animation result may be affected. So brush components provides brush.throttleType and brush.throttleDelay to solve this problem.
Valid throttleType
values can be:
'debounce'
: for triggering events only when the action has been stopped (no action after some duration). Time threshold can be assigned with brush.throttleDelay;'fixRate'
: for triggering event with a certain frequency. The frequency can be assigned with brush.throttleDelay.In this example, debounce
is used to make sure the bar chart is updated only when the user has stopped action. In other cases, the animation result may not be so good.
By default, brushSelected
is always triggered when selection-box is selected or moved, to tell the outside about the event.
But efficiency problems may occur when events are triggered too frequently, or the animation result may be affected. So brush components provides brush.throttleType and brush.throttleDelay to solve this problem.
Valid throttleType
values can be:
'debounce'
: for triggering events only when the action has been stopped (no action after some duration). Time threshold can be assigned with brush.throttleDelay;'fixRate'
: for triggering event with a certain frequency. The frequency can be assigned with brush.throttleDelay.In this example, debounce
is used to make sure the bar chart is updated only when the user has stopped action. In other cases, the animation result may not be so good.
Defailt brush style, whose value is:
{
borderWidth: 1,
color: 'rgba(120,140,180,0.3)',
borderColor: 'rgba(120,140,180,0.8)',
width: null
},
Determines whether a selected box can be changed in shape or translated.
Default brush mode, whose value can be:
'single'
: for single selection;'multiple'
: for multiple selection.Default type of brush.
'rect'
: for selection-box in rectangle shape;'polygon'
: for selection-box in polygon shape;'lineX'
: for horizontal selection-box;'lineY'
: for vertical selection-box;Assigns which of the yAxisIndex can use brush selecting.
brush
can be set to be global, or belonging to a particular coordinate.
Global brushes
Selecting is enabled for everywhere in ECharts's instance in this case. This is the default situation, when brush is not set to be global.
Coordinate brushes
Selecting is enabled only in the assigned coordinates in this case. Selecting-box will be altered according to scaling and translating of coordinate (see roam
and dataZoom
).
In practice, you may often find coordinate brush to be a more frequently made choice, particularly in geo
charts.
By assigning brush.geoIndex, or brush.xAxisIndex, or brush.yAxisIndex, brush selecting axes can be assigned, whose value can be:
'all'
: for all axes;number
: like 0
, for a particular coordinate with that index;Array
: like [0, 4, 2]
, for coordinates with those indexes;'none'
, or null
, or undefined
: for not assigning.Example:
option = {
geo: {
...
},
brush: {
geoIndex: 'all', // brush selecting is enabled only in all geo charts above
...
}
};
Example:
option = {
grid: [
{...}, // grid 0
{...} // grid 1
],
xAxis: [
{gridIndex: 1, ...}, // xAxis 0 for grid 1
{gridIndex: 0, ...} // xAxis 1 for grid 0
],
yAxis: [
{gridIndex: 1, ...}, // yAxis 0 for grid 1
{gridIndex: 0, ...} // yAxis 1 for grid 0
],
brush: {
xAxisIndex: [0, 1], // brush selecting is enabled only in coordinates with xAxisIndex as `0` or `1`
...
}
};
Assigns which of the xAxisIndex can use brush selecting.
brush
can be set to be global, or belonging to a particular coordinate.
Global brushes
Selecting is enabled for everywhere in ECharts's instance in this case. This is the default situation, when brush is not set to be global.
Coordinate brushes
Selecting is enabled only in the assigned coordinates in this case. Selecting-box will be altered according to scaling and translating of coordinate (see roam
and dataZoom
).
In practice, you may often find coordinate brush to be a more frequently made choice, particularly in geo
charts.
By assigning brush.geoIndex, or brush.xAxisIndex, or brush.yAxisIndex, brush selecting axes can be assigned, whose value can be:
'all'
: for all axes;number
: like 0
, for a particular coordinate with that index;Array
: like [0, 4, 2]
, for coordinates with those indexes;'none'
, or null
, or undefined
: for not assigning.Example:
option = {
geo: {
...
},
brush: {
geoIndex: 'all', // brush selecting is enabled only in all geo charts above
...
}
};
Example:
option = {
grid: [
{...}, // grid 0
{...} // grid 1
],
xAxis: [
{gridIndex: 1, ...}, // xAxis 0 for grid 1
{gridIndex: 0, ...} // xAxis 1 for grid 0
],
yAxis: [
{gridIndex: 1, ...}, // yAxis 0 for grid 1
{gridIndex: 0, ...} // yAxis 1 for grid 0
],
brush: {
xAxisIndex: [0, 1], // brush selecting is enabled only in coordinates with xAxisIndex as `0` or `1`
...
}
};
Assigns which of the geo can use brush selecting.
brush
can be set to be global, or belonging to a particular coordinate.
Global brushes
Selecting is enabled for everywhere in ECharts's instance in this case. This is the default situation, when brush is not set to be global.
Coordinate brushes
Selecting is enabled only in the assigned coordinates in this case. Selecting-box will be altered according to scaling and translating of coordinate (see roam
and dataZoom
).
In practice, you may often find coordinate brush to be a more frequently made choice, particularly in geo
charts.
By assigning brush.geoIndex, or brush.xAxisIndex, or brush.yAxisIndex, brush selecting axes can be assigned, whose value can be:
'all'
: for all axes;number
: like 0
, for a particular coordinate with that index;Array
: like [0, 4, 2]
, for coordinates with those indexes;'none'
, or null
, or undefined
: for not assigning.Example:
option = {
geo: {
...
},
brush: {
geoIndex: 'all', // brush selecting is enabled only in all geo charts above
...
}
};
Example:
option = {
grid: [
{...}, // grid 0
{...} // grid 1
],
xAxis: [
{gridIndex: 1, ...}, // xAxis 0 for grid 1
{gridIndex: 0, ...} // xAxis 1 for grid 0
],
yAxis: [
{gridIndex: 1, ...}, // yAxis 0 for grid 1
{gridIndex: 0, ...} // yAxis 1 for grid 0
],
brush: {
xAxisIndex: [0, 1], // brush selecting is enabled only in coordinates with xAxisIndex as `0` or `1`
...
}
};
Assigns which of the series can use brush selecting, whose value can be:
'all'
: all series;'Array'
: series index array;'number'
: certain series index.Links interaction between selected items in different series.
Following is an example of enabling selected effect for scatter
and parallel
charts once a scatter chart is selected.
brushLink
is an array of seriesIndex
es, which assignes the series that can be interacted. For example, it can be:
[3, 4, 5]
for interacting series with seriesIndex as 3
, 4
, or 5
;'all'
for interacting all series;'none'
, or null
, or undefined
for disabling brushLink
.Attention
brushLink
is a mapping of dataIndex
. So data
of every series with brushLink
should be guaranteed to correspond to the other.
Example:
option = {
brush: {
brushLink: [0, 1]
},
series: [
{
type: 'bar'
data: [232, 4434, 545, 654] // data has 4 items
},
{
type: 'parallel',
data: [[4, 5], [3, 5], [66, 33], [99, 66]] // data also has 4 items, which correspond to the data above
}
]
};
Use the buttons in toolbox.
Buttons in toolbox that is related to brush includes:
'rect'
: for selection-box in rectangle shape;'polygon'
: for selection-box in polygon shape;'lineX'
: for horizontal selection-box;'lineY'
: for vertical selection-box;'keep'
: for setting mode between single
and multiple
selection, the former of which supports clearing selection on click, and the latter selecting multiple areas;'clear'
: for clearing all selections.A group of utility tools, which includes export, data view, dynamic type switching, data area zooming, and reset.
Example:
Height of toolbox component. Adaptive by default.
Width of toolbox component. Adaptive by default.
Distance between toolbox component and the bottom side of the container.
bottom
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Adaptive by default.
Distance between toolbox component and the right side of the container.
right
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Adaptive by default.
Distance between toolbox component and the top side of the container.
top
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'top'
, 'middle'
, or 'bottom'
.
If the left
value is set to be 'top'
, 'middle'
, or 'bottom'
, then the component will be aligned automatically based on position.
Distance between toolbox component and the left side of the container.
left
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'left'
, 'center'
, or 'right'
.
If the left
value is set to be 'left'
, 'center'
, or 'right'
, then the component will be aligned automatically based on position.
z
value of all graghical elements in , which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in .
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
The style setting of Shared icon.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Align of label text: 'left'
/ 'right'
.
Position of label: 'left'
/ 'right'
/ 'top'
/ 'bottom'
.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
The configuration item for each tool.
Besides the tools we provide, user-defined toolbox is also supported.
Notes: User-defined tool name could only start with my
, like myTool1
and myTool2
in the below example:
{
toolbox: {
feature: {
myTool1: {
show: true,
title: 'custom extension method 1',
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
onclick: function (){
alert('myToolHandler1')
}
},
myTool2: {
show: true,
title: 'custom extension method',
icon: 'image://http://echarts.baidu.com/images/favicon.png',
onclick: function (){
alert('myToolHandler2')
}
}
}
}
}
Brush-selecting icon.
It can also be configured at brush.toolbox.
Title.
Icon path for each icon.
Path string for icon. In ECharts 3, user-defined svg path is supported to be used as icon, whose format could be refered at SVG PathData. It could be edited and exported from some graphic tools such as Adobe Illustrator.
Path string for icon. In ECharts 3, user-defined svg path is supported to be used as icon, whose format could be refered at SVG PathData. It could be edited and exported from some graphic tools such as Adobe Illustrator.
Path string for icon. In ECharts 3, user-defined svg path is supported to be used as icon, whose format could be refered at SVG PathData. It could be edited and exported from some graphic tools such as Adobe Illustrator.
Path string for icon. In ECharts 3, user-defined svg path is supported to be used as icon, whose format could be refered at SVG PathData. It could be edited and exported from some graphic tools such as Adobe Illustrator.
Path string for icon. In ECharts 3, user-defined svg path is supported to be used as icon, whose format could be refered at SVG PathData. It could be edited and exported from some graphic tools such as Adobe Illustrator.
Path string for icon. In ECharts 3, user-defined svg path is supported to be used as icon, whose format could be refered at SVG PathData. It could be edited and exported from some graphic tools such as Adobe Illustrator.
Icons used, whose values are:
'rect'
: Enabling selecting with rectangle area.'polygon'
: Enabling selecting with any shape.'lineX'
: Enabling horizontal selecting.'lineY'
: Enabling vertical selecting.'keep'
: Switching between single selecting and multiple selecting. The latter one can select multiple areas, while the former one cancels previous selection.'clear'
: Clearing all selection.Magic type switching. 示例:
feature: {
magicType: {
type: ['line', 'bar', 'stack', 'tiled']
}
}
Series list for each type.
Configuration item for each type, which will be used when switching to certain type.
The style setting of magic type switching icon.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Align of label text: 'left'
/ 'right'
.
Position of label: 'left'
/ 'right'
/ 'top'
/ 'bottom'
.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
the different types of icon path , which could be configurated individually.
Path string for icon. In ECharts 3, user-defined svg path is supported to be used as icon, whose format could be refered at SVG PathData. It could be edited and exported from some graphic tools such as Adobe Illustrator.
Path string for icon. In ECharts 3, user-defined svg path is supported to be used as icon, whose format could be refered at SVG PathData. It could be edited and exported from some graphic tools such as Adobe Illustrator.
Path string for icon. In ECharts 3, user-defined svg path is supported to be used as icon, whose format could be refered at SVG PathData. It could be edited and exported from some graphic tools such as Adobe Illustrator.
Path string for icon. In ECharts 3, user-defined svg path is supported to be used as icon, whose format could be refered at SVG PathData. It could be edited and exported from some graphic tools such as Adobe Illustrator.
Title for different types, can be configured seperately.
Enabled magic types, including 'line'
(for line charts), 'bar'
(for bar charts), 'stack'
(for stacked charts), and 'tiled'
(for tiled charts).
Whether to show the tool.
Data area zooming, which only supports rectangular coordinate by now.
Defines which yAxis should be controlled. By default, it controls all y axes. If it is set to be false
, then no y axis is controlled. If it is set to be then it controls axis with axisIndex of 3
. If it is set to be [0, 3]
, it controls the x-axes with axisIndex of 0
and 3
.
Defines which xAxis should be controlled. By default, it controls all x axes. If it is set to be false
, then no x axis is controlled. If it is set to be then it controls axis with axisIndex of 3
. If it is set to be [0, 3]
, it controls the x-axes with axisIndex of 0
and 3
.
The style setting of data area zooming icon.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Align of label text: 'left'
/ 'right'
.
Position of label: 'left'
/ 'right'
/ 'top'
/ 'bottom'
.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Zooming and restore icon path.
Path string for icon. In ECharts 3, user-defined svg path is supported to be used as icon, whose format could be refered at SVG PathData. It could be edited and exported from some graphic tools such as Adobe Illustrator.
Path string for icon. In ECharts 3, user-defined svg path is supported to be used as icon, whose format could be refered at SVG PathData. It could be edited and exported from some graphic tools such as Adobe Illustrator.
Restored and zoomed title text.
Whether to show the tool.
Data view tool, which could display data in current chart and updates chart after being edited.
Color of button text.
Button color.
Text color.
Border color of input area of the floating layer in data view.
Background color of input area of the floating layer in data view.
Background color of the floating layer in data view.
There are 3 names in data view, which are ['data view', 'turn off' and 'refresh']
.
(container:HTMLDomElement, option:Object) => Object
When optionToContent is used, if you want to support refreshing chart after data changes, you need to implement the logic to merge options in this function.
(option:Object) => HTMLDomElement|string
Define a function to present dataView. It is used to replace default textarea for richer data editing. It can return a DOM object, or an HTML string.
For example:
optionToContent: function(opt) {
var axisData = opt.xAxis[0].data;
var series = opt.series;
var table = '<table style="width:100%;text-align:center"><tbody><tr>'
+ '<td>Time:</td>'
+ '<td>' + series[0].name + '</td>'
+ '<td>' + series[1].name + '</td>'
+ '</tr>';
for (var i = 0, l = axisData.length; i < l; i++) {
table += '<tr>'
+ '<td>' + axisData[i] + '</td>'
+ '<td>' + series[0].data[i] + '</td>'
+ '<td>' + series[1].data[i] + '</td>'
+ '</tr>';
}
table += '</tbody></table>';
return table;
}
Whether it is read-only.
The style setting of data view icon.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Align of label text: 'left'
/ 'right'
.
Position of label: 'left'
/ 'right'
/ 'top'
/ 'bottom'
.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Path string for icon. In ECharts 3, user-defined svg path is supported to be used as icon, whose format could be refered at SVG PathData. It could be edited and exported from some graphic tools such as Adobe Illustrator.
Whether to show the tool.
Restore configuration item.
The style setting of restore icon.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Align of label text: 'left'
/ 'right'
.
Position of label: 'left'
/ 'right'
/ 'top'
/ 'bottom'
.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Path string for icon. In ECharts 3, user-defined svg path is supported to be used as icon, whose format could be refered at SVG PathData. It could be edited and exported from some graphic tools such as Adobe Illustrator.
Whether to show the tool.
Save as image.
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.
The style setting of save as image icon.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Align of label text: 'left'
/ 'right'
.
Position of label: 'left'
/ 'right'
/ 'top'
/ 'bottom'
.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Path string for icon. In ECharts 3, user-defined svg path is supported to be used as icon, whose format could be refered at SVG PathData. It could be edited and exported from some graphic tools such as Adobe Illustrator.
Whether to show the tool.
Components to be excluded when export. By default, toolbox is excluded.
Background color to save the image, whose default value is backgroundColor. If backgroundColor
is not set, white color is used.
Name to save the image, whose default value is title.text.
Format to save the image in, which supports'png'
and 'jpeg'
.
Whether to show the title of each tool icon when mouse hovers.
The gap between each icon of toolbox. It is horizontal gap in horizontal layout, while vertical gap in vertical layout.
The size of toolbox's icon.
The layout orientation of toolbox's icon.
Options:
Whether to show toolbox component.
visualMap
is a type of component for visual encoding, which maps the data to visual channels, including:
symbol
: Type of symbol.symbolSize
: Symbol size.color
: Symbol color.colorAlpha
: Symbol alpha channel.opacity
: Opacity of symbol and others (like labels).colorLightness
: Lightness in HSL.colorSaturation
: Saturation in HSL.colorHue
: Hue in HSL.Myltiple visualMap
component could be defined in a chart instance, which enable that different dimensions of a series data are mapped to different visual channels.
visualMap
could be defined as Piecewise (visualMapPiecewise) or Continuous (visualMapContinuous), which is distinguished by the property type
. For instance:
option = {
visualMap: [
{ // the first visualMap component
type: 'continuous', // defined to be continuous viusalMap
...
},
{ // the sencond visualMap component
type: 'piecewise', // defined to be piecewise visualMap
...
}
],
...
};
✦ Configure how to map ✦
The dimension of series.data can be specified by visualMap.dimension, from which the value can be retrieved and mapped onto visual channels, which can be defined in visualMap.inRange and visualMap.outOfRange.
✦ The relationship between visualMap of ECharts3 and dataRange of ECharts2 ✦
visualMap
is renamed from the dataRange
of ECharts2, and the scope of functionalities are extended a lot. The configurations of dataRange
are still compatible in ECharts3, which automatically convert them to visualMap
. It is recommended to use visualMap
instead of dataRange
in ECharts3.
✦ The detailed configurations of visualMap are elaborated as follows. ✦
Piecewise visualMap component (visualMapPiecewise)
(Reference to the introduction of visual Map component (visualMap))
Sample:
Piecewise visualMap component works in one of the three modes:
the formatter tool for label.
If it was set as a string
, it refers to a template, for instance: aaaa{value}bbbb{value2}
, where {value}
and {value2}
represents the current seleted range of dataValues.
If it was set as a Function
, it refers to a callback function, for instance:
formatter: function (value, value2) {
return 'aaaa' + value + 'bbbb' + value2;
}
visualMap font size
visualMap font family
visualMap font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
visualMap font style
Options are:
'normal'
'italic'
'oblique'
visualMap text color.
This property is remained only for compatibility with ECharts2, and is not recommended in ECharts3. It is recommended to configure color in visualMap-piecewise.inRange, or visualMap-piecewise.outOfRange if needed.
If you persist in using it, the following issue should be noticed: the sequence of dataValues that are mapped to colorValues in property color
is from large
to small
, whereas that in visualMap-piecewise.inRange or visualMap-piecewise.outOfRange is from small
to large
.
border width of visualMap component, with unit: px.
border color of visualMap component.
background color of visualMap component.
visualMap-piecewise 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:
// Set padding to be 5
padding: 5
// Set the top and bottom paddings to be 5, and left and right paddings to be 10
padding: [5, 10]
// Set each of the four paddings seperately
padding: [
5, // up
10, // right
5, // down
10, // left
]
How to layout the visualMap component, 'horizontal'
or 'vertical'
.
Distance between visualMap component and the bottom side of the container.
bottom
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Distance between visualMap component and the right side of the container.
right
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Distance between visualMap component and the top side of the container.
top
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'top'
, 'middle'
, or 'bottom'
.
If the left
value is set to be 'top'
, 'middle'
, or 'bottom'
, then the component will be aligned automatically based on position.
Distance between visualMap component and the left side of the container.
left
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'left'
, 'center'
, or 'right'
.
If the left
value is set to be 'left'
, 'center'
, or 'right'
, then the component will be aligned automatically based on position.
z
value of all graghical elements in , which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in .
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
Property inRange
and outOfRange
can be set within property controller
, which means those inRange
and outOfRange
are only used on the controller (visualMap
component itself), but are not used on chart (series). This property is useful in some scenario that the view of controller need to be customized in detail.
Define visual channels that will mapped from dataValues that are out of selected range. (User can interact with visualMap component and make a seleced range by mouse or touch.)
Possiable visual channels includes:
symbol
: Type of symbol.symbolSize
: Symbol size.color
: Symbol color.colorAlpha
: Symbol alpha channel.opacity
: Opacity of symbol and others (like labels).colorLightness
: Lightness in HSL.colorSaturation
: Saturation in HSL.colorHue
: Hue in HSL.outOfRange
could customize visual channels both in series (by visualMap-piecewise.seriesIndex) and in visualMap-piecewise
itself.
For instance, if a visualMap-piecewise
component is used on a scatter chart, the mapping approach from data to color
(or symbol
, size
, ...) can be both customized in the scatter chart and visualMap-piecewise
component itself. See the code as following:
visualMap: [
{
...,
// Define visual channels both in target series and visualMap-piecewise component itself:
outOfRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
}
}
]
If you want to define visual channels for target series and visualMap-piecewise component separately, you should do as follows:
visualMap: [
{
...,
// Define visual channels only for target series.
target: {
outOfRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
}
},
// Define visual channels only for visualMap-piecewise component.
controller: {
outOfRange: {
symbolSize: [30, 100]
}
}
}
]
Or define as follows:
visualMap: [
{
...,
// Define visual channels for both target series and visualMap-piecewise component.
outOfRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
},
// Define visual channels only for visualMap-piecewise component, which
// will overlap the properties with the same name in the above common
// definition. (symbolSize is overlapped by [30, 100] while color
// keeps the original value)
controller: {
outOfRange: {
symbolSize: [30, 100]
}
}
}
]
✦ About visual channels ✦
Various visual channels (such as color
、symbolSize
and ect.) can be defined in outOfRange at the same time and all of them will be apopted.
Basically visual channels opacity
is recommended, rather than colorAlpha
. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.
There are two approaches of visual mapping supported: 'Linear Mapping' and 'Table Mapping'.
✦ Linear Mapping to visual channel ✦
Linear Mapping
means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of [visaulMap.min, visualMap.max]
to a given range of [visual value 1, visual value 2]
and obtaining a final value (say visual value) for visual channel rendering.
For instance, [visualMap.min, visualMap.max]
is set to be [0, 100]
, and there is series.data: [50, 10, 100]
. We intend to map them to an opacity
range [0.4, 1]
, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values [0.7, 0.44, 1]
, cooresponding to each dataValue.
We can also set the visual range inversely, such as opacity: [1, 0.4]
, and the final mapping result for the given series.data above will be [0.7, 0.96, 0.4]
.
Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by defualt, but not dataMin
and dataMax
in series.data。
How to configure visualMap component to do Linear Mapping?
When use visualMap-continuous, or
When use visualMap-piecewise and visualMap-piecewise.categories is not used.
About the value of visual channel (visual value):
Basically Array
is used to express the range of visual value, e.g., color: ['#333', '#777']
.
Single number
or single string
can also be used, which will be converted to an Array
by visualMap component. e.g.: opacity: 0.4
will be converted to opacity: [0.4, 0.4]
, color: '#333'
will be converted to color: ['#333', '#333']
.
For visual channel symbolSize
, opacity
, colorAlpha
, colorLightness
, colorSaturation
, colorHue
, the range of visual value is always in the form of: [visual value of visualMap.min, visual value of visualMap.max]
. For example, colorLightness: [0.8, 0.2]
means that the dataValue in series.data that equals to visualMap.min
(if any) will be mapped to lightness 0.8
, and the dataValue that equals to visualMap.max
(if any) will be mapped to lightness 0.2
, and other dataValues will be mapped by the linear calculateion based on the domain of [visualMap.min, visualMap.max]
and the range of [0.8, 0.2]
.
For visual channel color
, array is used, like: ['#333', '#78ab23', 'blue']
, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to visualMap.min
will be mapped onto '#333'
, the dataValue that equals to visualMap.max
will be mapped onto 'blue'
, and other dataValues will be piecewisely interpolated to get the final color.
For visual channel symbol
, array is used, like: ['circle', 'rect', 'diamond']
, where the dataValue that equals to visualMap.min
will be mapped onto 'circle'
, the dataValue that equals to visualMap.max
will be mapped onto 'diamond'
, and other dataValues will be caculated based on the numerical distance to visualMax.min
and to visualMap.max
, and mapped onto one of 'circle'
, 'rect'
, 'diamond'
.
About the possible value range of visual value:
opacity
、colorAlpha
、colorLightness
、colorSaturation
,visual value
possible value range is [0, 1]
。
colorHue
possible value range is [0, 360]
。
color
:
color can use RGB expression, like 'rgb(128, 128, 128)'
, or RGBA expression, like 'rgba(128, 128, 128, 0.5)'
, or Hex expression, like '#ccc'.
symbol
:
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
✦ Table Mapping to visual channel ✦
Table Mapping
could be used when dataValue (values in series.data, specified by visualMap.dimension) is enumerable and we intend to map them to visual value by looking up a given table.
For instance, in a visualMap-piecewise component, visualMap-piecewise.categories is set to ['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']
. And there is series.data: ['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']
. Then we can establish the lookup rule for color: color: {'Warden': 'red', 'Demon Hunter': 'black'}
, by which the visualMap
component will map dataValue
to color
.
How to configure visualMap
component to do Table Mapping
?
When use visualMap-piecewise and visualMap-piecewise.categoriesis set.
About the value of visual channel (visual value):
Generally Object
or Array
is used, for instance:
visualMap: {
type: 'piecewise',
// categories defines the items that to be displayed in visualMap-piecewise component.
categories: [
'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
],
outOfRange: {
// visual value can be an Object:
color: {
'Warden': 'red',
'Demon Hunter': 'black',
'': 'green' // Blank string means that except 'Warden' and 'Demon Hunter',
// all other dataValues should be mapped to 'green'.
}
// visual value can also be a single value,
// means that all dataValues should be mapped to the value.
color: 'green',
// visual value can also be a array, with the same length
// as the array of categories and one-one mapping onto it.
color: ['red', 'black', 'green', 'yellow', 'white']
}
}
✦ How to modity configurations of vsiual encoding? ✦
If you want to modify the configurations of visual encoding after chart been rendered (by invoke setOption
to set the initial option
), setOption
can be used again to modify configurations of visual encoding. For instance:
chart.setOption({
visualMap: {
inRange: {color: ['red', 'blue']}
}
});
Notice:
These visualMap properties (i.e. inRange
, outOfRange
, target
, controller
) do not support "merge", that is, anyone among them is modified when use setOption
again, all of the original values of them will not be kept but erased. The "merge" brings complication in implemnentation and understanding, whereas "erase all" normalize the practise: once you want to modify some visual values, you should pass all of them to setOption
, no matter they are to be changed.
This way, getOption() -> modify the gotten option -> setOption(modified option)
, is strongly not recommended, for instance:
// Not recommended approach, regardless of its correctness:
var option = chart.getOption(); // Get the entire option.
option.visualMap.inRange.color = ['red', 'blue']; // modify color, which is what you want.
// You have to modify those two properties, otherwise you will not get what you want.
option.visualMap.target.inRange.color = ['red', 'blue'];
option.visualMap.controller.inRange.color = ['red', 'blue'];
chart.setOption(option); // set the modified option back.
// You should not use this approach, but use the
// approach demostrated before this example.
Define visual channels that will mapped from dataValues that are in selected range. (User can interact with visualMap component and make a seleced range by mouse or touch.)
Possiable visual channels includes:
symbol
: Type of symbol.symbolSize
: Symbol size.color
: Symbol color.colorAlpha
: Symbol alpha channel.opacity
: Opacity of symbol and others (like labels).colorLightness
: Lightness in HSL.colorSaturation
: Saturation in HSL.colorHue
: Hue in HSL.inRange
could customize visual channels both in series (by visualMap-piecewise.seriesIndex) and in visualMap-piecewise
itself.
For instance, if a visualMap-piecewise
component is used on a scatter chart, the mapping approach from data to color
(or symbol
, size
, ...) can be both customized in the scatter chart and visualMap-piecewise
component itself. See the code as following:
visualMap: [
{
...,
// Define visual channels both in target series and visualMap-piecewise component itself:
inRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
}
}
]
If you want to define visual channels for target series and visualMap-piecewise component separately, you should do as follows:
visualMap: [
{
...,
// Define visual channels only for target series.
target: {
inRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
}
},
// Define visual channels only for visualMap-piecewise component.
controller: {
inRange: {
symbolSize: [30, 100]
}
}
}
]
Or define as follows:
visualMap: [
{
...,
// Define visual channels for both target series and visualMap-piecewise component.
inRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
},
// Define visual channels only for visualMap-piecewise component, which
// will overlap the properties with the same name in the above common
// definition. (symbolSize is overlapped by [30, 100] while color
// keeps the original value)
controller: {
inRange: {
symbolSize: [30, 100]
}
}
}
]
✦ About visual channels ✦
Various visual channels (such as color
、symbolSize
and ect.) can be defined in inRange at the same time and all of them will be apopted.
Basically visual channels opacity
is recommended, rather than colorAlpha
. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.
There are two approaches of visual mapping supported: 'Linear Mapping' and 'Table Mapping'.
✦ Linear Mapping to visual channel ✦
Linear Mapping
means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of [visaulMap.min, visualMap.max]
to a given range of [visual value 1, visual value 2]
and obtaining a final value (say visual value) for visual channel rendering.
For instance, [visualMap.min, visualMap.max]
is set to be [0, 100]
, and there is series.data: [50, 10, 100]
. We intend to map them to an opacity
range [0.4, 1]
, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values [0.7, 0.44, 1]
, cooresponding to each dataValue.
We can also set the visual range inversely, such as opacity: [1, 0.4]
, and the final mapping result for the given series.data above will be [0.7, 0.96, 0.4]
.
Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by defualt, but not dataMin
and dataMax
in series.data。
How to configure visualMap component to do Linear Mapping?
When use visualMap-continuous, or
When use visualMap-piecewise and visualMap-piecewise.categories is not used.
About the value of visual channel (visual value):
Basically Array
is used to express the range of visual value, e.g., color: ['#333', '#777']
.
Single number
or single string
can also be used, which will be converted to an Array
by visualMap component. e.g.: opacity: 0.4
will be converted to opacity: [0.4, 0.4]
, color: '#333'
will be converted to color: ['#333', '#333']
.
For visual channel symbolSize
, opacity
, colorAlpha
, colorLightness
, colorSaturation
, colorHue
, the range of visual value is always in the form of: [visual value of visualMap.min, visual value of visualMap.max]
. For example, colorLightness: [0.8, 0.2]
means that the dataValue in series.data that equals to visualMap.min
(if any) will be mapped to lightness 0.8
, and the dataValue that equals to visualMap.max
(if any) will be mapped to lightness 0.2
, and other dataValues will be mapped by the linear calculateion based on the domain of [visualMap.min, visualMap.max]
and the range of [0.8, 0.2]
.
For visual channel color
, array is used, like: ['#333', '#78ab23', 'blue']
, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to visualMap.min
will be mapped onto '#333'
, the dataValue that equals to visualMap.max
will be mapped onto 'blue'
, and other dataValues will be piecewisely interpolated to get the final color.
For visual channel symbol
, array is used, like: ['circle', 'rect', 'diamond']
, where the dataValue that equals to visualMap.min
will be mapped onto 'circle'
, the dataValue that equals to visualMap.max
will be mapped onto 'diamond'
, and other dataValues will be caculated based on the numerical distance to visualMax.min
and to visualMap.max
, and mapped onto one of 'circle'
, 'rect'
, 'diamond'
.
About the possible value range of visual value:
opacity
、colorAlpha
、colorLightness
、colorSaturation
,visual value
possible value range is [0, 1]
。
colorHue
possible value range is [0, 360]
。
color
:
color can use RGB expression, like 'rgb(128, 128, 128)'
, or RGBA expression, like 'rgba(128, 128, 128, 0.5)'
, or Hex expression, like '#ccc'.
symbol
:
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
✦ Table Mapping to visual channel ✦
Table Mapping
could be used when dataValue (values in series.data, specified by visualMap.dimension) is enumerable and we intend to map them to visual value by looking up a given table.
For instance, in a visualMap-piecewise component, visualMap-piecewise.categories is set to ['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']
. And there is series.data: ['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']
. Then we can establish the lookup rule for color: color: {'Warden': 'red', 'Demon Hunter': 'black'}
, by which the visualMap
component will map dataValue
to color
.
How to configure visualMap
component to do Table Mapping
?
When use visualMap-piecewise and visualMap-piecewise.categoriesis set.
About the value of visual channel (visual value):
Generally Object
or Array
is used, for instance:
visualMap: {
type: 'piecewise',
// categories defines the items that to be displayed in visualMap-piecewise component.
categories: [
'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
],
inRange: {
// visual value can be an Object:
color: {
'Warden': 'red',
'Demon Hunter': 'black',
'': 'green' // Blank string means that except 'Warden' and 'Demon Hunter',
// all other dataValues should be mapped to 'green'.
}
// visual value can also be a single value,
// means that all dataValues should be mapped to the value.
color: 'green',
// visual value can also be a array, with the same length
// as the array of categories and one-one mapping onto it.
color: ['red', 'black', 'green', 'yellow', 'white']
}
}
✦ How to modity configurations of vsiual encoding? ✦
If you want to modify the configurations of visual encoding after chart been rendered (by invoke setOption
to set the initial option
), setOption
can be used again to modify configurations of visual encoding. For instance:
chart.setOption({
visualMap: {
inRange: {color: ['red', 'blue']}
}
});
Notice:
These visualMap properties (i.e. inRange
, outOfRange
, target
, controller
) do not support "merge", that is, anyone among them is modified when use setOption
again, all of the original values of them will not be kept but erased. The "merge" brings complication in implemnentation and understanding, whereas "erase all" normalize the practise: once you want to modify some visual values, you should pass all of them to setOption
, no matter they are to be changed.
This way, getOption() -> modify the gotten option -> setOption(modified option)
, is strongly not recommended, for instance:
// Not recommended approach, regardless of its correctness:
var option = chart.getOption(); // Get the entire option.
option.visualMap.inRange.color = ['red', 'blue']; // modify color, which is what you want.
// You have to modify those two properties, otherwise you will not get what you want.
option.visualMap.target.inRange.color = ['red', 'blue'];
option.visualMap.controller.inRange.color = ['red', 'blue'];
chart.setOption(option); // set the modified option back.
// You should not use this approach, but use the
// approach demostrated before this example.
Notice: There is default color ['#f6efa6', '#d88273', '#bf444c']
in inRange
if you not set inRange
. If you dont want it, set inRange: {color: null}
to disable it.
Define visual channels that will mapped from dataValues that are out of selected range. (User can interact with visualMap component and make a seleced range by mouse or touch.)
Possiable visual channels includes:
symbol
: Type of symbol.symbolSize
: Symbol size.color
: Symbol color.colorAlpha
: Symbol alpha channel.opacity
: Opacity of symbol and others (like labels).colorLightness
: Lightness in HSL.colorSaturation
: Saturation in HSL.colorHue
: Hue in HSL.outOfRange
could customize visual channels both in series (by visualMap-piecewise.seriesIndex) and in visualMap-piecewise
itself.
For instance, if a visualMap-piecewise
component is used on a scatter chart, the mapping approach from data to color
(or symbol
, size
, ...) can be both customized in the scatter chart and visualMap-piecewise
component itself. See the code as following:
visualMap: [
{
...,
// Define visual channels both in target series and visualMap-piecewise component itself:
outOfRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
}
}
]
If you want to define visual channels for target series and visualMap-piecewise component separately, you should do as follows:
visualMap: [
{
...,
// Define visual channels only for target series.
target: {
outOfRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
}
},
// Define visual channels only for visualMap-piecewise component.
controller: {
outOfRange: {
symbolSize: [30, 100]
}
}
}
]
Or define as follows:
visualMap: [
{
...,
// Define visual channels for both target series and visualMap-piecewise component.
outOfRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
},
// Define visual channels only for visualMap-piecewise component, which
// will overlap the properties with the same name in the above common
// definition. (symbolSize is overlapped by [30, 100] while color
// keeps the original value)
controller: {
outOfRange: {
symbolSize: [30, 100]
}
}
}
]
✦ About visual channels ✦
Various visual channels (such as color
、symbolSize
and ect.) can be defined in outOfRange at the same time and all of them will be apopted.
Basically visual channels opacity
is recommended, rather than colorAlpha
. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.
There are two approaches of visual mapping supported: 'Linear Mapping' and 'Table Mapping'.
✦ Linear Mapping to visual channel ✦
Linear Mapping
means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of [visaulMap.min, visualMap.max]
to a given range of [visual value 1, visual value 2]
and obtaining a final value (say visual value) for visual channel rendering.
For instance, [visualMap.min, visualMap.max]
is set to be [0, 100]
, and there is series.data: [50, 10, 100]
. We intend to map them to an opacity
range [0.4, 1]
, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values [0.7, 0.44, 1]
, cooresponding to each dataValue.
We can also set the visual range inversely, such as opacity: [1, 0.4]
, and the final mapping result for the given series.data above will be [0.7, 0.96, 0.4]
.
Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by defualt, but not dataMin
and dataMax
in series.data。
How to configure visualMap component to do Linear Mapping?
When use visualMap-continuous, or
When use visualMap-piecewise and visualMap-piecewise.categories is not used.
About the value of visual channel (visual value):
Basically Array
is used to express the range of visual value, e.g., color: ['#333', '#777']
.
Single number
or single string
can also be used, which will be converted to an Array
by visualMap component. e.g.: opacity: 0.4
will be converted to opacity: [0.4, 0.4]
, color: '#333'
will be converted to color: ['#333', '#333']
.
For visual channel symbolSize
, opacity
, colorAlpha
, colorLightness
, colorSaturation
, colorHue
, the range of visual value is always in the form of: [visual value of visualMap.min, visual value of visualMap.max]
. For example, colorLightness: [0.8, 0.2]
means that the dataValue in series.data that equals to visualMap.min
(if any) will be mapped to lightness 0.8
, and the dataValue that equals to visualMap.max
(if any) will be mapped to lightness 0.2
, and other dataValues will be mapped by the linear calculateion based on the domain of [visualMap.min, visualMap.max]
and the range of [0.8, 0.2]
.
For visual channel color
, array is used, like: ['#333', '#78ab23', 'blue']
, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to visualMap.min
will be mapped onto '#333'
, the dataValue that equals to visualMap.max
will be mapped onto 'blue'
, and other dataValues will be piecewisely interpolated to get the final color.
For visual channel symbol
, array is used, like: ['circle', 'rect', 'diamond']
, where the dataValue that equals to visualMap.min
will be mapped onto 'circle'
, the dataValue that equals to visualMap.max
will be mapped onto 'diamond'
, and other dataValues will be caculated based on the numerical distance to visualMax.min
and to visualMap.max
, and mapped onto one of 'circle'
, 'rect'
, 'diamond'
.
About the possible value range of visual value:
opacity
、colorAlpha
、colorLightness
、colorSaturation
,visual value
possible value range is [0, 1]
。
colorHue
possible value range is [0, 360]
。
color
:
color can use RGB expression, like 'rgb(128, 128, 128)'
, or RGBA expression, like 'rgba(128, 128, 128, 0.5)'
, or Hex expression, like '#ccc'.
symbol
:
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
✦ Table Mapping to visual channel ✦
Table Mapping
could be used when dataValue (values in series.data, specified by visualMap.dimension) is enumerable and we intend to map them to visual value by looking up a given table.
For instance, in a visualMap-piecewise component, visualMap-piecewise.categories is set to ['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']
. And there is series.data: ['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']
. Then we can establish the lookup rule for color: color: {'Warden': 'red', 'Demon Hunter': 'black'}
, by which the visualMap
component will map dataValue
to color
.
How to configure visualMap
component to do Table Mapping
?
When use visualMap-piecewise and visualMap-piecewise.categoriesis set.
About the value of visual channel (visual value):
Generally Object
or Array
is used, for instance:
visualMap: {
type: 'piecewise',
// categories defines the items that to be displayed in visualMap-piecewise component.
categories: [
'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
],
outOfRange: {
// visual value can be an Object:
color: {
'Warden': 'red',
'Demon Hunter': 'black',
'': 'green' // Blank string means that except 'Warden' and 'Demon Hunter',
// all other dataValues should be mapped to 'green'.
}
// visual value can also be a single value,
// means that all dataValues should be mapped to the value.
color: 'green',
// visual value can also be a array, with the same length
// as the array of categories and one-one mapping onto it.
color: ['red', 'black', 'green', 'yellow', 'white']
}
}
✦ How to modity configurations of vsiual encoding? ✦
If you want to modify the configurations of visual encoding after chart been rendered (by invoke setOption
to set the initial option
), setOption
can be used again to modify configurations of visual encoding. For instance:
chart.setOption({
visualMap: {
inRange: {color: ['red', 'blue']}
}
});
Notice:
These visualMap properties (i.e. inRange
, outOfRange
, target
, controller
) do not support "merge", that is, anyone among them is modified when use setOption
again, all of the original values of them will not be kept but erased. The "merge" brings complication in implemnentation and understanding, whereas "erase all" normalize the practise: once you want to modify some visual values, you should pass all of them to setOption
, no matter they are to be changed.
This way, getOption() -> modify the gotten option -> setOption(modified option)
, is strongly not recommended, for instance:
// Not recommended approach, regardless of its correctness:
var option = chart.getOption(); // Get the entire option.
option.visualMap.inRange.color = ['red', 'blue']; // modify color, which is what you want.
// You have to modify those two properties, otherwise you will not get what you want.
option.visualMap.target.inRange.color = ['red', 'blue'];
option.visualMap.controller.inRange.color = ['red', 'blue'];
chart.setOption(option); // set the modified option back.
// You should not use this approach, but use the
// approach demostrated before this example.
Define visual channels that will mapped from dataValues that are in selected range. (User can interact with visualMap component and make a seleced range by mouse or touch.)
Possiable visual channels includes:
symbol
: Type of symbol.symbolSize
: Symbol size.color
: Symbol color.colorAlpha
: Symbol alpha channel.opacity
: Opacity of symbol and others (like labels).colorLightness
: Lightness in HSL.colorSaturation
: Saturation in HSL.colorHue
: Hue in HSL.inRange
could customize visual channels both in series (by visualMap-piecewise.seriesIndex) and in visualMap-piecewise
itself.
For instance, if a visualMap-piecewise
component is used on a scatter chart, the mapping approach from data to color
(or symbol
, size
, ...) can be both customized in the scatter chart and visualMap-piecewise
component itself. See the code as following:
visualMap: [
{
...,
// Define visual channels both in target series and visualMap-piecewise component itself:
inRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
}
}
]
If you want to define visual channels for target series and visualMap-piecewise component separately, you should do as follows:
visualMap: [
{
...,
// Define visual channels only for target series.
target: {
inRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
}
},
// Define visual channels only for visualMap-piecewise component.
controller: {
inRange: {
symbolSize: [30, 100]
}
}
}
]
Or define as follows:
visualMap: [
{
...,
// Define visual channels for both target series and visualMap-piecewise component.
inRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
},
// Define visual channels only for visualMap-piecewise component, which
// will overlap the properties with the same name in the above common
// definition. (symbolSize is overlapped by [30, 100] while color
// keeps the original value)
controller: {
inRange: {
symbolSize: [30, 100]
}
}
}
]
✦ About visual channels ✦
Various visual channels (such as color
、symbolSize
and ect.) can be defined in inRange at the same time and all of them will be apopted.
Basically visual channels opacity
is recommended, rather than colorAlpha
. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.
There are two approaches of visual mapping supported: 'Linear Mapping' and 'Table Mapping'.
✦ Linear Mapping to visual channel ✦
Linear Mapping
means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of [visaulMap.min, visualMap.max]
to a given range of [visual value 1, visual value 2]
and obtaining a final value (say visual value) for visual channel rendering.
For instance, [visualMap.min, visualMap.max]
is set to be [0, 100]
, and there is series.data: [50, 10, 100]
. We intend to map them to an opacity
range [0.4, 1]
, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values [0.7, 0.44, 1]
, cooresponding to each dataValue.
We can also set the visual range inversely, such as opacity: [1, 0.4]
, and the final mapping result for the given series.data above will be [0.7, 0.96, 0.4]
.
Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by defualt, but not dataMin
and dataMax
in series.data。
How to configure visualMap component to do Linear Mapping?
When use visualMap-continuous, or
When use visualMap-piecewise and visualMap-piecewise.categories is not used.
About the value of visual channel (visual value):
Basically Array
is used to express the range of visual value, e.g., color: ['#333', '#777']
.
Single number
or single string
can also be used, which will be converted to an Array
by visualMap component. e.g.: opacity: 0.4
will be converted to opacity: [0.4, 0.4]
, color: '#333'
will be converted to color: ['#333', '#333']
.
For visual channel symbolSize
, opacity
, colorAlpha
, colorLightness
, colorSaturation
, colorHue
, the range of visual value is always in the form of: [visual value of visualMap.min, visual value of visualMap.max]
. For example, colorLightness: [0.8, 0.2]
means that the dataValue in series.data that equals to visualMap.min
(if any) will be mapped to lightness 0.8
, and the dataValue that equals to visualMap.max
(if any) will be mapped to lightness 0.2
, and other dataValues will be mapped by the linear calculateion based on the domain of [visualMap.min, visualMap.max]
and the range of [0.8, 0.2]
.
For visual channel color
, array is used, like: ['#333', '#78ab23', 'blue']
, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to visualMap.min
will be mapped onto '#333'
, the dataValue that equals to visualMap.max
will be mapped onto 'blue'
, and other dataValues will be piecewisely interpolated to get the final color.
For visual channel symbol
, array is used, like: ['circle', 'rect', 'diamond']
, where the dataValue that equals to visualMap.min
will be mapped onto 'circle'
, the dataValue that equals to visualMap.max
will be mapped onto 'diamond'
, and other dataValues will be caculated based on the numerical distance to visualMax.min
and to visualMap.max
, and mapped onto one of 'circle'
, 'rect'
, 'diamond'
.
About the possible value range of visual value:
opacity
、colorAlpha
、colorLightness
、colorSaturation
,visual value
possible value range is [0, 1]
。
colorHue
possible value range is [0, 360]
。
color
:
color can use RGB expression, like 'rgb(128, 128, 128)'
, or RGBA expression, like 'rgba(128, 128, 128, 0.5)'
, or Hex expression, like '#ccc'.
symbol
:
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
✦ Table Mapping to visual channel ✦
Table Mapping
could be used when dataValue (values in series.data, specified by visualMap.dimension) is enumerable and we intend to map them to visual value by looking up a given table.
For instance, in a visualMap-piecewise component, visualMap-piecewise.categories is set to ['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']
. And there is series.data: ['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']
. Then we can establish the lookup rule for color: color: {'Warden': 'red', 'Demon Hunter': 'black'}
, by which the visualMap
component will map dataValue
to color
.
How to configure visualMap
component to do Table Mapping
?
When use visualMap-piecewise and visualMap-piecewise.categoriesis set.
About the value of visual channel (visual value):
Generally Object
or Array
is used, for instance:
visualMap: {
type: 'piecewise',
// categories defines the items that to be displayed in visualMap-piecewise component.
categories: [
'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
],
inRange: {
// visual value can be an Object:
color: {
'Warden': 'red',
'Demon Hunter': 'black',
'': 'green' // Blank string means that except 'Warden' and 'Demon Hunter',
// all other dataValues should be mapped to 'green'.
}
// visual value can also be a single value,
// means that all dataValues should be mapped to the value.
color: 'green',
// visual value can also be a array, with the same length
// as the array of categories and one-one mapping onto it.
color: ['red', 'black', 'green', 'yellow', 'white']
}
}
✦ How to modity configurations of vsiual encoding? ✦
If you want to modify the configurations of visual encoding after chart been rendered (by invoke setOption
to set the initial option
), setOption
can be used again to modify configurations of visual encoding. For instance:
chart.setOption({
visualMap: {
inRange: {color: ['red', 'blue']}
}
});
Notice:
These visualMap properties (i.e. inRange
, outOfRange
, target
, controller
) do not support "merge", that is, anyone among them is modified when use setOption
again, all of the original values of them will not be kept but erased. The "merge" brings complication in implemnentation and understanding, whereas "erase all" normalize the practise: once you want to modify some visual values, you should pass all of them to setOption
, no matter they are to be changed.
This way, getOption() -> modify the gotten option -> setOption(modified option)
, is strongly not recommended, for instance:
// Not recommended approach, regardless of its correctness:
var option = chart.getOption(); // Get the entire option.
option.visualMap.inRange.color = ['red', 'blue']; // modify color, which is what you want.
// You have to modify those two properties, otherwise you will not get what you want.
option.visualMap.target.inRange.color = ['red', 'blue'];
option.visualMap.controller.inRange.color = ['red', 'blue'];
chart.setOption(option); // set the modified option back.
// You should not use this approach, but use the
// approach demostrated before this example.
Notice: There is default color ['#f6efa6', '#d88273', '#bf444c']
in inRange
if you not set inRange
. If you dont want it, set inRange: {color: null}
to disable it.
hoverLink
enable highlight certain graphical elements of chart when mouse hovers on some place of visualMap
component that is coresponding to those graphical elements by visual mapping.
Inversely, when mouse hovers a graphical element of chart, its value label will be displayed on its corresponding position in visualMap
.
Specify visual mapping should be performed on which series, from which series.data is fetched.
All series are used by defualt.
Specify which dimension should be used to fetch dataValue from series.data, and then map them to visual channel.
series.data can be regarded as a two-dimensional array, for instance:
[
[12, 23, 43],
[12, 23, 43],
[43, 545, 65],
[92, 23, 33]
]
Each column of the above array is regarded as a dimension
. For example, when property dimension
is set to 1, the second column (i.e., 23, 23, 545, 23) is chosen to perform visual mapping.
Use the last dimension of data
by default.
Whether to show visualMap-piecewise component. If set as false
, visualMap-piecewise component will not show, but it can still perform visual mapping from dataValue to visual channel in chart.
Default symbol (the shape of graphical element). Possible values are:
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
The setting of visual channel symbol
can refers to visualMap-piecewise.inRange and visualMap-piecewise.outOfRange.
When they are not specified, itemSymbol
is adopted as the default value (but just used in visualMap component itself, not in chart).
Its the distance between each two graphical elements for pieces. The unit is px.
The distance between the ends of the graphical elements for pieces and the labels, with unit px. See visualMap-piecewise.text
The label text on both ends, such as ['High', 'Low']
. Sample.
You can understand the order of items in text
array just by a simple trial. See visualMap.inverse.
The rule, that labels will not show when text
is use, is retained for compatibility with ECharts2.
The layout relationship between the graphical elements for pieces and their labels. Possible values are:
'auto'
Decide automatically.'left'
The graphical elements for pieces are on the left and their labels are on the right.'right'
The graphical elements for pieces are on the right and their labels are on the left.The height of each graphical element that represents a piece.
The width of each graphical element that represents a piece.
The decimal precision of label, defaults to be 0 (no decimals).
In CONTINUOUS-AVERAGE mode (i.e., visualMap-piecewise.splitNumber is used), the rule of data layout is the same as visualMap-continuous.inverse, decimal percision auto adapts to series.data.
In CONTINUOUS-CUSTOMIZED mode (i.e., visualMap-piecewise.pieces is used) or CATEGORY mode (i.e., visualMap-piecewise.categories is used), decimal percision defaults to be 0 (no decimals):
Whether to inverse the layout of visualMap component.
In CONTINUOUS-AVERAGE mode (i.e., visualMap-piecewise.splitNumber is used), the rule of data layout is the same as visualMap-continuous.inverse.
In CONTINUOUS-CUSTOMIZED mode (i.e., visualMap-piecewise.pieces is used) or CATEGORY mode (i.e., visualMap-piecewise.categories is used), the layout of each piece is determined by the their order in the definition of pieces
or categories
, namely:
When inverse
is false
:
When visualMap.orient is 'vertical'
, pieces[0] or categories[0] correspond to upward side.
When visualMap.orient is 'horizontal'
, pieces[0] or categories[0] correspond to left side.
When inverse
is true
, the results are opposite to above.
If you just have a try, you'll know it is not so complicated.
Selected Mode could be:
'multiple'
(multiple selection).'single'
(single selection).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.
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.
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 is used) or CATEGORY mode (i.e., visualMap-piecewise.categories is used), max
and min
doesn't need to be specified.
In CONTINUOUS-AVERAGE mode (i.e., visualMap-piecewise.splitNumber is used), they should be specified explicitly, and be [0, 200]
by default, but not dataMin
and dataMax
in series.data.
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 is used) or CATEGORY mode (i.e., visualMap-piecewise.categories is used), max
and min
doesn't need to be specified.
In CONTINUOUS-AVERAGE mode (i.e., visualMap-piecewise.splitNumber is used), they should be specified explicitly, and be [0, 200]
by default, but not dataMin
and dataMax
in series.data.
When dataValues in series.data (specified by visualMap-piecewise.dimension) are discrete (or also known as category data or enumerable data), and we intend to perform Table Mapping from dataVale to visual channels, categories
is used to describe the entire enumeration of data. For instance:
categories: [
'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
],
You would realize the sequence in categories
by a simple trial. See more detailed rules in visualMap.inverse.
Used to customize how to slice continuous data, and some specific view style for some pieces. For instance:
pieces: [
// Range of a piece can be specified by property min and max,
// where min will be set as -Infinity if ignored,
// and max will be set as Infinity if ignored.
{min: 1500},
{min: 900, max: 1500},
{min: 310, max: 1000},
{min: 200, max: 300},
// Label of the piece can be specified.
{min: 10, max: 200, label: '10 to 200 (custom label) '},
// Color of the piece can be specified.
{value: 123, label: '123 (custom special color) ', color: 'grey'},
{max: 5}
]
These visual channel can be customized in each piece:
symbol
: Type of symbol.symbolSize
: Symbol size.color
: Symbol color.colorAlpha
: Symbol alpha channel.opacity
: Opacity of symbol and others (like labels).colorLightness
: Lightness in HSL.colorSaturation
: Saturation in HSL.colorHue
: Hue in HSL. (Notes: In ECharts2, pieces
is called splitList
, which is retained in ECharts3 for compatibility. But pieces
is recommended.)
You would realize the sequence in pieces
by a simple trial. See more detailed rules in visualMap.inverse.
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 and min.
If visualMap-piecewise.pieces or visualMap-piecewise.categories is set up, the splitNumber
will not be used any more.
Used to determine it is a piecewise visualMap component.
Continuous visualMap component (visualMapContinuous)
(See the introduction to visual Map component (visualMap))
Sample:
You can set visualMap.calculable to show or hide the hanldes, which is used to change the selected range in visualMapContinuous
.
the formatter tool for label.
If it was set as a string
, it refers to a template, for instance: aaaa{value}bbbb
, where {value}
represents the value of the edge of the seleted range.
If it was set as a Function
, it refers to a callback function, for instance:
formatter: function (value) {
return 'aaaa' + value + 'bbbb';
}
visualMap font size
visualMap font family
visualMap font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
visualMap font style
Options are:
'normal'
'italic'
'oblique'
visualMap text color.
This property is remained only for compatibility with ECharts2, and is not recommended in ECharts3. It is recommended to configure color in visualMap-continuous.inRange, or visualMap-continuous.outOfRange if needed.
If you persist in using it, the following issue should be noticed: the sequence of dataValues that are mapped to colorValues in property color
is from large
to small
, whereas that in visualMap-continuous.inRange or visualMap-continuous.outOfRange is from small
to large
.
border width of visualMap component, with unit: px.
border color of visualMap component.
background color of visualMap component.
visualMap-continuous 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:
// Set padding to be 5
padding: 5
// Set the top and bottom paddings to be 5, and left and right paddings to be 10
padding: [5, 10]
// Set each of the four paddings seperately
padding: [
5, // up
10, // right
5, // down
10, // left
]
How to layout the visualMap component, 'horizontal'
or 'vertical'
.
Distance between visualMap component and the bottom side of the container.
bottom
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Distance between visualMap component and the right side of the container.
right
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Distance between visualMap component and the top side of the container.
top
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'top'
, 'middle'
, or 'bottom'
.
If the left
value is set to be 'top'
, 'middle'
, or 'bottom'
, then the component will be aligned automatically based on position.
Distance between visualMap component and the left side of the container.
left
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'left'
, 'center'
, or 'right'
.
If the left
value is set to be 'left'
, 'center'
, or 'right'
, then the component will be aligned automatically based on position.
z
value of all graghical elements in , which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in .
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
Property inRange
and outOfRange
can be set within property controller
, which means those inRange
and outOfRange
are only used on the controller (visualMap
component itself), but are not used on chart (series). This property is useful in some scenario that the view of controller need to be customized in detail.
Define visual channels that will mapped from dataValues that are out of selected range. (User can interact with visualMap component and make a seleced range by mouse or touch.)
Possiable visual channels includes:
symbol
: Type of symbol.symbolSize
: Symbol size.color
: Symbol color.colorAlpha
: Symbol alpha channel.opacity
: Opacity of symbol and others (like labels).colorLightness
: Lightness in HSL.colorSaturation
: Saturation in HSL.colorHue
: Hue in HSL.outOfRange
could customize visual channels both in series (by visualMap-continuous.seriesIndex) and in visualMap-continuous
itself.
For instance, if a visualMap-continuous
component is used on a scatter chart, the mapping approach from data to color
(or symbol
, size
, ...) can be both customized in the scatter chart and visualMap-continuous
component itself. See the code as following:
visualMap: [
{
...,
// Define visual channels both in target series and visualMap-continuous component itself:
outOfRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
}
}
]
If you want to define visual channels for target series and visualMap-continuous component separately, you should do as follows:
visualMap: [
{
...,
// Define visual channels only for target series.
target: {
outOfRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
}
},
// Define visual channels only for visualMap-continuous component.
controller: {
outOfRange: {
symbolSize: [30, 100]
}
}
}
]
Or define as follows:
visualMap: [
{
...,
// Define visual channels for both target series and visualMap-continuous component.
outOfRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
},
// Define visual channels only for visualMap-continuous component, which
// will overlap the properties with the same name in the above common
// definition. (symbolSize is overlapped by [30, 100] while color
// keeps the original value)
controller: {
outOfRange: {
symbolSize: [30, 100]
}
}
}
]
✦ About visual channels ✦
Various visual channels (such as color
、symbolSize
and ect.) can be defined in outOfRange at the same time and all of them will be apopted.
Basically visual channels opacity
is recommended, rather than colorAlpha
. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.
There are two approaches of visual mapping supported: 'Linear Mapping' and 'Table Mapping'.
✦ Linear Mapping to visual channel ✦
Linear Mapping
means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of [visaulMap.min, visualMap.max]
to a given range of [visual value 1, visual value 2]
and obtaining a final value (say visual value) for visual channel rendering.
For instance, [visualMap.min, visualMap.max]
is set to be [0, 100]
, and there is series.data: [50, 10, 100]
. We intend to map them to an opacity
range [0.4, 1]
, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values [0.7, 0.44, 1]
, cooresponding to each dataValue.
We can also set the visual range inversely, such as opacity: [1, 0.4]
, and the final mapping result for the given series.data above will be [0.7, 0.96, 0.4]
.
Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by defualt, but not dataMin
and dataMax
in series.data。
How to configure visualMap component to do Linear Mapping?
When use visualMap-continuous, or
When use visualMap-piecewise and visualMap-piecewise.categories is not used.
About the value of visual channel (visual value):
Basically Array
is used to express the range of visual value, e.g., color: ['#333', '#777']
.
Single number
or single string
can also be used, which will be converted to an Array
by visualMap component. e.g.: opacity: 0.4
will be converted to opacity: [0.4, 0.4]
, color: '#333'
will be converted to color: ['#333', '#333']
.
For visual channel symbolSize
, opacity
, colorAlpha
, colorLightness
, colorSaturation
, colorHue
, the range of visual value is always in the form of: [visual value of visualMap.min, visual value of visualMap.max]
. For example, colorLightness: [0.8, 0.2]
means that the dataValue in series.data that equals to visualMap.min
(if any) will be mapped to lightness 0.8
, and the dataValue that equals to visualMap.max
(if any) will be mapped to lightness 0.2
, and other dataValues will be mapped by the linear calculateion based on the domain of [visualMap.min, visualMap.max]
and the range of [0.8, 0.2]
.
For visual channel color
, array is used, like: ['#333', '#78ab23', 'blue']
, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to visualMap.min
will be mapped onto '#333'
, the dataValue that equals to visualMap.max
will be mapped onto 'blue'
, and other dataValues will be piecewisely interpolated to get the final color.
For visual channel symbol
, array is used, like: ['circle', 'rect', 'diamond']
, where the dataValue that equals to visualMap.min
will be mapped onto 'circle'
, the dataValue that equals to visualMap.max
will be mapped onto 'diamond'
, and other dataValues will be caculated based on the numerical distance to visualMax.min
and to visualMap.max
, and mapped onto one of 'circle'
, 'rect'
, 'diamond'
.
About the possible value range of visual value:
opacity
、colorAlpha
、colorLightness
、colorSaturation
,visual value
possible value range is [0, 1]
。
colorHue
possible value range is [0, 360]
。
color
:
color can use RGB expression, like 'rgb(128, 128, 128)'
, or RGBA expression, like 'rgba(128, 128, 128, 0.5)'
, or Hex expression, like '#ccc'.
symbol
:
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
✦ Table Mapping to visual channel ✦
Table Mapping
could be used when dataValue (values in series.data, specified by visualMap.dimension) is enumerable and we intend to map them to visual value by looking up a given table.
For instance, in a visualMap-piecewise component, visualMap-piecewise.categories is set to ['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']
. And there is series.data: ['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']
. Then we can establish the lookup rule for color: color: {'Warden': 'red', 'Demon Hunter': 'black'}
, by which the visualMap
component will map dataValue
to color
.
How to configure visualMap
component to do Table Mapping
?
When use visualMap-piecewise and visualMap-piecewise.categoriesis set.
About the value of visual channel (visual value):
Generally Object
or Array
is used, for instance:
visualMap: {
type: 'piecewise',
// categories defines the items that to be displayed in visualMap-piecewise component.
categories: [
'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
],
outOfRange: {
// visual value can be an Object:
color: {
'Warden': 'red',
'Demon Hunter': 'black',
'': 'green' // Blank string means that except 'Warden' and 'Demon Hunter',
// all other dataValues should be mapped to 'green'.
}
// visual value can also be a single value,
// means that all dataValues should be mapped to the value.
color: 'green',
// visual value can also be a array, with the same length
// as the array of categories and one-one mapping onto it.
color: ['red', 'black', 'green', 'yellow', 'white']
}
}
✦ How to modity configurations of vsiual encoding? ✦
If you want to modify the configurations of visual encoding after chart been rendered (by invoke setOption
to set the initial option
), setOption
can be used again to modify configurations of visual encoding. For instance:
chart.setOption({
visualMap: {
inRange: {color: ['red', 'blue']}
}
});
Notice:
These visualMap properties (i.e. inRange
, outOfRange
, target
, controller
) do not support "merge", that is, anyone among them is modified when use setOption
again, all of the original values of them will not be kept but erased. The "merge" brings complication in implemnentation and understanding, whereas "erase all" normalize the practise: once you want to modify some visual values, you should pass all of them to setOption
, no matter they are to be changed.
This way, getOption() -> modify the gotten option -> setOption(modified option)
, is strongly not recommended, for instance:
// Not recommended approach, regardless of its correctness:
var option = chart.getOption(); // Get the entire option.
option.visualMap.inRange.color = ['red', 'blue']; // modify color, which is what you want.
// You have to modify those two properties, otherwise you will not get what you want.
option.visualMap.target.inRange.color = ['red', 'blue'];
option.visualMap.controller.inRange.color = ['red', 'blue'];
chart.setOption(option); // set the modified option back.
// You should not use this approach, but use the
// approach demostrated before this example.
Define visual channels that will mapped from dataValues that are in selected range. (User can interact with visualMap component and make a seleced range by mouse or touch.)
Possiable visual channels includes:
symbol
: Type of symbol.symbolSize
: Symbol size.color
: Symbol color.colorAlpha
: Symbol alpha channel.opacity
: Opacity of symbol and others (like labels).colorLightness
: Lightness in HSL.colorSaturation
: Saturation in HSL.colorHue
: Hue in HSL.inRange
could customize visual channels both in series (by visualMap-continuous.seriesIndex) and in visualMap-continuous
itself.
For instance, if a visualMap-continuous
component is used on a scatter chart, the mapping approach from data to color
(or symbol
, size
, ...) can be both customized in the scatter chart and visualMap-continuous
component itself. See the code as following:
visualMap: [
{
...,
// Define visual channels both in target series and visualMap-continuous component itself:
inRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
}
}
]
If you want to define visual channels for target series and visualMap-continuous component separately, you should do as follows:
visualMap: [
{
...,
// Define visual channels only for target series.
target: {
inRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
}
},
// Define visual channels only for visualMap-continuous component.
controller: {
inRange: {
symbolSize: [30, 100]
}
}
}
]
Or define as follows:
visualMap: [
{
...,
// Define visual channels for both target series and visualMap-continuous component.
inRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
},
// Define visual channels only for visualMap-continuous component, which
// will overlap the properties with the same name in the above common
// definition. (symbolSize is overlapped by [30, 100] while color
// keeps the original value)
controller: {
inRange: {
symbolSize: [30, 100]
}
}
}
]
✦ About visual channels ✦
Various visual channels (such as color
、symbolSize
and ect.) can be defined in inRange at the same time and all of them will be apopted.
Basically visual channels opacity
is recommended, rather than colorAlpha
. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.
There are two approaches of visual mapping supported: 'Linear Mapping' and 'Table Mapping'.
✦ Linear Mapping to visual channel ✦
Linear Mapping
means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of [visaulMap.min, visualMap.max]
to a given range of [visual value 1, visual value 2]
and obtaining a final value (say visual value) for visual channel rendering.
For instance, [visualMap.min, visualMap.max]
is set to be [0, 100]
, and there is series.data: [50, 10, 100]
. We intend to map them to an opacity
range [0.4, 1]
, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values [0.7, 0.44, 1]
, cooresponding to each dataValue.
We can also set the visual range inversely, such as opacity: [1, 0.4]
, and the final mapping result for the given series.data above will be [0.7, 0.96, 0.4]
.
Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by defualt, but not dataMin
and dataMax
in series.data。
How to configure visualMap component to do Linear Mapping?
When use visualMap-continuous, or
When use visualMap-piecewise and visualMap-piecewise.categories is not used.
About the value of visual channel (visual value):
Basically Array
is used to express the range of visual value, e.g., color: ['#333', '#777']
.
Single number
or single string
can also be used, which will be converted to an Array
by visualMap component. e.g.: opacity: 0.4
will be converted to opacity: [0.4, 0.4]
, color: '#333'
will be converted to color: ['#333', '#333']
.
For visual channel symbolSize
, opacity
, colorAlpha
, colorLightness
, colorSaturation
, colorHue
, the range of visual value is always in the form of: [visual value of visualMap.min, visual value of visualMap.max]
. For example, colorLightness: [0.8, 0.2]
means that the dataValue in series.data that equals to visualMap.min
(if any) will be mapped to lightness 0.8
, and the dataValue that equals to visualMap.max
(if any) will be mapped to lightness 0.2
, and other dataValues will be mapped by the linear calculateion based on the domain of [visualMap.min, visualMap.max]
and the range of [0.8, 0.2]
.
For visual channel color
, array is used, like: ['#333', '#78ab23', 'blue']
, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to visualMap.min
will be mapped onto '#333'
, the dataValue that equals to visualMap.max
will be mapped onto 'blue'
, and other dataValues will be piecewisely interpolated to get the final color.
For visual channel symbol
, array is used, like: ['circle', 'rect', 'diamond']
, where the dataValue that equals to visualMap.min
will be mapped onto 'circle'
, the dataValue that equals to visualMap.max
will be mapped onto 'diamond'
, and other dataValues will be caculated based on the numerical distance to visualMax.min
and to visualMap.max
, and mapped onto one of 'circle'
, 'rect'
, 'diamond'
.
About the possible value range of visual value:
opacity
、colorAlpha
、colorLightness
、colorSaturation
,visual value
possible value range is [0, 1]
。
colorHue
possible value range is [0, 360]
。
color
:
color can use RGB expression, like 'rgb(128, 128, 128)'
, or RGBA expression, like 'rgba(128, 128, 128, 0.5)'
, or Hex expression, like '#ccc'.
symbol
:
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
✦ Table Mapping to visual channel ✦
Table Mapping
could be used when dataValue (values in series.data, specified by visualMap.dimension) is enumerable and we intend to map them to visual value by looking up a given table.
For instance, in a visualMap-piecewise component, visualMap-piecewise.categories is set to ['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']
. And there is series.data: ['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']
. Then we can establish the lookup rule for color: color: {'Warden': 'red', 'Demon Hunter': 'black'}
, by which the visualMap
component will map dataValue
to color
.
How to configure visualMap
component to do Table Mapping
?
When use visualMap-piecewise and visualMap-piecewise.categoriesis set.
About the value of visual channel (visual value):
Generally Object
or Array
is used, for instance:
visualMap: {
type: 'piecewise',
// categories defines the items that to be displayed in visualMap-piecewise component.
categories: [
'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
],
inRange: {
// visual value can be an Object:
color: {
'Warden': 'red',
'Demon Hunter': 'black',
'': 'green' // Blank string means that except 'Warden' and 'Demon Hunter',
// all other dataValues should be mapped to 'green'.
}
// visual value can also be a single value,
// means that all dataValues should be mapped to the value.
color: 'green',
// visual value can also be a array, with the same length
// as the array of categories and one-one mapping onto it.
color: ['red', 'black', 'green', 'yellow', 'white']
}
}
✦ How to modity configurations of vsiual encoding? ✦
If you want to modify the configurations of visual encoding after chart been rendered (by invoke setOption
to set the initial option
), setOption
can be used again to modify configurations of visual encoding. For instance:
chart.setOption({
visualMap: {
inRange: {color: ['red', 'blue']}
}
});
Notice:
These visualMap properties (i.e. inRange
, outOfRange
, target
, controller
) do not support "merge", that is, anyone among them is modified when use setOption
again, all of the original values of them will not be kept but erased. The "merge" brings complication in implemnentation and understanding, whereas "erase all" normalize the practise: once you want to modify some visual values, you should pass all of them to setOption
, no matter they are to be changed.
This way, getOption() -> modify the gotten option -> setOption(modified option)
, is strongly not recommended, for instance:
// Not recommended approach, regardless of its correctness:
var option = chart.getOption(); // Get the entire option.
option.visualMap.inRange.color = ['red', 'blue']; // modify color, which is what you want.
// You have to modify those two properties, otherwise you will not get what you want.
option.visualMap.target.inRange.color = ['red', 'blue'];
option.visualMap.controller.inRange.color = ['red', 'blue'];
chart.setOption(option); // set the modified option back.
// You should not use this approach, but use the
// approach demostrated before this example.
Notice: There is default color ['#f6efa6', '#d88273', '#bf444c']
in inRange
if you not set inRange
. If you dont want it, set inRange: {color: null}
to disable it.
Define visual channels that will mapped from dataValues that are out of selected range. (User can interact with visualMap component and make a seleced range by mouse or touch.)
Possiable visual channels includes:
symbol
: Type of symbol.symbolSize
: Symbol size.color
: Symbol color.colorAlpha
: Symbol alpha channel.opacity
: Opacity of symbol and others (like labels).colorLightness
: Lightness in HSL.colorSaturation
: Saturation in HSL.colorHue
: Hue in HSL.outOfRange
could customize visual channels both in series (by visualMap-continuous.seriesIndex) and in visualMap-continuous
itself.
For instance, if a visualMap-continuous
component is used on a scatter chart, the mapping approach from data to color
(or symbol
, size
, ...) can be both customized in the scatter chart and visualMap-continuous
component itself. See the code as following:
visualMap: [
{
...,
// Define visual channels both in target series and visualMap-continuous component itself:
outOfRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
}
}
]
If you want to define visual channels for target series and visualMap-continuous component separately, you should do as follows:
visualMap: [
{
...,
// Define visual channels only for target series.
target: {
outOfRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
}
},
// Define visual channels only for visualMap-continuous component.
controller: {
outOfRange: {
symbolSize: [30, 100]
}
}
}
]
Or define as follows:
visualMap: [
{
...,
// Define visual channels for both target series and visualMap-continuous component.
outOfRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
},
// Define visual channels only for visualMap-continuous component, which
// will overlap the properties with the same name in the above common
// definition. (symbolSize is overlapped by [30, 100] while color
// keeps the original value)
controller: {
outOfRange: {
symbolSize: [30, 100]
}
}
}
]
✦ About visual channels ✦
Various visual channels (such as color
、symbolSize
and ect.) can be defined in outOfRange at the same time and all of them will be apopted.
Basically visual channels opacity
is recommended, rather than colorAlpha
. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.
There are two approaches of visual mapping supported: 'Linear Mapping' and 'Table Mapping'.
✦ Linear Mapping to visual channel ✦
Linear Mapping
means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of [visaulMap.min, visualMap.max]
to a given range of [visual value 1, visual value 2]
and obtaining a final value (say visual value) for visual channel rendering.
For instance, [visualMap.min, visualMap.max]
is set to be [0, 100]
, and there is series.data: [50, 10, 100]
. We intend to map them to an opacity
range [0.4, 1]
, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values [0.7, 0.44, 1]
, cooresponding to each dataValue.
We can also set the visual range inversely, such as opacity: [1, 0.4]
, and the final mapping result for the given series.data above will be [0.7, 0.96, 0.4]
.
Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by defualt, but not dataMin
and dataMax
in series.data。
How to configure visualMap component to do Linear Mapping?
When use visualMap-continuous, or
When use visualMap-piecewise and visualMap-piecewise.categories is not used.
About the value of visual channel (visual value):
Basically Array
is used to express the range of visual value, e.g., color: ['#333', '#777']
.
Single number
or single string
can also be used, which will be converted to an Array
by visualMap component. e.g.: opacity: 0.4
will be converted to opacity: [0.4, 0.4]
, color: '#333'
will be converted to color: ['#333', '#333']
.
For visual channel symbolSize
, opacity
, colorAlpha
, colorLightness
, colorSaturation
, colorHue
, the range of visual value is always in the form of: [visual value of visualMap.min, visual value of visualMap.max]
. For example, colorLightness: [0.8, 0.2]
means that the dataValue in series.data that equals to visualMap.min
(if any) will be mapped to lightness 0.8
, and the dataValue that equals to visualMap.max
(if any) will be mapped to lightness 0.2
, and other dataValues will be mapped by the linear calculateion based on the domain of [visualMap.min, visualMap.max]
and the range of [0.8, 0.2]
.
For visual channel color
, array is used, like: ['#333', '#78ab23', 'blue']
, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to visualMap.min
will be mapped onto '#333'
, the dataValue that equals to visualMap.max
will be mapped onto 'blue'
, and other dataValues will be piecewisely interpolated to get the final color.
For visual channel symbol
, array is used, like: ['circle', 'rect', 'diamond']
, where the dataValue that equals to visualMap.min
will be mapped onto 'circle'
, the dataValue that equals to visualMap.max
will be mapped onto 'diamond'
, and other dataValues will be caculated based on the numerical distance to visualMax.min
and to visualMap.max
, and mapped onto one of 'circle'
, 'rect'
, 'diamond'
.
About the possible value range of visual value:
opacity
、colorAlpha
、colorLightness
、colorSaturation
,visual value
possible value range is [0, 1]
。
colorHue
possible value range is [0, 360]
。
color
:
color can use RGB expression, like 'rgb(128, 128, 128)'
, or RGBA expression, like 'rgba(128, 128, 128, 0.5)'
, or Hex expression, like '#ccc'.
symbol
:
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
✦ Table Mapping to visual channel ✦
Table Mapping
could be used when dataValue (values in series.data, specified by visualMap.dimension) is enumerable and we intend to map them to visual value by looking up a given table.
For instance, in a visualMap-piecewise component, visualMap-piecewise.categories is set to ['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']
. And there is series.data: ['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']
. Then we can establish the lookup rule for color: color: {'Warden': 'red', 'Demon Hunter': 'black'}
, by which the visualMap
component will map dataValue
to color
.
How to configure visualMap
component to do Table Mapping
?
When use visualMap-piecewise and visualMap-piecewise.categoriesis set.
About the value of visual channel (visual value):
Generally Object
or Array
is used, for instance:
visualMap: {
type: 'piecewise',
// categories defines the items that to be displayed in visualMap-piecewise component.
categories: [
'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
],
outOfRange: {
// visual value can be an Object:
color: {
'Warden': 'red',
'Demon Hunter': 'black',
'': 'green' // Blank string means that except 'Warden' and 'Demon Hunter',
// all other dataValues should be mapped to 'green'.
}
// visual value can also be a single value,
// means that all dataValues should be mapped to the value.
color: 'green',
// visual value can also be a array, with the same length
// as the array of categories and one-one mapping onto it.
color: ['red', 'black', 'green', 'yellow', 'white']
}
}
✦ How to modity configurations of vsiual encoding? ✦
If you want to modify the configurations of visual encoding after chart been rendered (by invoke setOption
to set the initial option
), setOption
can be used again to modify configurations of visual encoding. For instance:
chart.setOption({
visualMap: {
inRange: {color: ['red', 'blue']}
}
});
Notice:
These visualMap properties (i.e. inRange
, outOfRange
, target
, controller
) do not support "merge", that is, anyone among them is modified when use setOption
again, all of the original values of them will not be kept but erased. The "merge" brings complication in implemnentation and understanding, whereas "erase all" normalize the practise: once you want to modify some visual values, you should pass all of them to setOption
, no matter they are to be changed.
This way, getOption() -> modify the gotten option -> setOption(modified option)
, is strongly not recommended, for instance:
// Not recommended approach, regardless of its correctness:
var option = chart.getOption(); // Get the entire option.
option.visualMap.inRange.color = ['red', 'blue']; // modify color, which is what you want.
// You have to modify those two properties, otherwise you will not get what you want.
option.visualMap.target.inRange.color = ['red', 'blue'];
option.visualMap.controller.inRange.color = ['red', 'blue'];
chart.setOption(option); // set the modified option back.
// You should not use this approach, but use the
// approach demostrated before this example.
Define visual channels that will mapped from dataValues that are in selected range. (User can interact with visualMap component and make a seleced range by mouse or touch.)
Possiable visual channels includes:
symbol
: Type of symbol.symbolSize
: Symbol size.color
: Symbol color.colorAlpha
: Symbol alpha channel.opacity
: Opacity of symbol and others (like labels).colorLightness
: Lightness in HSL.colorSaturation
: Saturation in HSL.colorHue
: Hue in HSL.inRange
could customize visual channels both in series (by visualMap-continuous.seriesIndex) and in visualMap-continuous
itself.
For instance, if a visualMap-continuous
component is used on a scatter chart, the mapping approach from data to color
(or symbol
, size
, ...) can be both customized in the scatter chart and visualMap-continuous
component itself. See the code as following:
visualMap: [
{
...,
// Define visual channels both in target series and visualMap-continuous component itself:
inRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
}
}
]
If you want to define visual channels for target series and visualMap-continuous component separately, you should do as follows:
visualMap: [
{
...,
// Define visual channels only for target series.
target: {
inRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
}
},
// Define visual channels only for visualMap-continuous component.
controller: {
inRange: {
symbolSize: [30, 100]
}
}
}
]
Or define as follows:
visualMap: [
{
...,
// Define visual channels for both target series and visualMap-continuous component.
inRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
},
// Define visual channels only for visualMap-continuous component, which
// will overlap the properties with the same name in the above common
// definition. (symbolSize is overlapped by [30, 100] while color
// keeps the original value)
controller: {
inRange: {
symbolSize: [30, 100]
}
}
}
]
✦ About visual channels ✦
Various visual channels (such as color
、symbolSize
and ect.) can be defined in inRange at the same time and all of them will be apopted.
Basically visual channels opacity
is recommended, rather than colorAlpha
. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.
There are two approaches of visual mapping supported: 'Linear Mapping' and 'Table Mapping'.
✦ Linear Mapping to visual channel ✦
Linear Mapping
means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of [visaulMap.min, visualMap.max]
to a given range of [visual value 1, visual value 2]
and obtaining a final value (say visual value) for visual channel rendering.
For instance, [visualMap.min, visualMap.max]
is set to be [0, 100]
, and there is series.data: [50, 10, 100]
. We intend to map them to an opacity
range [0.4, 1]
, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values [0.7, 0.44, 1]
, cooresponding to each dataValue.
We can also set the visual range inversely, such as opacity: [1, 0.4]
, and the final mapping result for the given series.data above will be [0.7, 0.96, 0.4]
.
Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by defualt, but not dataMin
and dataMax
in series.data。
How to configure visualMap component to do Linear Mapping?
When use visualMap-continuous, or
When use visualMap-piecewise and visualMap-piecewise.categories is not used.
About the value of visual channel (visual value):
Basically Array
is used to express the range of visual value, e.g., color: ['#333', '#777']
.
Single number
or single string
can also be used, which will be converted to an Array
by visualMap component. e.g.: opacity: 0.4
will be converted to opacity: [0.4, 0.4]
, color: '#333'
will be converted to color: ['#333', '#333']
.
For visual channel symbolSize
, opacity
, colorAlpha
, colorLightness
, colorSaturation
, colorHue
, the range of visual value is always in the form of: [visual value of visualMap.min, visual value of visualMap.max]
. For example, colorLightness: [0.8, 0.2]
means that the dataValue in series.data that equals to visualMap.min
(if any) will be mapped to lightness 0.8
, and the dataValue that equals to visualMap.max
(if any) will be mapped to lightness 0.2
, and other dataValues will be mapped by the linear calculateion based on the domain of [visualMap.min, visualMap.max]
and the range of [0.8, 0.2]
.
For visual channel color
, array is used, like: ['#333', '#78ab23', 'blue']
, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to visualMap.min
will be mapped onto '#333'
, the dataValue that equals to visualMap.max
will be mapped onto 'blue'
, and other dataValues will be piecewisely interpolated to get the final color.
For visual channel symbol
, array is used, like: ['circle', 'rect', 'diamond']
, where the dataValue that equals to visualMap.min
will be mapped onto 'circle'
, the dataValue that equals to visualMap.max
will be mapped onto 'diamond'
, and other dataValues will be caculated based on the numerical distance to visualMax.min
and to visualMap.max
, and mapped onto one of 'circle'
, 'rect'
, 'diamond'
.
About the possible value range of visual value:
opacity
、colorAlpha
、colorLightness
、colorSaturation
,visual value
possible value range is [0, 1]
。
colorHue
possible value range is [0, 360]
。
color
:
color can use RGB expression, like 'rgb(128, 128, 128)'
, or RGBA expression, like 'rgba(128, 128, 128, 0.5)'
, or Hex expression, like '#ccc'.
symbol
:
Icon types provided by ECharts includes
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
It can also be set to an image with 'image://url'
, in which url is the link to a picture.
Icons can be set to arbitrary vector path via 'path://'
in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. It will be set to be symbolSize
if it's a symbol
. Refer to SVG PathData for more information about format of path. You may export vector paths from tools like Adobe Illustrator.
✦ Table Mapping to visual channel ✦
Table Mapping
could be used when dataValue (values in series.data, specified by visualMap.dimension) is enumerable and we intend to map them to visual value by looking up a given table.
For instance, in a visualMap-piecewise component, visualMap-piecewise.categories is set to ['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']
. And there is series.data: ['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']
. Then we can establish the lookup rule for color: color: {'Warden': 'red', 'Demon Hunter': 'black'}
, by which the visualMap
component will map dataValue
to color
.
How to configure visualMap
component to do Table Mapping
?
When use visualMap-piecewise and visualMap-piecewise.categoriesis set.
About the value of visual channel (visual value):
Generally Object
or Array
is used, for instance:
visualMap: {
type: 'piecewise',
// categories defines the items that to be displayed in visualMap-piecewise component.
categories: [
'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
],
inRange: {
// visual value can be an Object:
color: {
'Warden': 'red',
'Demon Hunter': 'black',
'': 'green' // Blank string means that except 'Warden' and 'Demon Hunter',
// all other dataValues should be mapped to 'green'.
}
// visual value can also be a single value,
// means that all dataValues should be mapped to the value.
color: 'green',
// visual value can also be a array, with the same length
// as the array of categories and one-one mapping onto it.
color: ['red', 'black', 'green', 'yellow', 'white']
}
}
✦ How to modity configurations of vsiual encoding? ✦
If you want to modify the configurations of visual encoding after chart been rendered (by invoke setOption
to set the initial option
), setOption
can be used again to modify configurations of visual encoding. For instance:
chart.setOption({
visualMap: {
inRange: {color: ['red', 'blue']}
}
});
Notice:
These visualMap properties (i.e. inRange
, outOfRange
, target
, controller
) do not support "merge", that is, anyone among them is modified when use setOption
again, all of the original values of them will not be kept but erased. The "merge" brings complication in implemnentation and understanding, whereas "erase all" normalize the practise: once you want to modify some visual values, you should pass all of them to setOption
, no matter they are to be changed.
This way, getOption() -> modify the gotten option -> setOption(modified option)
, is strongly not recommended, for instance:
// Not recommended approach, regardless of its correctness:
var option = chart.getOption(); // Get the entire option.
option.visualMap.inRange.color = ['red', 'blue']; // modify color, which is what you want.
// You have to modify those two properties, otherwise you will not get what you want.
option.visualMap.target.inRange.color = ['red', 'blue'];
option.visualMap.controller.inRange.color = ['red', 'blue'];
chart.setOption(option); // set the modified option back.
// You should not use this approach, but use the
// approach demostrated before this example.
Notice: There is default color ['#f6efa6', '#d88273', '#bf444c']
in inRange
if you not set inRange
. If you dont want it, set inRange: {color: null}
to disable it.
hoverLink
enable highlight certain graphical elements of chart when mouse hovers on some place of visualMap
component that is coresponding to those graphical elements by visual mapping.
Inversely, when mouse hovers a graphical element of chart, its value label will be displayed on its corresponding position in visualMap
.
Specify visual mapping should be performed on which series, from which series.data is fetched.
All series are used by defualt.
Specify which dimension should be used to fetch dataValue from series.data, and then map them to visual channel.
series.data can be regarded as a two-dimensional array, for instance:
[
[12, 23, 43],
[12, 23, 43],
[43, 545, 65],
[92, 23, 33]
]
Each column of the above array is regarded as a dimension
. For example, when property dimension
is set to 1, the second column (i.e., 23, 23, 545, 23) is chosen to perform visual mapping.
Use the last dimension of data
by default.
Whether to show visualMap-continuous component. If set as false
, visualMap-continuous component will not show, but it can still perform visual mapping from dataValue to visual channel in chart.
The distance between the ends of the main bar and the label, with unit px. See visualMap-continuous.text
The label text on both ends, such as ['High', 'Low']
. sample.
You can understand the order of items in text
array just by a simple trial. See visualMap.inverse.
Specify the position of handles and labels, against the main bar. The possible values are:
'auto'
Decide automatically.'left'
The handles and labels are on the right, which is valid when orient
is set as 'horizontal'
.'right'
The handles and labels are on the left, which is valid when orient
is set as 'horizontal'
.'top'
the handles and labels are at the bottom, which is valid when orient
is set as 'vertical'
.'bottom'
the handles and labels are at the top, which is valid when orient
is set as 'vertical'
.The height of the main bar of visualMap component.
The width of the main bar of visualMap component.
The decimal precision of label, defaults to be 0 (no decimals).
Whether to inverse the layout of visualMap component.
As inverse
is false
, the layout direction is the same as catesian coordinate. That is:
'vertical'
, large data are placed at the top while small at the bottom.'horizontal'
, large data are placed on the right while small on the left.As inverse
is true
, the result is opposite.
Whether to update view in real time when dragging a handle.
If ture
, the chart view will be updated in real time when dragging.
If false
, the chart view will be updated at the end of the handle dragging.
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 is not set, and visualMap.calculable was set to be true
, visualMap.type will be automatically set as 'continuous'
, regardless of some settings such as visualMap-piecewise.splitNumber. Therefore, it is recommended to set visualMap.type explicitly, which avoids ambiguity.
Specify selected range, that is, the dataValue corresponding to the two handles. For example:
chart.setOption({
visualMap: {
min: 0,
max: 100,
// dataValue corresponding to the two handles.
range: [4, 15],
...
}
});
auto-adaption when min or max is modified by setOption
range
is not set (or set to null or undefined)For instance:
chart.setOption({visualMap: {min: 10, max: 300}}); // range is not set, then range is [min, max] by default, that is, [10, 300]。
chart.setOption({visualMap: {min: 0, max: 400}}); // Modify min and max using setOption again.
// Then range will be auto-modified to the new [min, max], that is, [0, 400].
range
is set explicitly, such as [10, 300]For instance:
chart.setOption({visualMap: {min: 10, max: 300, range: [20, 80]}}); // range is set to [20, 80].
chart.setOption({visualMap: {min: 0, max: 400}}); // min and max are modifies using setOption.
// Then range keep the original value ([20, 80]) but will not do auto-adaption。
chart.setOption({visualMap: {range: null}}); // Set range to null then.
// Then auto-adaption of range turns on and range is auto modified to [min, max], that is, [0, 400].
range
gotten by getOption
is always an Array
, but not null
or undefined
.
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.
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.
Used to determine that it is a continuous visualMap component.
dataZoom
component is used for zooming a specific area, which enables user to investigate data in detail, or get an overview of the data, or get rid of outlier points.
These types of dataZoom
component are supported:
dataZoomInside: Data zoom functionalities is embeded inside coordinate systems, enable user to zoom or roam coordinate system by mouse dragging, mouse move or finger touch (in touch screen).
dataZoomSlider: A special slider bar is provided, on which coordinate systems can be zoomed or roamed by mouse dragging or finger touch (in touch screen).
dataZoomSelect: A marquee tool is provided for zooming or roaming coordinate system. That is toolbox.feature.dataZoom, which can only be configured in toolbox.
Example:
✦ Relationship between dataZoom and axis ✦
Basically dataZoom
component operates "window" on axis to zoom or roam coordinate system.
Use dataZoom.xAxisIndex or dataZoom.yAxisIndex or dataZoom.radiusAxisIndex or dataZoom.angleAxisIndex to specify which axes are operated by
dataZoom
.
A single chart instance can contains several dataZoom
components, each of which controls different axes. The dataZoom
components that control the same axis will be automatically linked (i.e., all of them will be updated when one of them is updated by user action or API call).
✦ How dataZoom componets operates axes and data ✦
Generally dataZoom
component zoom or roam coordinate system through data filtering and set the windows of axes internally.
Its behaviours vary according to filtering mode settings (dataZoom.filterMode).
Possible values:
'filter': data that outside the window will be filtered, which may lead to some changes of windows of other axes.
'empty': data that outside the window will be set to NaN, which will not lead to changes of windows of other axes.
How to set filterMode
is up to users, depending on the requirments and scenarios. Expirically:
If only xAxis
or only yAxis
is controlled by dataZoom
, filterMode: 'filter'
is typically used, which enable the other axis auto adapte its window to the extent of the filtered data.
If both xAxis
and yAxis
are operated by dataZoom
:
If xAxis
and yAxis
should not effect mutually (e.g. a scatter chart with both axes on the type of 'value'
), they should be set to be filterMode: 'empty'
.
If xAxis
is the main axis and yAxis
is the auxiliary axis (or vise versa) (e.g., in a bar chart, when dragging dataZoomX
to change the window of xAxis, we need the yAxis to adapt to the clipped data, but when dragging dataZoomY
to change the window of yAxis, we need the xAxis not to be changed), in this case, xAxis
should be set to be fiterMode: 'filter'
, while yAxis
shoule be set to be fiterMode: 'empty'
.
It can be demostrated by the sample:
option = {
dataZoom: [
{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter'
},
{
id: 'dataZoomY',
type: 'slider',
yAxisIndex: [0],
filterMode: 'empty'
}
],
xAxis: {type: 'value'},
yAxis: {type: 'value'},
series{
type: 'bar',
data: [
// The first column corresponds to xAxis,
// and the second coloum corresponds to yAxis.
[12, 24, 36],
[90, 80, 70],
[3, 9, 27],
[1, 11, 111]
]
}
}
In the sample above, dataZoomX
is set as filterMode: 'filter'
. When use drags dataZoomX
(do not touch dataZoomY
) and the valueWindow of xAxis
is changed to [2, 50]
consequently, dataZoomX
travel the first column of series.data and filter items that out of the window. The series.data turns out to be:
[
[12, 24, 36],
// [90, 80, 70] This item is filtered, as 90 is out of the window.
[3, 9, 27]
// [1, 11, 111] This item is filtered, as 1 is out of the window.
]
Before filtering, the second column, which corresponds to yAxis, has values 24
, 80
, 9
, 11
. After filtering, only 24
and 9
are left. Then the extent of yAxis
is adjusted to adapt the two values (if yAxis.min
and yAxis.man
are not set).
So filterMode: 'filter'
can be used to enable the other axis to auto adapt the filtered data.
Then let's review the sample from the beginning, dataZoomY
is set as filterMode: 'empty'
. So if user drags dataZoomY
(do not touch dataZoomX
) and its window is changed to [10, 60]
consequently, dataZoomY
travels the second column of series.data and set NaN to all of the values that outside the window (NaN cause the graphical elements, i.e., bar elements, do not show, but sill hold the place). The series.data turns out to be:
[
[12, 24, 36],
[90, NaN, 70], // Set to NaN
[3, NaN, 27], // Set to NaN
[1, 11, 111]
]
In this case, the first colum (i.e., 12
, 90
, 3
, 1
, which corresponds to xAxis
), will not be changed at all. So dragging yAxis
will not change extent of xAxis
, which is good for requirements like outlier filtering.
See this example:
Moreover, when min
, max
of an axis is set (e.g., yAxis: {min: 0, max: 400}
), this extent of the axis will not be modified by the behaviour of dataZoom of other axis any more.
✦ How to set window ✦
You can set the current window in two forms:
percent value: see dataZoom.start and dataZoom.end.
absolute value: see dataZoom.startValue and dataZoom.endValue.
Notice: If use percent value form, and it is in the senario below, the result of dataZoom depends on the sequence of dataZoom definitions appearing in option
.
option = {
dataZoom: [
{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter', // Set as 'filter' so that the modification
// of window of xAxis willl effect the
// window of yAxis.
start: 30,
end: 70
},
{
id: 'dataZoomY',
type: 'slider',
yAxisIndex: [0],
filterMode: 'empty',
start: 20,
end: 80
}
],
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
// Notice there is no min or max set to
// restrict the view extent of yAxis.
},
series{
type: 'bar',
data: [
// The first column corresponds to xAxis,
// and the second column corresponds to yAxis.
[12, 24, 36],
[90, 80, 70],
[3, 9, 27],
[1, 11, 111]
]
}
}
What is the exact meaning of start: 20, end: 80
in dataZoomY
in the example above?
If yAxis.min
and yAxis.max
are set:
start: 20, end: 80
of dataZoomY
means: from 20%
to 80%
out of [yAxis.min, yAxis.max]
.
If one of yAxis.min
and yAxis.max
is not set, the corresponding edge of the full extend also follow rule as follows.
If yAxis.min
and yAxis.max
are not set:
If dataZoomX
is set to be filterMode: 'empty'
:
start: 20, end: 80
of dataZoomY
means: from 20%
to 80%
out of [dataMinY to dataMaxY]
of series.data (i.e., [9, 80]
in the example above).
If dataZoomX
is set to filterMode: 'filter'
:
Since dataZoomX
is defined before dataZoomY
, start: 30, end: 70
of dataZoomX
means: from 30%
to 70%
out of full series.data, whereas start: 20, end: 80
of dataZoomY
means: from 20%
to 80%
out of the series.data having been filtered by dataZoomX
.
If you want to change the process sequence, you can just change the sequence of the definitions apearing in option
.
Detailed configurations are listed as follows.
dataZoomSlider
(Please refer to the introduction of dataZoom.)
Distance between dataZoom-slider component and the bottom side of the container.
bottom
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Adaptive by default.
Distance between dataZoom-slider component and the right side of the container.
right
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Adaptive by default.
Distance between dataZoom-slider component and the top side of the container.
top
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'top'
, 'middle'
, or 'bottom'
.
If the left
value is set to be 'top'
, 'middle'
, or 'bottom'
, then the component will be aligned automatically based on position.
Distance between dataZoom-slider component and the left side of the container.
left
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'left'
, 'center'
, or 'right'
.
If the left
value is set to be 'left'
, 'center'
, or 'right'
, then the component will be aligned automatically based on position.
z
value of all graghical elements in , which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in .
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
Specify the frame rate of views refreshing, with unit millisecond (ms).
If animation set as true
and animationDurationUpdate set as bigger than 0
, you can keep throttle
as the default value 100
(or set it as a value bigger than 0
), otherwise it might be not smooth when dragging.
If animation set as false
or animationDurationUpdate set as 0
, and data size is not very large, and it seems to be not smooth when dragging, you can set throttle
as 0
to improve that.
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.
Specify whether the layout of dataZoom
component is horizontal or vertical. What's more, it indicates whether the horizontal axis or vertical axis is controlled by default in catesian coordinate system.
Valid values:
'horizontal'
: horizontal.
'vertical'
: vertical.
The end absolute value of the window, not works when dataZoom-slider.end is set.
dataZoom-slider.startValue and dataZoom-slider.endValue define the window of the data window in absolute value form.
Notice, if an axis is set to be category
, startValue
could be set as index
of the array of axis.data
or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.
The start absolute value of the window, not works when dataZoom-slider.start is set.
dataZoom-slider.startValue and dataZoom-slider.endValue define the window of the data window in absolute value form.
Notice, if an axis is set to be category
, startValue
could be set as index
of the array of axis.data
or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.
The end percentage of the window out of the data extent, in the range of 0 ~ 100.
dataZoom-slider.start and dataZoom-slider.end define the window of the data in percent form.
The start percentage of the window out of the data extent, in the range of 0 ~ 100.
dataZoom-slider.start and dataZoom-slider.end define the window of the data in percent form.
Generally dataZoom
component zoom or roam coordinate system through data filtering and set the windows of axes internally.
Its behaviours vary according to filtering mode settings (dataZoom.filterMode).
Possible values:
'filter': data that outside the window will be filtered, which may lead to some changes of windows of other axes.
'empty': data that outside the window will be set to NaN, which will not lead to changes of windows of other axes.
How to set filterMode
is up to users, depending on the requirments and scenarios. Expirically:
If only xAxis
or only yAxis
is controlled by dataZoom
, filterMode: 'filter'
is typically used, which enable the other axis auto adapte its window to the extent of the filtered data.
If both xAxis
and yAxis
are operated by dataZoom
:
If xAxis
and yAxis
should not effect mutually (e.g. a scatter chart with both axes on the type of 'value'
), they should be set to be filterMode: 'empty'
.
If xAxis
is the main axis and yAxis
is the auxiliary axis (or vise versa) (e.g., in a bar chart, when dragging dataZoomX
to change the window of xAxis, we need the yAxis to adapt to the clipped data, but when dragging dataZoomY
to change the window of yAxis, we need the xAxis not to be changed), in this case, xAxis
should be set to be fiterMode: 'filter'
, while yAxis
shoule be set to be fiterMode: 'empty'
.
It can be demostrated by the sample:
option = {
dataZoom: [
{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter'
},
{
id: 'dataZoomY',
type: 'slider',
yAxisIndex: [0],
filterMode: 'empty'
}
],
xAxis: {type: 'value'},
yAxis: {type: 'value'},
series{
type: 'bar',
data: [
// The first column corresponds to xAxis,
// and the second coloum corresponds to yAxis.
[12, 24, 36],
[90, 80, 70],
[3, 9, 27],
[1, 11, 111]
]
}
}
In the sample above, dataZoomX
is set as filterMode: 'filter'
. When use drags dataZoomX
(do not touch dataZoomY
) and the valueWindow of xAxis
is changed to [2, 50]
consequently, dataZoomX
travel the first column of series.data and filter items that out of the window. The series.data turns out to be:
[
[12, 24, 36],
// [90, 80, 70] This item is filtered, as 90 is out of the window.
[3, 9, 27]
// [1, 11, 111] This item is filtered, as 1 is out of the window.
]
Before filtering, the second column, which corresponds to yAxis, has values 24
, 80
, 9
, 11
. After filtering, only 24
and 9
are left. Then the extent of yAxis
is adjusted to adapt the two values (if yAxis.min
and yAxis.man
are not set).
So filterMode: 'filter'
can be used to enable the other axis to auto adapt the filtered data.
Then let's review the sample from the beginning, dataZoomY
is set as filterMode: 'empty'
. So if user drags dataZoomY
(do not touch dataZoomX
) and its window is changed to [10, 60]
consequently, dataZoomY
travels the second column of series.data and set NaN to all of the values that outside the window (NaN cause the graphical elements, i.e., bar elements, do not show, but sill hold the place). The series.data turns out to be:
[
[12, 24, 36],
[90, NaN, 70], // Set to NaN
[3, NaN, 27], // Set to NaN
[1, 11, 111]
]
In this case, the first colum (i.e., 12
, 90
, 3
, 1
, which corresponds to xAxis
), will not be changed at all. So dragging yAxis
will not change extent of xAxis
, which is good for requirements like outlier filtering.
See this example:
Specify which angleAxis is/are controlled by the dataZoom-slider
when polar coordinate system is used.
If it is set as a single number
, one axis is controlled, while if it is set as an Array
, multiple axes are controlled.
For example:
option: {
angleAxis: [
{...}, // The first angleAxis
{...}, // The second angleAxis
{...}, // The third angleAxis
{...} // The fourth angleAxis
],
dataZoom: [
{ // The first dataZoom component
angleAxisIndex: [0, 2] // Indicates that this dataZoom component
// controls the first and the third angleAxis
},
{ // The second dataZoom component
angleAxisIndex: 3 // indicates that this dataZoom component
// controls the fourth angleAxis
}
]
}
Specify which radiusAxis is/are controlled by the dataZoom-slider
when polar coordinate system is used.
If it is set as a single number
, one axis is controlled, while if it is set as an Array
, multiple axes are controlled.
For example:
option: {
radiusAxis: [
{...}, // The first radiusAxis
{...}, // The second radiusAxis
{...}, // The third radiusAxis
{...} // The fourth radiusAxis
],
dataZoom: [
{ // The first dataZoom component
radiusAxisIndex: [0, 2] // Indicates that this dataZoom component
// controls the first and the third radiusAxis
},
{ // The second dataZoom component
radiusAxisIndex: 3 // indicates that this dataZoom component
// controls the fourth radiusAxis
}
]
}
Specify which yAxis is/are controlled by the dataZoom-slider
when catesian coordinate system is used.
By default the first yAxis
that parallel to dataZoom
are controlled when dataZoom-slider.orient is set as 'vertical'
. But it is recommended to specify it explicitly but not use default value.
If it is set as a single number
, one axis is controlled, while if it is set as an Array
, multiple axes are controlled.
For example:
option: {
yAxis: [
{...}, // The first yAxis
{...}, // The second yAxis
{...}, // The third yAxis
{...} // The fourth yAxis
],
dataZoom: [
{ // The first dataZoom component
yAxisIndex: [0, 2] // Indicates that this dataZoom component
// controls the first and the third yAxis
},
{ // The second dataZoom component
yAxisIndex: 3 // indicates that this dataZoom component
// controls the fourth yAxis
}
]
}
Specify which xAxis is/are controlled by the dataZoom-slider
when catesian coordinate system is used.
By default the first xAxis
that parallel to dataZoom
are controlled when dataZoom-slider.orient is set as 'horizontal'
. But it is recommended to specify it explicitly but not use default value.
If it is set as a single number
, one axis is controlled, while if it is set as an Array
, multiple axes are controlled.
For example:
option: {
xAxis: [
{...}, // The first xAxis
{...}, // The second xAxis
{...}, // The third xAxis
{...} // The fourth xAxis
],
dataZoom: [
{ // The first dataZoom component
xAxisIndex: [0, 2] // Indicates that this dataZoom component
// controls the first and the third xAxis
},
{ // The second dataZoom component
xAxisIndex: 3 // indicates that this dataZoom component
// controls the fourth xAxis
}
]
}
dataZoom font size
dataZoom font family
dataZoom font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
dataZoom font style
Options are:
'normal'
'italic'
'oblique'
dataZoom text color.
Whether to update view while dragging. If it is set as false
, the view will be updated only at the end of dragging.
Whether to show data shadow in dataZoom-silder
component, to indicate the data tendency in brief.
Whether to show detail, that is, show the detailed data information when dragging.
The formatter tool for the label.
It is a template if in string
. For instance, aaaa{value}bbbb
, where {value}
will be replaced by the value of actual data value.
It is a callback function if in Function
. For example:
/**
* @param {*} value If axis.type is 'category', `value` is the index of axis.data.
* else `value` is current value.
* @param {strign} valueStr Inner formatted string.
* @return {string} Returns the label formatted.
*/
labelFormatter: function (value, valueStr) {
return 'aaa' + value + 'bbb';
}
Precision of label if in number form. By default, it is decided based on the number of data.
Style of handle. Please refer to area-simple example.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Border type, which can be 'solid'
, 'dashed'
, or 'dotted'
. 'solid'
by default.
border width. No border when it is set to be 0.
border color, whose format is similar to that of color
.
color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
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.
Icon shape of handle, which supports path string. Its default value is:
'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'
Refer to area-simple example for customized icon.
The color of border.
The color to fill selected area.
The style of data shadow.
Area style of shadow
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Fill color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Line style of shadow
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
The background color of the component.
Whether to show the component. If is set to be false
, it will not show, but its data filtering function still works.
dataZoomInside
Data zoom component of inside type.
Refer to dataZoom for more information.
The inside means it's inside the coordinates.
Specify the frame rate of views refreshing, with unit millisecond (ms).
If animation set as true
and animationDurationUpdate set as bigger than 0
, you can keep throttle
as the default value 100
(or set it as a value bigger than 0
), otherwise it might be not smooth when dragging.
If animation set as false
or animationDurationUpdate set as 0
, and data size is not very large, and it seems to be not smooth when dragging, you can set throttle
as 0
to improve that.
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.
Specify whether the layout of dataZoom
component is horizontal or vertical. What's more, it indicates whether the horizontal axis or vertical axis is controlled by default in catesian coordinate system.
Valid values:
'horizontal'
: horizontal.
'vertical'
: vertical.
The end absolute value of the window, not works when dataZoom-inside.end is set.
dataZoom-inside.startValue and dataZoom-inside.endValue define the window of the data window in absolute value form.
Notice, if an axis is set to be category
, startValue
could be set as index
of the array of axis.data
or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.
The start absolute value of the window, not works when dataZoom-inside.start is set.
dataZoom-inside.startValue and dataZoom-inside.endValue define the window of the data window in absolute value form.
Notice, if an axis is set to be category
, startValue
could be set as index
of the array of axis.data
or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.
The end percentage of the window out of the data extent, in the range of 0 ~ 100.
dataZoom-inside.start and dataZoom-inside.end define the window of the data in percent form.
The start percentage of the window out of the data extent, in the range of 0 ~ 100.
dataZoom-inside.start and dataZoom-inside.end define the window of the data in percent form.
Generally dataZoom
component zoom or roam coordinate system through data filtering and set the windows of axes internally.
Its behaviours vary according to filtering mode settings (dataZoom.filterMode).
Possible values:
'filter': data that outside the window will be filtered, which may lead to some changes of windows of other axes.
'empty': data that outside the window will be set to NaN, which will not lead to changes of windows of other axes.
How to set filterMode
is up to users, depending on the requirments and scenarios. Expirically:
If only xAxis
or only yAxis
is controlled by dataZoom
, filterMode: 'filter'
is typically used, which enable the other axis auto adapte its window to the extent of the filtered data.
If both xAxis
and yAxis
are operated by dataZoom
:
If xAxis
and yAxis
should not effect mutually (e.g. a scatter chart with both axes on the type of 'value'
), they should be set to be filterMode: 'empty'
.
If xAxis
is the main axis and yAxis
is the auxiliary axis (or vise versa) (e.g., in a bar chart, when dragging dataZoomX
to change the window of xAxis, we need the yAxis to adapt to the clipped data, but when dragging dataZoomY
to change the window of yAxis, we need the xAxis not to be changed), in this case, xAxis
should be set to be fiterMode: 'filter'
, while yAxis
shoule be set to be fiterMode: 'empty'
.
It can be demostrated by the sample:
option = {
dataZoom: [
{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter'
},
{
id: 'dataZoomY',
type: 'slider',
yAxisIndex: [0],
filterMode: 'empty'
}
],
xAxis: {type: 'value'},
yAxis: {type: 'value'},
series{
type: 'bar',
data: [
// The first column corresponds to xAxis,
// and the second coloum corresponds to yAxis.
[12, 24, 36],
[90, 80, 70],
[3, 9, 27],
[1, 11, 111]
]
}
}
In the sample above, dataZoomX
is set as filterMode: 'filter'
. When use drags dataZoomX
(do not touch dataZoomY
) and the valueWindow of xAxis
is changed to [2, 50]
consequently, dataZoomX
travel the first column of series.data and filter items that out of the window. The series.data turns out to be:
[
[12, 24, 36],
// [90, 80, 70] This item is filtered, as 90 is out of the window.
[3, 9, 27]
// [1, 11, 111] This item is filtered, as 1 is out of the window.
]
Before filtering, the second column, which corresponds to yAxis, has values 24
, 80
, 9
, 11
. After filtering, only 24
and 9
are left. Then the extent of yAxis
is adjusted to adapt the two values (if yAxis.min
and yAxis.man
are not set).
So filterMode: 'filter'
can be used to enable the other axis to auto adapt the filtered data.
Then let's review the sample from the beginning, dataZoomY
is set as filterMode: 'empty'
. So if user drags dataZoomY
(do not touch dataZoomX
) and its window is changed to [10, 60]
consequently, dataZoomY
travels the second column of series.data and set NaN to all of the values that outside the window (NaN cause the graphical elements, i.e., bar elements, do not show, but sill hold the place). The series.data turns out to be:
[
[12, 24, 36],
[90, NaN, 70], // Set to NaN
[3, NaN, 27], // Set to NaN
[1, 11, 111]
]
In this case, the first colum (i.e., 12
, 90
, 3
, 1
, which corresponds to xAxis
), will not be changed at all. So dragging yAxis
will not change extent of xAxis
, which is good for requirements like outlier filtering.
See this example:
Specify which angleAxis is/are controlled by the dataZoom-inside
when polar coordinate system is used.
If it is set as a single number
, one axis is controlled, while if it is set as an Array
, multiple axes are controlled.
For example:
option: {
angleAxis: [
{...}, // The first angleAxis
{...}, // The second angleAxis
{...}, // The third angleAxis
{...} // The fourth angleAxis
],
dataZoom: [
{ // The first dataZoom component
angleAxisIndex: [0, 2] // Indicates that this dataZoom component
// controls the first and the third angleAxis
},
{ // The second dataZoom component
angleAxisIndex: 3 // indicates that this dataZoom component
// controls the fourth angleAxis
}
]
}
Specify which radiusAxis is/are controlled by the dataZoom-inside
when polar coordinate system is used.
If it is set as a single number
, one axis is controlled, while if it is set as an Array
, multiple axes are controlled.
For example:
option: {
radiusAxis: [
{...}, // The first radiusAxis
{...}, // The second radiusAxis
{...}, // The third radiusAxis
{...} // The fourth radiusAxis
],
dataZoom: [
{ // The first dataZoom component
radiusAxisIndex: [0, 2] // Indicates that this dataZoom component
// controls the first and the third radiusAxis
},
{ // The second dataZoom component
radiusAxisIndex: 3 // indicates that this dataZoom component
// controls the fourth radiusAxis
}
]
}
Specify which yAxis is/are controlled by the dataZoom-inside
when catesian coordinate system is used.
By default the first yAxis
that parallel to dataZoom
are controlled when dataZoom-inside.orient is set as 'vertical'
. But it is recommended to specify it explicitly but not use default value.
If it is set as a single number
, one axis is controlled, while if it is set as an Array
, multiple axes are controlled.
For example:
option: {
yAxis: [
{...}, // The first yAxis
{...}, // The second yAxis
{...}, // The third yAxis
{...} // The fourth yAxis
],
dataZoom: [
{ // The first dataZoom component
yAxisIndex: [0, 2] // Indicates that this dataZoom component
// controls the first and the third yAxis
},
{ // The second dataZoom component
yAxisIndex: 3 // indicates that this dataZoom component
// controls the fourth yAxis
}
]
}
Specify which xAxis is/are controlled by the dataZoom-inside
when catesian coordinate system is used.
By default the first xAxis
that parallel to dataZoom
are controlled when dataZoom-inside.orient is set as 'horizontal'
. But it is recommended to specify it explicitly but not use default value.
If it is set as a single number
, one axis is controlled, while if it is set as an Array
, multiple axes are controlled.
For example:
option: {
xAxis: [
{...}, // The first xAxis
{...}, // The second xAxis
{...}, // The third xAxis
{...} // The fourth xAxis
],
dataZoom: [
{ // The first dataZoom component
xAxisIndex: [0, 2] // Indicates that this dataZoom component
// controls the first and the third xAxis
},
{ // The second dataZoom component
xAxisIndex: 3 // indicates that this dataZoom component
// controls the fourth xAxis
}
]
}
Whether disable inside zoom.
Coordinate for radar charts. This component is equal to the polar component in ECharts 2. Because the polar component in the echarts 3 is reconstructed to be the standard polar coordinate component, this component is renamed to be radar to avoid confusion.
Radar chart coordinate is different from polar coordinate, in that every axis indicator of the radar chart coordinate is an individual dimension. The style of indicator coordinate axis could be configured through the following configuration items, including name, axisLine, axisTick, axisLabel, splitLine, splitArea.
Here is a custom example of radar component.
Indicator of radar chart, which is used to assign multiple variables(dimensions) in radar chart. Here is the example.
indicator: [
{ name: 'Sales (sales) ', max: 6500},
{ name: 'Administration (Administration) ', max: 16000},
{ name: 'Information Technology (Information Technology) ', max: 30000},
{ name: 'Customer Support (Customer Support) ', max: 38000},
{ name: 'Development (Development) ', max: 52000},
{ name: 'Marketing (Marketing) ', max: 25000}
]
Split area of axis in grid area, not shown by default.
Split area style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Color of split area. SplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.
Whether to show the splitArea.
SplitLine of axis in grid area.
Whether to show the splitLine. Value axes are shown by default, while category axes are not.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
splitLine line type.
Options are:
'solid'
'dashed'
'dotted'
splitLine line width.
The color of the splitLine, which could be set separately.
SplitLine color could also be set in color array, which the split lines would take as their colors in turns.
Example:
splitLine: {
lineStyle: {
// Dark and light colors will be used in turns
color: ['#aaa', '#ddd']
}
}
Settings related to axis label.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
Color of axis label is set to be axisLine.lineStyle.color by default. Callback function is supported, in the following format:
(val: string) => Color
Parameter is the text of label, and return value is the color. See the following example:
textStyle: {
color: function (val) {
return val >= 0 ? 'green' : 'red';
}
}
Formatter of axis label, which supports string template and callback function.
Example:
// Use string template; template variable is the default label of axis {value}
formatter: '{value} kg'
// Use callback function; function parameters are axis index
formatter: function (value, index) {
// Formatted to be month/day; display year only in the first label
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (idx === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
The margin between the axis label and the axis line.
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.
Specifies whether the axis label faces Inside. False by default.
Whether to show the label of axis label or not.
Settings related to axis tick.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
axisTick line type.
Options are:
'solid'
'dashed'
'dotted'
axisTick line width.
Color of axis label is set to be axisLine.lineStyle.color by default.
The length of the axis tick.
Specifies whether the axis label faces Inside. False by default.
Align axis tick with label, which is available only when boundaryGap
is set to be true
in category axis. See the following picture:
Whether to show the axis tick.
Settings related to axis line.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line style line type.
Options are:
'solid'
'dashed'
'dotted'
line style line width.
line styleLine color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Whether to show the axis line or not.
Whether the labels of axis triggers and reacts to mouse events.
Parameters of event includes:
{
// Component type: xAxis, yAxis, radiusAxis, angleAxis
// Each of which has an attribute for index, e.g., xAxisIndex for xAxis
componentType: string,
// Value on axis before being formatted.
// Click on value label to trigger event.
value: '',
// Name of axis.
// Click on laben name to trigger event.
name: ''
}
True for axis that cannot be interacted with.
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.
Radar render type, in which 'polygon'
and 'circle'
are supported.
Segments of indicator axis.
Distance between the indicator's name and axis.
Name of radar chart.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
The formatter of indicator's name, in which the string and callback function are supported. See the following example:
// using string template, the template variable should be the indicator's name {value}
formatter: '【{value}】'
// using callback function, the first parameter is the indicator's name, and the second parameter id the indicator's cinfiguration item
formatter: function (value, indicator) {
return '【' + value + '】';
}
Whether to display the indicator's name.
The start angle of coordinate, which is the angle of the first indicator axis.
Radius of , the first of which is inner radius, and the second is outer radius.
Percentage is supported. When set in percentage, it's relative to the smaller size between height and width of the container.
Center position of , the first of which is the horizontal position, and the second is the vertical position.
Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.
Example:
// Set to absolute pixel values
center: [400, 300]
// Set to relative percent
center: ['50%', '50%']
z
value of all graghical elements in , which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in .
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
The angle axis in Polar Coordinate.
z
value of all graghical elements in Angle Axis, which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in Angle Axis.
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
Category data, available in type: 'category' axis.
Example:
// Name list of all categories
data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
// Each item could also be a specific configuration item.
// In this case, `value` is used as the category name.
data: [{
value: 'Monday',
// Highlight Monday
textStyle: {
fontSize: 20,
color: 'red'
}
}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
Split area of axis in grid area, not shown by default.
Split area style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Color of split area. SplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.
Whether to show the splitArea.
SplitLine of axis in grid area.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
splitLine line type.
Options are:
'solid'
'dashed'
'dotted'
splitLine line width.
The color of the splitLine, which could be set separately.
SplitLine color could also be set in color array, which the split lines would take as their colors in turns.
Example:
splitLine: {
lineStyle: {
// Dark and light colors will be used in turns
color: ['#aaa', '#ddd']
}
}
Whether to show the splitLine. Value axes are shown by default, while category axes are not.
Settings related to axis label.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
Color of axis label is set to be axisLine.lineStyle.color by default. Callback function is supported, in the following format:
(val: string) => Color
Parameter is the text of label, and return value is the color. See the following example:
textStyle: {
color: function (val) {
return val >= 0 ? 'green' : 'red';
}
}
Formatter of axis label, which supports string template and callback function.
Example:
// Use string template; template variable is the default label of axis {value}
formatter: '{value} kg'
// Use callback function; function parameters are axis index
formatter: function (value, index) {
// Formatted to be month/day; display year only in the first label
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (idx === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
The margin between the axis label and the axis line.
Specifies whether the axis label faces Inside. False by default.
Whether to show the label of axis label or not.
Settings related to axis tick.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
axisTick line type.
Options are:
'solid'
'dashed'
'dotted'
axisTick line width.
Color of axis label is set to be axisLine.lineStyle.color by default.
The length of the axis tick.
Specifies whether the axis label faces Inside. False by default.
Align axis tick with label, which is available only when boundaryGap
is set to be true
in category axis. See the following picture:
Whether to show the axis tick.
Settings related to axis line.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line style line type.
Options are:
'solid'
'dashed'
'dotted'
line style line width.
line styleLine color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Whether to show the axis line or not.
Whether the labels of axis triggers and reacts to mouse events.
Parameters of event includes:
{
// Component type: xAxis, yAxis, radiusAxis, angleAxis
// Each of which has an attribute for index, e.g., xAxisIndex for xAxis
componentType: string,
// Value on axis before being formatted.
// Click on value label to trigger event.
value: '',
// Name of axis.
// Click on laben name to trigger event.
name: ''
}
True for axis that cannot be interacted with.
Base of logarithm, which is valid only for numeric axes with type: 'log'.
Compulsively set segmentation interval for axis.
As 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 and max to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.
This is unavailable for category axis. Timestamp should be passed for type: 'time' axis. Logged value should be passed for type: 'log' axis.
Minimum gap between split lines.
For example, it can be set to be 1
to make sure axis label is show as integer.
{
minInterval: 1
}
It is available only for axis of type 'value'.
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.
It is available only in numerical axis, i.e., type: 'value'.
It specifies whether not to contain zero position of axis compulsively. When it is set to be true
, the axis may not contain zero position, which is useful in the scatter chart for both value axes.
This configuration item is unavailable when the min and max are set.
The maximum value of axis, unavailable in category axis.
It can be set to a special value 'dataMax'
so that the minimum value on this axis is set to be the maximum label.
It will be automatically computed to make sure axis tick is equally distributed when not set.
The minimun value of axis, unavailable in category 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.
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 is served only as a separation line, and labels and data appear only in the center part of two axis ticks, which is called band.
For non-category axis, including time, numerical value, and log axes, boundaryGap
is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting min and max.
Example:
boundaryGap: ['20%', '20%']
Type of axis
Option:
'value'
Numerical axis, suitable for continuous data.
'category'
Category axis, suitable for discrete category data. Data should only be set via data for this type.
'time'
Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.
'log'
Log axis, suitable for log data.
Whether the positive position of axis is in clockwise. True for clockwise by default.
The following shows an example with clockwise as false
.
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.
The index of angle axis in Polar Coordinate. The first axis is used by default.
Radial axis of polar coordinate.
z
value of all graghical elements in Radial axis, which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in Radial axis.
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
Category data, available in type: 'category' axis.
Example:
// Name list of all categories
data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
// Each item could also be a specific configuration item.
// In this case, `value` is used as the category name.
data: [{
value: 'Monday',
// Highlight Monday
textStyle: {
fontSize: 20,
color: 'red'
}
}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
Split area of axis in grid area, not shown by default.
Split area style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Color of split area. SplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.
Whether to show the splitArea.
SplitLine of axis in grid area.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
splitLine line type.
Options are:
'solid'
'dashed'
'dotted'
splitLine line width.
The color of the splitLine, which could be set separately.
SplitLine color could also be set in color array, which the split lines would take as their colors in turns.
Example:
splitLine: {
lineStyle: {
// Dark and light colors will be used in turns
color: ['#aaa', '#ddd']
}
}
Whether to show the splitLine. Value axes are shown by default, while category axes are not.
Settings related to axis label.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
Color of axis label is set to be axisLine.lineStyle.color by default. Callback function is supported, in the following format:
(val: string) => Color
Parameter is the text of label, and return value is the color. See the following example:
textStyle: {
color: function (val) {
return val >= 0 ? 'green' : 'red';
}
}
Formatter of axis label, which supports string template and callback function.
Example:
// Use string template; template variable is the default label of axis {value}
formatter: '{value} kg'
// Use callback function; function parameters are axis index
formatter: function (value, index) {
// Formatted to be month/day; display year only in the first label
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (idx === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
The margin between the axis label and the axis line.
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.
Specifies whether the axis label faces Inside. False by default.
Whether to show the label of axis label or not.
Settings related to axis tick.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
axisTick line type.
Options are:
'solid'
'dashed'
'dotted'
axisTick line width.
Color of axis label is set to be axisLine.lineStyle.color by default.
The length of the axis tick.
Specifies whether the axis label faces Inside. False by default.
Align axis tick with label, which is available only when boundaryGap
is set to be true
in category axis. See the following picture:
Whether to show the axis tick.
Settings related to axis line.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line style line type.
Options are:
'solid'
'dashed'
'dotted'
line style line width.
line styleLine color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Whether to show the axis line or not.
Whether the labels of axis triggers and reacts to mouse events.
Parameters of event includes:
{
// Component type: xAxis, yAxis, radiusAxis, angleAxis
// Each of which has an attribute for index, e.g., xAxisIndex for xAxis
componentType: string,
// Value on axis before being formatted.
// Click on value label to trigger event.
value: '',
// Name of axis.
// Click on laben name to trigger event.
name: ''
}
True for axis that cannot be interacted with.
Base of logarithm, which is valid only for numeric axes with type: 'log'.
Compulsively set segmentation interval for axis.
As 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 and max to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.
This is unavailable for category axis. Timestamp should be passed for type: 'time' axis. Logged value should be passed for type: 'log' axis.
Minimum gap between split lines.
For example, it can be set to be 1
to make sure axis label is show as integer.
{
minInterval: 1
}
It is available only for axis of type 'value'.
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.
It is available only in numerical axis, i.e., type: 'value'.
It specifies whether not to contain zero position of axis compulsively. When it is set to be true
, the axis may not contain zero position, which is useful in the scatter chart for both value axes.
This configuration item is unavailable when the min and max are set.
The maximum value of axis, unavailable in category axis.
It can be set to a special value 'dataMax'
so that the minimum value on this axis is set to be the maximum label.
It will be automatically computed to make sure axis tick is equally distributed when not set.
The minimun value of axis, unavailable in category 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.
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 is served only as a separation line, and labels and data appear only in the center part of two axis ticks, which is called band.
For non-category axis, including time, numerical value, and log axes, boundaryGap
is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting min and max.
Example:
boundaryGap: ['20%', '20%']
Whether axis is inversed. New option from ECharts 3.
Rotation of axis name.
Gap between axis name and axis line.
Text style of axis name.
axis name font size
axis name font family
axis name font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
axis name font style
Options are:
'normal'
'italic'
'oblique'
Color of axis name uses axisLine.lineStyle.color by default.
Location of axis name.
Options:
'start'
'middle'
'end'
Name of axis.
Type of axis
Option:
'value'
Numerical axis, suitable for continuous data.
'category'
Category axis, suitable for discrete category data. Data should only be set via data for this type.
'time'
Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.
'log'
Log axis, suitable for log data.
Index of radial axis in polor coordinate. It's the first axis by default.
Polar coordinate can be used in scatter and line chart. Every polar coordinate has an angleAxis and a radiusAxis.
For example:
Radius of Polar coordinate, the first of which is inner radius, and the second is outer radius.
Percentage is supported. When set in percentage, it's relative to the smaller size between height and width of the container.
Center position of Polar coordinate, the first of which is the horizontal position, and the second is the vertical position.
Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.
Example:
// Set to absolute pixel values
center: [400, 300]
// Set to relative percent
center: ['50%', '50%']
z
value of all graghical elements in , which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in .
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
The y axis in cartesian(rectangular) coordinate. Usually a single grid component can place at most 2 y axis, one on the left and another on the right. offset can be used to avoid overlap when you need to put more than two y axis.
z
value of all graghical elements in y axis, which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in y axis.
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
Category data, available in type: 'category' axis.
Example:
// Name list of all categories
data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
// Each item could also be a specific configuration item.
// In this case, `value` is used as the category name.
data: [{
value: 'Monday',
// Highlight Monday
textStyle: {
fontSize: 20,
color: 'red'
}
}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
Split area of axis in grid area, not shown by default.
Split area style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Color of split area. SplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.
Whether to show the splitArea.
SplitLine of axis in grid area.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
splitLine line type.
Options are:
'solid'
'dashed'
'dotted'
splitLine line width.
The color of the splitLine, which could be set separately.
SplitLine color could also be set in color array, which the split lines would take as their colors in turns.
Example:
splitLine: {
lineStyle: {
// Dark and light colors will be used in turns
color: ['#aaa', '#ddd']
}
}
Whether to show the splitLine. Value axes are shown by default, while category axes are not.
Settings related to axis label.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
Color of axis label is set to be axisLine.lineStyle.color by default. Callback function is supported, in the following format:
(val: string) => Color
Parameter is the text of label, and return value is the color. See the following example:
textStyle: {
color: function (val) {
return val >= 0 ? 'green' : 'red';
}
}
Formatter of axis label, which supports string template and callback function.
Example:
// Use string template; template variable is the default label of axis {value}
formatter: '{value} kg'
// Use callback function; function parameters are axis index
formatter: function (value, index) {
// Formatted to be month/day; display year only in the first label
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (idx === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
The margin between the axis label and the axis line.
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.
Specifies whether the axis label faces Inside. False by default.
Whether to show the label of axis label or not.
Settings related to axis tick.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
axisTick line type.
Options are:
'solid'
'dashed'
'dotted'
axisTick line width.
Color of axis label is set to be axisLine.lineStyle.color by default.
The length of the axis tick.
Specifies whether the axis label faces Inside. False by default.
Align axis tick with label, which is available only when boundaryGap
is set to be true
in category axis. See the following picture:
Whether to show the axis tick.
Settings related to axis line.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line style line type.
Options are:
'solid'
'dashed'
'dotted'
line style line width.
line styleLine color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
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.
Whether to show the axis line or not.
Whether the labels of axis triggers and reacts to mouse events.
Parameters of event includes:
{
// Component type: xAxis, yAxis, radiusAxis, angleAxis
// Each of which has an attribute for index, e.g., xAxisIndex for xAxis
componentType: string,
// Value on axis before being formatted.
// Click on value label to trigger event.
value: '',
// Name of axis.
// Click on laben name to trigger event.
name: ''
}
True for axis that cannot be interacted with.
Base of logarithm, which is valid only for numeric axes with type: 'log'.
Compulsively set segmentation interval for axis.
As 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 and max to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.
This is unavailable for category axis. Timestamp should be passed for type: 'time' axis. Logged value should be passed for type: 'log' axis.
Minimum gap between split lines.
For example, it can be set to be 1
to make sure axis label is show as integer.
{
minInterval: 1
}
It is available only for axis of type 'value'.
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.
It is available only in numerical axis, i.e., type: 'value'.
It specifies whether not to contain zero position of axis compulsively. When it is set to be true
, the axis may not contain zero position, which is useful in the scatter chart for both value axes.
This configuration item is unavailable when the min and max are set.
The maximum value of axis, unavailable in category axis.
It can be set to a special value 'dataMax'
so that the minimum value on this axis is set to be the maximum label.
It will be automatically computed to make sure axis tick is equally distributed when not set.
The minimun value of axis, unavailable in category 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.
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 is served only as a separation line, and labels and data appear only in the center part of two axis ticks, which is called band.
For non-category axis, including time, numerical value, and log axes, boundaryGap
is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting min and max.
Example:
boundaryGap: ['20%', '20%']
Whether axis is inversed. New option from ECharts 3.
Rotation of axis name.
Gap between axis name and axis line.
Text style of axis name.
axis name font size
axis name font family
axis name font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
axis name font style
Options are:
'normal'
'italic'
'oblique'
Color of axis name uses axisLine.lineStyle.color by default.
Location of axis name.
Options:
'start'
'middle'
'end'
Name of axis.
Type of axis
Option:
'value'
Numerical axis, suitable for continuous data.
'category'
Category axis, suitable for discrete category data. Data should only be set via data for this type.
'time'
Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.
'log'
Log axis, suitable for log data.
Offset of y axis relative to default position. Useful when multiple y axis has same position value.
the position of y axis.
options:
'left'
'right'
The first y axis in grid defaults to be the left ('left'
) of the grid, and the second y axis is on the other side against the first y axis.
The index of grid which the y axis belongs to. Defaults to be in the first grid.
The x axis in cartesian(rectangular) coordinate. Usually a single grid component can place at most 2 x axis, one on the bottom and another on the top. offset can be used to avoid overlap when you need to put more than two x axis.
z
value of all graghical elements in x axis, which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in x axis.
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
Category data, available in type: 'category' axis.
Example:
// Name list of all categories
data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
// Each item could also be a specific configuration item.
// In this case, `value` is used as the category name.
data: [{
value: 'Monday',
// Highlight Monday
textStyle: {
fontSize: 20,
color: 'red'
}
}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
Split area of axis in grid area, not shown by default.
Split area style.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Color of split area. SplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.
Whether to show the splitArea.
SplitLine of axis in grid area.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
splitLine line type.
Options are:
'solid'
'dashed'
'dotted'
splitLine line width.
The color of the splitLine, which could be set separately.
SplitLine color could also be set in color array, which the split lines would take as their colors in turns.
Example:
splitLine: {
lineStyle: {
// Dark and light colors will be used in turns
color: ['#aaa', '#ddd']
}
}
Whether to show the splitLine. Value axes are shown by default, while category axes are not.
Settings related to axis label.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
Color of axis label is set to be axisLine.lineStyle.color by default. Callback function is supported, in the following format:
(val: string) => Color
Parameter is the text of label, and return value is the color. See the following example:
textStyle: {
color: function (val) {
return val >= 0 ? 'green' : 'red';
}
}
Formatter of axis label, which supports string template and callback function.
Example:
// Use string template; template variable is the default label of axis {value}
formatter: '{value} kg'
// Use callback function; function parameters are axis index
formatter: function (value, index) {
// Formatted to be month/day; display year only in the first label
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (idx === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
The margin between the axis label and the axis line.
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.
Specifies whether the axis label faces Inside. False by default.
Whether to show the label of axis label or not.
Settings related to axis tick.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
axisTick line type.
Options are:
'solid'
'dashed'
'dotted'
axisTick line width.
Color of axis label is set to be axisLine.lineStyle.color by default.
The length of the axis tick.
Specifies whether the axis label faces Inside. False by default.
Align axis tick with label, which is available only when boundaryGap
is set to be true
in category axis. See the following picture:
Whether to show the axis tick.
Settings related to axis line.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line style line type.
Options are:
'solid'
'dashed'
'dotted'
line style line width.
line styleLine color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
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.
Whether to show the axis line or not.
Whether the labels of axis triggers and reacts to mouse events.
Parameters of event includes:
{
// Component type: xAxis, yAxis, radiusAxis, angleAxis
// Each of which has an attribute for index, e.g., xAxisIndex for xAxis
componentType: string,
// Value on axis before being formatted.
// Click on value label to trigger event.
value: '',
// Name of axis.
// Click on laben name to trigger event.
name: ''
}
True for axis that cannot be interacted with.
Base of logarithm, which is valid only for numeric axes with type: 'log'.
Compulsively set segmentation interval for axis.
As 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 and max to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.
This is unavailable for category axis. Timestamp should be passed for type: 'time' axis. Logged value should be passed for type: 'log' axis.
Minimum gap between split lines.
For example, it can be set to be 1
to make sure axis label is show as integer.
{
minInterval: 1
}
It is available only for axis of type 'value'.
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.
It is available only in numerical axis, i.e., type: 'value'.
It specifies whether not to contain zero position of axis compulsively. When it is set to be true
, the axis may not contain zero position, which is useful in the scatter chart for both value axes.
This configuration item is unavailable when the min and max are set.
The maximum value of axis, unavailable in category axis.
It can be set to a special value 'dataMax'
so that the minimum value on this axis is set to be the maximum label.
It will be automatically computed to make sure axis tick is equally distributed when not set.
The minimun value of axis, unavailable in category 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.
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 is served only as a separation line, and labels and data appear only in the center part of two axis ticks, which is called band.
For non-category axis, including time, numerical value, and log axes, boundaryGap
is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting min and max.
Example:
boundaryGap: ['20%', '20%']
Whether axis is inversed. New option from ECharts 3.
Rotation of axis name.
Gap between axis name and axis line.
Text style of axis name.
axis name font size
axis name font family
axis name font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
axis name font style
Options are:
'normal'
'italic'
'oblique'
Color of axis name uses axisLine.lineStyle.color by default.
Location of axis name.
Options:
'start'
'middle'
'end'
Name of axis.
Type of axis
Option:
'value'
Numerical axis, suitable for continuous data.
'category'
Category axis, suitable for discrete category data. Data should only be set via data for this type.
'time'
Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.
'log'
Log axis, suitable for log data.
Offset of x axis relative to default position. Useful when multiple x axis has same position value.
The position of x axis.
options:
'top'
'bottom'
The first x axis in grid defaults to be on the bottom of the grid, and the second x axis is on the other side against the first x axis.
The index of grid which the x axis belongs to. Defaults to be in the first grid.
Drawing grid in rectangular coordinate. In a single grid, at most two X and Y axes each is allowed. Line chart, bar chart, and scatter chart (bubble chart) can be drawn in grid.
In ECharts 2.x, there could only be one single grid component at most in a single echarts instance. But in ECharts 3, there is no limitation.
Following is an example of Anscombe Quartet:
Offset distance on the vertical direction of shadow.
Attention: This property works only if show: true
configured.
Offset distance on the horizontal direction of shadow.
Attention: This property works only if show: true
configured.
Shadow color. Support same format as color
.
Attention: This property works only if show: true
configured.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Attention: This property works only if show: true
is configured and backgroundColor
is defined other than transparent
.
Border width of grid.
Attention: Works only if show: true
is set.
Border color of grid. Support the same color format as backgroundColor.
Attention: Works only if show: true
is set.
Background color of grid, 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'
.
Attention: Works only if show: true
is set.
Whether the grid region contains axis tick label of axis. When the width of coordinate axis label is unknown, and there may not be enough space for a small container, you can set it to be true
to prevent the label from overflowing the container.
Height of grid component. Adaptive by default.
Width of grid component. Adaptive by default.
Distance between grid component and the bottom side of the container.
bottom
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Distance between grid component and the right side of the container.
right
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Distance between grid component and the top side of the container.
top
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'top'
, 'middle'
, or 'bottom'
.
If the left
value is set to be 'top'
, 'middle'
, or 'bottom'
, then the component will be aligned automatically based on position.
Distance between grid component and the left side of the container.
left
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'left'
, 'center'
, or 'right'
.
If the left
value is set to be 'left'
, 'center'
, or 'right'
, then the component will be aligned automatically based on position.
z
value of all graghical elements in , which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in .
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
Whether to show the grid in rectangular coordinate.
Tooltip component.
Configuration item for axis indicator, which is valid when trigger is 'axis'
.
It is valid when axisPointer.type is 'shadow'
.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Fill color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
It is valid when axisPointer.type is 'cross'
.
The text style of crosshair.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
It is valid when axisPointer.type is 'line'
.
Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
Offset distance on the vertical direction of shadow.
Offset distance on the horizontal direction of shadow.
Shadow color. Support same format as color
.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
line type.
Options are:
'solid'
'dashed'
'dotted'
line width.
Line color.
Color can be represented in RGB, for example
'rgb(128, 128, 128)'
. RGBA can be used when you need alpha channel, for example'rgba(128, 128, 128, 0.5)'
. You may also use hexadecimal format, for example'#ccc'
. Gradient color and texture are also supported besides single colors.// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If another parameter is passed in as `true`, then the first four parameters are in absolute pixel positions. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // color at 0% position }, { offset: 1, color: 'blue' // color at 100% position }], false) // Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // Fill with texture color: new echarts.graphic.Pattern( imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat )
Delay before updating animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for animation.
Time for animation to complete.
Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
See this example for more information.
Easing method used for the first animation. Varied easing effects can be found at easing effect example.
Duration of the first animation.
Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.
Whether to enable animation.
The coordinate axis, which could be 'x'
, 'y'
, 'radius'
, or 'angle'
. By default, category axis or time axis is used.
Indicator type.
Options:
'line'
line indicator
'cross'
crosshair indicator
'shadow'
shadow crosshair indicator
Extra CSS style for floating layer. The following is an example for adding shadow.
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
The text syle of tooltip's floating layer.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
The floating layer of tooltip 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:
// Set padding to be 5
padding: 5
// Set the top and bottom paddings to be 5, and left and right paddings to be 10
padding: [5, 10]
// Set each of the four paddings seperately
padding: [
5, // up
10, // right
5, // down
10, // left
]
The border width of tooltip's floating layer.
The border color of tooltip's floating layer.
The background color of tooltip's floating layer.
The content formatter of tooltip's floating layer which supports string template and callback function.
String template
The template variables are {a}
, {b}
, {c}
, {d}
and {e}
, which stands for series name, data name and data value and ect. When trigger is set to be 'axis'
, there may be data from multiple series. In this time, series index can be refered as {a0}
, {a1}
, or {a2}
.
{a}
, {b}
, {c}
, {d}
have different meanings for different series types:
Line (area) charts, bar (column) charts, K charts: {a}
for series name, {b}
for category name, {c}
for data value, {d}
for none;
Scatter (bubble) charts: {a}
for series name, {b}
for data name, {c}
for data value, {d}
for none;
Map: {a}
for series name, {b}
for area name, {c}
for merging data, {d}
for none;
Pie charts, gauge charts, funnel charts: {a}
for series name, {b}
for data item name, {c}
for data value, {d}
for percentage.
Example:
formatter: '{b0}: {c0}<br />{b1}: {c1}'
callback function
The format of callback function:
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
The first parameter params
is the data that the formatter needs. Its format is shown as follows:
{
componentType: 'series',
// Series type
seriesType: string,
// Series index in option.series
seriesIndex: number,
// Series name
seriesName: string,
// Data name, or category name
name: string,
// Data index in input data array
dataIndex: number,
// Original data as input
data: Object,
// Value of data
value: number|Array,
// Color of data
color: string,
// the percentage of pie chart
percent: number,
}
When trigger is 'axis'
, params
is the data array of multiple series.
Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.
The second parameter ticket
is the asynchronous callback flag which should be used along with the third parameter callback
when it is used.
The third parameter callback
is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket
and htm
as introduced above can be used to update tooltip with callback.
Example:
formatter: function (params, ticket, callback) {
$.get('detail?name=' + params.name, function (content) {
callback(ticket, toHTML(content));
});
return 'Loading';
}
The transition duration of tooltip's animation, in seconds. When it is set to be 0, it would move closely with the mouse.
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.
The position of the tooltip's floating layer, which would follow the position of mouse by default.
Options:
Array
Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.
Example:
// absolute position, which is 10px to the left side and 10px to the top side of the container
position: [10, 10]
// relative position, in the exact center of the container
position: ['50%', '50%']
Function
Callback function in the following form:
(point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object) => Array
The first parameter is mouse position, the second parameter is the same as formatter, the third parameter is DOM object of tooltip, the fourth parameter is valid only when mouse is on graphic elements, which stands for a bounding box with x
, y
, width
, and height
. Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
For example:
position: function (point, params, dom) {
// fixed at top
return [point[0], '10%'];
}
'inside'
Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'
.
'top'
Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'
.
'left'
Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'
.
'right'
Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'
.
'bottom'
Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'
.
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
.
Delay time for hiding tooltip, in ms. It will be invalid when alwaysShowContent is true
.
Delay time for showing tooltip, in ms. No delay by default, and it is not recommended to set. Only valid when triggerOn is set to be 'mousemove'
.
Whether to show tooltip content all the time. By default, it will be hidden after some time. It can be set to be true
to preserve displaying.
This attribute is newly added to ECharts 3.0.
Conditions to trigger tooltip. Options:
'mousemove'
Trigger when mouse moves.
'click'
Trigger when mouse click.
'none'
No triggering. Tooltip can be triggered and hidden manually by calling action.tooltip.showTip and action.tooltip.hideTip.
This attribute is new to ECharts 3.0.
Type of triggering.
Options:
'item'
Triggering by data item, which is mainly used for charts that don't have a category axis like scatter charts or pie charts.
'axis'
Triggering by axes, which is mainly used for charts that have category axes, like bar charts or line charts.
ECharts 2.x only supports axis trigger for category axis. In ECharts 3, it is supported for all types of axes in grid or polar. Also, you may assign axis with axisPointer.axis.
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.
Whether to show the tooltip component, including tooltip floating layer and axisPointer.
Legend component.
Legend component shows symbol, color and name of different series. You can click legends to toggle displaying series in the chart.
In ECharts 3, a single echarts instance may contain multiple legend components, which makes it easier for the layout of multiple legend components.
Legend text style.
font size
font family
font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
font style
Options are:
'normal'
'italic'
'oblique'
text color.
State table of selected legend.
example:
selected: {
// selected'series 1'
'series 1': true,
// unselected'series 2'
'series 2': false
}
Legend color when not selected.
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 disabled it.
Besides, it can be set to 'single'
or 'multiple'
, for single selection and multiple selection.
Formatter is used to format label of legend, which supports string template and callback function.
Example:
// using string template, the template variable is legend name {name}
formatter: 'Legend {name}'
// using callback function
formatter: function (name) {
return 'Legend ' + name;
}
Image height of legend symbol.
Image width of legend symbol.
The distance between each legend, horizontal distance in horizontal layout, and vertical distance in vertical layout.
legend 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:
// Set padding to be 5
padding: 5
// Set the top and bottom paddings to be 5, and left and right paddings to be 10
padding: [5, 10]
// Set each of the four paddings seperately
padding: [
5, // up
10, // right
5, // down
10, // left
]
Legend mrker and text aligning. By default, it automatically calculates from component location and orient. When left value of this component is 'right', and the vertical layout (orient is 'vertical'), it would be aligned to 'right'.
Option:
The layout orientation of legend.
Options:
Height of legend component. Adaptive by default.
Width of legend component. Adaptive by default.
Distance between legend component and the bottom side of the container.
bottom
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Adaptive by default.
Distance between legend component and the right side of the container.
right
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Adaptive by default.
Distance between legend component and the top side of the container.
top
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'top'
, 'middle'
, or 'bottom'
.
If the left
value is set to be 'top'
, 'middle'
, or 'bottom'
, then the component will be aligned automatically based on position.
Distance between legend component and the left side of the container.
left
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'left'
, 'center'
, or 'right'
.
If the left
value is set to be 'left'
, 'center'
, or 'right'
, then the component will be aligned automatically based on position.
z
value of all graghical elements in , which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in .
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
Title component, including main title and subtitle.
In ECharts 2.x, a single instance of ECharts could contains one title component at most. However, in ECharts 3, there could be one or more than one title components. It is more useful when multiple diagrams in one instance all need titles.
Here are some instances of different animation easing functions, among which every instance has a title component:
Offset distance on the vertical direction of shadow.
Attention: This property works only if show: true
configured.
Offset distance on the horizontal direction of shadow.
Attention: This property works only if show: true
configured.
Shadow color. Support same format as color
.
Attention: This property works only if show: true
configured.
Size of shadow blur. This attribute should be used along with shadowColor
,shadowOffsetX
, shadowOffsetY
to set shadow to component.
For example:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
Attention: This property works only if show: true
is configured and backgroundColor
is defined other than transparent
.
Border width of title.
Border color of title. Support the same color format as backgroundColor.
Background color of title, 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'
.
Distance between grid component and the bottom side of the container.
bottom
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Adaptive by default.
Distance between grid component and the right side of the container.
right
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
.
Adaptive by default.
Distance between grid component and the top side of the container.
top
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'top'
, 'middle'
, or 'bottom'
.
If the left
value is set to be 'top'
, 'middle'
, or 'bottom'
, then the component will be aligned automatically based on position.
Distance between grid component and the left side of the container.
left
value can be instant pixel value like 20
; it can also be percentage value relative to container width like '20%'
; and it can also be 'left'
, 'center'
, or 'right'
.
If the left
value is set to be 'left'
, 'center'
, or 'right'
, then the component will be aligned automatically based on position.
z
value of all graghical elements in , which controls order of drawing graphical components. Components with smaller z
values may be overwritten by those with larger z
values.
z
has a lower priority to zlevel
, and will not create new Canvas.
zlevel
value of all graghical elements in .
zlevel
is used to make layers with Canvas. Graphical elements with different zlevel
values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate zlevel
. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger zlevel
will be placed on Canvases with smaller zlevel
.
The gap between the main title and subtitle.
title 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:
// Set padding to be 5
padding: 5
// Set the top and bottom paddings to be 5, and left and right paddings to be 10
padding: [5, 10]
// Set each of the four paddings seperately
padding: [
5, // up
10, // right
5, // down
10, // left
]
subtitle font size
subtitle font family
subtitle font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
subtitle font style
Options are:
'normal'
'italic'
'oblique'
subtitle text color.
Open the hyper link of subtitle in specified tab, options:
'self'
opening it in current tab
'blank'
opening it in a new tab
The hyper link of subtitle text.
Subtitle text, supporting for \n
for newlines.
Setting the title text align vertically, supporting 'top','middle','bottom', the default value is based on the title position.
Setting the title text align horizontally, supporting 'left','center','right', the default value is based on the title position.
main title font size
main title font family
main title font thick weight
Options are:
'normal'
'bold'
'bolder'
'lighter'
main title font style
Options are:
'normal'
'italic'
'oblique'
main title text color.
Open the hyper link of main title in specified tab.
options:
'self'
opening it in current tab
'blank'
opening it in a new tab
The hyper link of main title text.
The main title text, supporting for \n
for newlines.
It specifies whether to show the title component.