ECharts Document

animationDelayUpdate

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.

animationEasingUpdate

Easing method used for animation.

animationDurationUpdate

Time for animation to complete.

animationDelay

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.

animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

animationDuration

Duration of the first animation.

animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

animation

Whether to enable animation.

textStyle

Global font style.

textStyle.fontSize

font size

textStyle.fontFamily

font family

textStyle.fontWeight

font thick weight

Options are:

textStyle.fontStyle

font style

Options are:

textStyle.color

text color.

backgroundColor

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
)

color

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']

series.gauge

Gauge chart

Example:

series.gauge.animationDelayUpdate

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.

series.gauge.animationEasingUpdate

Easing method used for animation.

series.gauge.animationDurationUpdate

Time for animation to complete.

series.gauge.animationDelay

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.

series.gauge.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.gauge.animationDuration

Duration of the first animation.

series.gauge.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.gauge.animation

Whether to enable animation.

series.gauge.markArea

Used to mark an area in chart. For example, mark a time interval.

series.gauge.markArea.animationDelayUpdate

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.

series.gauge.markArea.animationEasingUpdate

Easing method used for animation.

series.gauge.markArea.animationDurationUpdate

Time for animation to complete.

series.gauge.markArea.animationDelay

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.

series.gauge.markArea.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.gauge.markArea.animationDuration

Duration of the first animation.

series.gauge.markArea.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.gauge.markArea.animation

Whether to enable animation.

series.gauge.markArea.data

The scope of the area is defined by data, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:

  1. Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 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%'
        }
    ]
]

series.gauge.markArea.data.1

Specify the right-bottom point.

series.gauge.markArea.data.1.label

Label style of the item. Label style of start point and end point will be merged together.

series.gauge.markArea.data.1.label.emphasis.textStyle

Label font style.

series.gauge.markArea.data.1.label.emphasis.textStyle.fontSize

font size

series.gauge.markArea.data.1.label.emphasis.textStyle.fontFamily

font family

series.gauge.markArea.data.1.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.gauge.markArea.data.1.label.emphasis.textStyle.fontStyle

font style

Options are:

series.gauge.markArea.data.1.label.emphasis.textStyle.color

text color.

series.gauge.markArea.data.1.label.emphasis.position

Label position.

Followings are the options:

series.gauge.markArea.data.1.label.emphasis.show

Whether to show label.

series.gauge.markArea.data.1.label.normal.textStyle

Label font style.

series.gauge.markArea.data.1.label.normal.textStyle.fontSize

font size

series.gauge.markArea.data.1.label.normal.textStyle.fontFamily

font family

series.gauge.markArea.data.1.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.gauge.markArea.data.1.label.normal.textStyle.fontStyle

font style

Options are:

series.gauge.markArea.data.1.label.normal.textStyle.color

text color.

series.gauge.markArea.data.1.label.normal.position

Label position.

Followings are the options:

series.gauge.markArea.data.1.label.normal.show

Whether to show label.

series.gauge.markArea.data.1.itemStyle

Style of the item. itemStyle of start point and end point will be merged together.

series.gauge.markArea.data.1.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.gauge.markArea.data.1.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.gauge.markArea.data.1.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.gauge.markArea.data.1.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.gauge.markArea.data.1.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markArea.data.1.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.gauge.markArea.data.1.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.gauge.markArea.data.1.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.gauge.markArea.data.1.itemStyle.emphasis.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
)

series.gauge.markArea.data.1.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.gauge.markArea.data.1.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.gauge.markArea.data.1.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.gauge.markArea.data.1.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.gauge.markArea.data.1.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markArea.data.1.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.gauge.markArea.data.1.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.gauge.markArea.data.1.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.gauge.markArea.data.1.itemStyle.normal.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
)

series.gauge.markArea.data.1.value

value of the item, not necessary.

series.gauge.markArea.data.1.y

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.gauge.markArea.data.1.x

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.gauge.markArea.data.0

Specify the left-top point.

series.gauge.markArea.data.0.label

Label style of the item. Label style of start point and end point will be merged together.

series.gauge.markArea.data.0.label.emphasis.textStyle

Label font style.

series.gauge.markArea.data.0.label.emphasis.textStyle.fontSize

font size

series.gauge.markArea.data.0.label.emphasis.textStyle.fontFamily

font family

series.gauge.markArea.data.0.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.gauge.markArea.data.0.label.emphasis.textStyle.fontStyle

font style

Options are:

series.gauge.markArea.data.0.label.emphasis.textStyle.color

text color.

series.gauge.markArea.data.0.label.emphasis.position

Label position.

Followings are the options:

series.gauge.markArea.data.0.label.emphasis.show

Whether to show label.

series.gauge.markArea.data.0.label.normal.textStyle

Label font style.

series.gauge.markArea.data.0.label.normal.textStyle.fontSize

font size

series.gauge.markArea.data.0.label.normal.textStyle.fontFamily

font family

series.gauge.markArea.data.0.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.gauge.markArea.data.0.label.normal.textStyle.fontStyle

font style

Options are:

series.gauge.markArea.data.0.label.normal.textStyle.color

text color.

series.gauge.markArea.data.0.label.normal.position

Label position.

Followings are the options:

series.gauge.markArea.data.0.label.normal.show

Whether to show label.

series.gauge.markArea.data.0.itemStyle

Style of the item. itemStyle of start point and end point will be merged together.

series.gauge.markArea.data.0.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.gauge.markArea.data.0.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.gauge.markArea.data.0.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.gauge.markArea.data.0.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.gauge.markArea.data.0.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markArea.data.0.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.gauge.markArea.data.0.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.gauge.markArea.data.0.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.gauge.markArea.data.0.itemStyle.emphasis.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
)

series.gauge.markArea.data.0.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.gauge.markArea.data.0.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.gauge.markArea.data.0.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.gauge.markArea.data.0.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.gauge.markArea.data.0.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markArea.data.0.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.gauge.markArea.data.0.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.gauge.markArea.data.0.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.gauge.markArea.data.0.itemStyle.normal.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
)

series.gauge.markArea.data.0.value

value of the item, not necessary.

series.gauge.markArea.data.0.y

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.gauge.markArea.data.0.x

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.gauge.markArea.itemStyle

Style of the mark area.

series.gauge.markArea.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.gauge.markArea.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.gauge.markArea.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.gauge.markArea.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.gauge.markArea.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markArea.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.gauge.markArea.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.gauge.markArea.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.gauge.markArea.itemStyle.emphasis.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
)

series.gauge.markArea.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.gauge.markArea.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.gauge.markArea.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.gauge.markArea.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.gauge.markArea.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markArea.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.gauge.markArea.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.gauge.markArea.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.gauge.markArea.itemStyle.normal.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
)

series.gauge.markArea.label

Label in mark area.

series.gauge.markArea.label.emphasis.textStyle

Label font style.

series.gauge.markArea.label.emphasis.textStyle.fontSize

font size

series.gauge.markArea.label.emphasis.textStyle.fontFamily

font family

series.gauge.markArea.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.gauge.markArea.label.emphasis.textStyle.fontStyle

font style

Options are:

series.gauge.markArea.label.emphasis.textStyle.color

text color.

series.gauge.markArea.label.emphasis.position

Label position.

Followings are the options:

series.gauge.markArea.label.emphasis.show

Whether to show label.

series.gauge.markArea.label.normal.textStyle

Label font style.

series.gauge.markArea.label.normal.textStyle.fontSize

font size

series.gauge.markArea.label.normal.textStyle.fontFamily

font family

series.gauge.markArea.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.gauge.markArea.label.normal.textStyle.fontStyle

font style

Options are:

series.gauge.markArea.label.normal.textStyle.color

text color.

series.gauge.markArea.label.normal.position

Label position.

Followings are the options:

series.gauge.markArea.label.normal.show

Whether to show label.

series.gauge.markArea.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.gauge.markLine

Use a line in the chart to illustrate.

series.gauge.markLine.animationDelayUpdate

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.

series.gauge.markLine.animationEasingUpdate

Easing method used for animation.

series.gauge.markLine.animationDurationUpdate

Time for animation to complete.

series.gauge.markLine.animationDelay

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.

series.gauge.markLine.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.gauge.markLine.animationDuration

Duration of the first animation.

series.gauge.markLine.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.gauge.markLine.animation

Whether to enable animation.

series.gauge.markLine.data

Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.

  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.

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
        }
    ]
]

series.gauge.markLine.data.1

Data of the ending point.

series.gauge.markLine.data.1.label

Label of this data item, which will be merged with label of starting point and ending point.

series.gauge.markLine.data.1.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.gauge.markLine.data.1.label.emphasis.position

Positions of labels can be:

series.gauge.markLine.data.1.label.emphasis.show

Whether show label or not.

series.gauge.markLine.data.1.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.gauge.markLine.data.1.label.normal.position

Positions of labels can be:

series.gauge.markLine.data.1.label.normal.show

Whether show label or not.

series.gauge.markLine.data.1.lineStyle

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

series.gauge.markLine.data.1.lineStyle.emphasis.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.gauge.markLine.data.1.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.gauge.markLine.data.1.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.gauge.markLine.data.1.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.gauge.markLine.data.1.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.gauge.markLine.data.1.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markLine.data.1.lineStyle.emphasis.type

line type.

Options are:

series.gauge.markLine.data.1.lineStyle.emphasis.width

line width.

series.gauge.markLine.data.1.lineStyle.emphasis.color

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.gauge.markLine.data.1.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.gauge.markLine.data.1.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.gauge.markLine.data.1.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.gauge.markLine.data.1.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.gauge.markLine.data.1.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.gauge.markLine.data.1.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markLine.data.1.lineStyle.normal.type

line type.

Options are:

series.gauge.markLine.data.1.lineStyle.normal.width

line width.

series.gauge.markLine.data.1.lineStyle.normal.color

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.gauge.markLine.data.1.symbolOffset

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.

series.gauge.markLine.data.1.symbolRotate

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.

series.gauge.markLine.data.1.symbolSize

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.

series.gauge.markLine.data.1.symbol

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.

series.gauge.markLine.data.1.value

Label value, which can be ignored.

series.gauge.markLine.data.1.y

Y position according to container, in pixel.

series.gauge.markLine.data.1.x

X position according to container, in pixel.

series.gauge.markLine.data.0

Data of the starting point.

series.gauge.markLine.data.0.label

Label of this data item, which will be merged with label of starting point and ending point.

series.gauge.markLine.data.0.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.gauge.markLine.data.0.label.emphasis.position

Positions of labels can be:

series.gauge.markLine.data.0.label.emphasis.show

Whether show label or not.

series.gauge.markLine.data.0.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.gauge.markLine.data.0.label.normal.position

Positions of labels can be:

series.gauge.markLine.data.0.label.normal.show

Whether show label or not.

series.gauge.markLine.data.0.lineStyle

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

series.gauge.markLine.data.0.lineStyle.emphasis.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.gauge.markLine.data.0.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.gauge.markLine.data.0.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.gauge.markLine.data.0.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.gauge.markLine.data.0.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.gauge.markLine.data.0.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markLine.data.0.lineStyle.emphasis.type

line type.

Options are:

series.gauge.markLine.data.0.lineStyle.emphasis.width

line width.

series.gauge.markLine.data.0.lineStyle.emphasis.color

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.gauge.markLine.data.0.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.gauge.markLine.data.0.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.gauge.markLine.data.0.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.gauge.markLine.data.0.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.gauge.markLine.data.0.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.gauge.markLine.data.0.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markLine.data.0.lineStyle.normal.type

line type.

Options are:

series.gauge.markLine.data.0.lineStyle.normal.width

line width.

series.gauge.markLine.data.0.lineStyle.normal.color

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.gauge.markLine.data.0.symbolOffset

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.

series.gauge.markLine.data.0.symbolRotate

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.

series.gauge.markLine.data.0.symbolSize

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.

series.gauge.markLine.data.0.symbol

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.

series.gauge.markLine.data.0.value

Label value, which can be ignored.

series.gauge.markLine.data.0.y

Y position according to container, in pixel.

series.gauge.markLine.data.0.x

X position according to container, in pixel.

series.gauge.markLine.lineStyle

Mark line style.

series.gauge.markLine.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.gauge.markLine.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.gauge.markLine.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.gauge.markLine.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.gauge.markLine.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markLine.lineStyle.emphasis.type

line type.

Options are:

series.gauge.markLine.lineStyle.emphasis.width

line width.

series.gauge.markLine.lineStyle.emphasis.color

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.gauge.markLine.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.gauge.markLine.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.gauge.markLine.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.gauge.markLine.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.gauge.markLine.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.gauge.markLine.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markLine.lineStyle.normal.type

line type.

Options are:

series.gauge.markLine.lineStyle.normal.width

line width.

series.gauge.markLine.lineStyle.normal.color

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.gauge.markLine.label

Mark line text.

series.gauge.markLine.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.gauge.markLine.label.emphasis.position

Positions of labels can be:

series.gauge.markLine.label.emphasis.show

Whether show label or not.

series.gauge.markLine.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.gauge.markLine.label.normal.position

Positions of labels can be:

series.gauge.markLine.label.normal.show

Whether show label or not.

series.gauge.markLine.precision

Precison of marking line value, which is useful when displaying average value mark line.

series.gauge.markLine.symbolSize

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.

series.gauge.markLine.symbol

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.

series.gauge.markLine.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.gauge.markPoint

Mark point in a chart.

series.gauge.markPoint.animationDelayUpdate

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

series.gauge.markPoint.animationEasingUpdate

Easing method used for animation.

series.gauge.markPoint.animationDurationUpdate

Time for animation to complete.

series.gauge.markPoint.animationDelay

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.

series.gauge.markPoint.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.gauge.markPoint.animationDuration

Duration of the first animation.

series.gauge.markPoint.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.gauge.markPoint.animation

Whether to enable animation.

series.gauge.markPoint.data

Data array for mark points, each of which is an object. Here are some ways to assign mark point position.

  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.

When multiple attributes exist, priority is as the above order.

For example:

data: [
    {
        name: 'screen coordinate',
        x: 100,
        y: 100
    }
]

series.gauge.markPoint.itemStyle

Mark point style.

series.gauge.markPoint.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.gauge.markPoint.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.gauge.markPoint.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.gauge.markPoint.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.gauge.markPoint.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markPoint.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.gauge.markPoint.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.gauge.markPoint.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.gauge.markPoint.itemStyle.emphasis.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
)

series.gauge.markPoint.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.gauge.markPoint.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.gauge.markPoint.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.gauge.markPoint.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.gauge.markPoint.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markPoint.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.gauge.markPoint.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.gauge.markPoint.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.gauge.markPoint.itemStyle.normal.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
)

series.gauge.markPoint.label

Label of mark point.

series.gauge.markPoint.label.emphasis.textStyle

Label font style.

series.gauge.markPoint.label.emphasis.textStyle.fontSize

font size

series.gauge.markPoint.label.emphasis.textStyle.fontFamily

font family

series.gauge.markPoint.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.gauge.markPoint.label.emphasis.textStyle.fontStyle

font style

Options are:

series.gauge.markPoint.label.emphasis.textStyle.color

text color.

series.gauge.markPoint.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.gauge.markPoint.label.emphasis.position

Label position.

Followings are the options:

series.gauge.markPoint.label.emphasis.show

Whether to show label.

series.gauge.markPoint.label.normal.textStyle

Label font style.

series.gauge.markPoint.label.normal.textStyle.fontSize

font size

series.gauge.markPoint.label.normal.textStyle.fontFamily

font family

series.gauge.markPoint.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.gauge.markPoint.label.normal.textStyle.fontStyle

font style

Options are:

series.gauge.markPoint.label.normal.textStyle.color

text color.

series.gauge.markPoint.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.gauge.markPoint.label.normal.position

Label position.

Followings are the options:

series.gauge.markPoint.label.normal.show

Whether to show label.

series.gauge.markPoint.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.gauge.markPoint.symbolOffset

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.

series.gauge.markPoint.symbolRotate

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.

series.gauge.markPoint.symbolSize

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.

series.gauge.markPoint.symbol

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.

series.gauge.detail

The detail about gauge chart which is used to show data.

series.gauge.detail.textStyle.fontSize

font size

series.gauge.detail.textStyle.fontFamily

font family

series.gauge.detail.textStyle.fontWeight

font thick weight

Options are:

series.gauge.detail.textStyle.fontStyle

font style

Options are:

series.gauge.detail.textStyle.color

The text color. Defaults to use the color of section where the numerical value belongs to.

series.gauge.detail.offsetCenter

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.

series.gauge.detail.borderColor

The border color of detail.

series.gauge.detail.borderWidth

The border width of detail.

series.gauge.detail.backgroundColor

The background color of detail.

series.gauge.detail.height

The height of detail.

series.gauge.detail.width

The width of detail.

series.gauge.detail.show

Whether to show the details.

series.gauge.title

The title of gauge chart.

series.gauge.title.textStyle.fontSize

font size

series.gauge.title.textStyle.fontFamily

font family

series.gauge.title.textStyle.fontWeight

font thick weight

Options are:

series.gauge.title.textStyle.fontStyle

font style

Options are:

series.gauge.title.textStyle.color

text color.

series.gauge.title.offsetCenter

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.

series.gauge.title.show

Whether to show the title.

series.gauge.itemStyle

The style of gauge chart.

series.gauge.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.gauge.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.gauge.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.gauge.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.gauge.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.gauge.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.gauge.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.gauge.itemStyle.emphasis.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
)

series.gauge.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.gauge.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.gauge.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.gauge.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.gauge.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.gauge.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.gauge.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.gauge.itemStyle.normal.color

The color of pointer. Defaults to use the color of section where the numerical value belongs to.

series.gauge.pointer

Gauge chart pointer.

series.gauge.pointer.width

The width of pointer.

series.gauge.pointer.length

The length of pointer which could be absolute value and also the percentage relative to radius.

series.gauge.pointer.show

Whether to show the pointer.

series.gauge.axisLabel

Axis tick label.

series.gauge.axisLabel.color

The scale color

series.gauge.axisLabel.textStyle.fontSize

font size

series.gauge.axisLabel.textStyle.fontFamily

font family

series.gauge.axisLabel.textStyle.fontWeight

font thick weight

Options are:

series.gauge.axisLabel.textStyle.fontStyle

font style

Options are:

series.gauge.axisLabel.textStyle.color

text color.

series.gauge.axisLabel.formatter

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';
}

series.gauge.axisLabel.show

Whether to show the label.

series.gauge.axisTick

The tick line style.

series.gauge.axisTick.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.gauge.axisTick.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.gauge.axisTick.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.gauge.axisTick.lineStyle.shadowColor

Shadow color. Support same format as color.

series.gauge.axisTick.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.axisTick.lineStyle.type

line type.

Options are:

series.gauge.axisTick.lineStyle.width

line width.

series.gauge.axisTick.lineStyle.color

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.gauge.axisTick.length

The length of tick line, can be a pecentage value relative to radius.

series.gauge.axisTick.splitNumber

The split scale number between split line.

series.gauge.axisTick.show

Whether to show the scale.

series.gauge.splitLine

The style of split line.

series.gauge.splitLine.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.gauge.splitLine.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.gauge.splitLine.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.gauge.splitLine.lineStyle.shadowColor

Shadow color. Support same format as color.

series.gauge.splitLine.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.splitLine.lineStyle.type

line type.

Options are:

series.gauge.splitLine.lineStyle.width

line width.

series.gauge.splitLine.lineStyle.color

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.gauge.splitLine.length

The length of split line, can be a pecentage value relative to radius.

series.gauge.splitLine.show

Whether to show the split line.

series.gauge.axisLine

The related configuration about the axis line of gauge chart.

series.gauge.axisLine.lineStyle

The style of the axis line of gauge chart.

series.gauge.axisLine.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.gauge.axisLine.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.gauge.axisLine.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.gauge.axisLine.lineStyle.shadowColor

Shadow color. Support same format as color.

series.gauge.axisLine.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.axisLine.lineStyle.width

The width of axis line.

series.gauge.axisLine.lineStyle.color

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']]

series.gauge.axisLine.show

Whether to show the axis line of gauge chart.

series.gauge.splitNumber

The number of split segments of gauge chart scale.

series.gauge.max

The maximum data value which map to maxAngle.

series.gauge.min

The minimum data value which map to minAngle.

series.gauge.clockwise

Whether the scale in gauge chart increases clockwise.

series.gauge.endAngle

The end angle of gauge chart.

series.gauge.startAngle

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.

series.gauge.radius

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.gauge.name

Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption.

series.funnel

Funnel chart

sample:

series.funnel.animationDelayUpdate

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.

series.funnel.animationEasingUpdate

Easing method used for animation.

series.funnel.animationDurationUpdate

Time for animation to complete.

series.funnel.animationDelay

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.

series.funnel.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.funnel.animationDuration

Duration of the first animation.

series.funnel.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.funnel.animation

Whether to enable animation.

series.funnel.markArea

Used to mark an area in chart. For example, mark a time interval.

series.funnel.markArea.animationDelayUpdate

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.

series.funnel.markArea.animationEasingUpdate

Easing method used for animation.

series.funnel.markArea.animationDurationUpdate

Time for animation to complete.

series.funnel.markArea.animationDelay

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.

series.funnel.markArea.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.funnel.markArea.animationDuration

Duration of the first animation.

series.funnel.markArea.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.funnel.markArea.animation

Whether to enable animation.

series.funnel.markArea.data

The scope of the area is defined by data, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:

  1. Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 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%'
        }
    ]
]

series.funnel.markArea.data.1

Specify the right-bottom point.

series.funnel.markArea.data.1.label

Label style of the item. Label style of start point and end point will be merged together.

series.funnel.markArea.data.1.label.emphasis.textStyle

Label font style.

series.funnel.markArea.data.1.label.emphasis.textStyle.fontSize

font size

series.funnel.markArea.data.1.label.emphasis.textStyle.fontFamily

font family

series.funnel.markArea.data.1.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.funnel.markArea.data.1.label.emphasis.textStyle.fontStyle

font style

Options are:

series.funnel.markArea.data.1.label.emphasis.textStyle.color

text color.

series.funnel.markArea.data.1.label.emphasis.position

Label position.

Followings are the options:

series.funnel.markArea.data.1.label.emphasis.show

Whether to show label.

series.funnel.markArea.data.1.label.normal.textStyle

Label font style.

series.funnel.markArea.data.1.label.normal.textStyle.fontSize

font size

series.funnel.markArea.data.1.label.normal.textStyle.fontFamily

font family

series.funnel.markArea.data.1.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.funnel.markArea.data.1.label.normal.textStyle.fontStyle

font style

Options are:

series.funnel.markArea.data.1.label.normal.textStyle.color

text color.

series.funnel.markArea.data.1.label.normal.position

Label position.

Followings are the options:

series.funnel.markArea.data.1.label.normal.show

Whether to show label.

series.funnel.markArea.data.1.itemStyle

Style of the item. itemStyle of start point and end point will be merged together.

series.funnel.markArea.data.1.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.funnel.markArea.data.1.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.funnel.markArea.data.1.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.funnel.markArea.data.1.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.funnel.markArea.data.1.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markArea.data.1.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.funnel.markArea.data.1.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.funnel.markArea.data.1.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.funnel.markArea.data.1.itemStyle.emphasis.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
)

series.funnel.markArea.data.1.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.funnel.markArea.data.1.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.funnel.markArea.data.1.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.funnel.markArea.data.1.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.funnel.markArea.data.1.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markArea.data.1.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.funnel.markArea.data.1.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.funnel.markArea.data.1.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.funnel.markArea.data.1.itemStyle.normal.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
)

series.funnel.markArea.data.1.value

value of the item, not necessary.

series.funnel.markArea.data.1.y

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.funnel.markArea.data.1.x

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.funnel.markArea.data.0

Specify the left-top point.

series.funnel.markArea.data.0.label

Label style of the item. Label style of start point and end point will be merged together.

series.funnel.markArea.data.0.label.emphasis.textStyle

Label font style.

series.funnel.markArea.data.0.label.emphasis.textStyle.fontSize

font size

series.funnel.markArea.data.0.label.emphasis.textStyle.fontFamily

font family

series.funnel.markArea.data.0.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.funnel.markArea.data.0.label.emphasis.textStyle.fontStyle

font style

Options are:

series.funnel.markArea.data.0.label.emphasis.textStyle.color

text color.

series.funnel.markArea.data.0.label.emphasis.position

Label position.

Followings are the options:

series.funnel.markArea.data.0.label.emphasis.show

Whether to show label.

series.funnel.markArea.data.0.label.normal.textStyle

Label font style.

series.funnel.markArea.data.0.label.normal.textStyle.fontSize

font size

series.funnel.markArea.data.0.label.normal.textStyle.fontFamily

font family

series.funnel.markArea.data.0.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.funnel.markArea.data.0.label.normal.textStyle.fontStyle

font style

Options are:

series.funnel.markArea.data.0.label.normal.textStyle.color

text color.

series.funnel.markArea.data.0.label.normal.position

Label position.

Followings are the options:

series.funnel.markArea.data.0.label.normal.show

Whether to show label.

series.funnel.markArea.data.0.itemStyle

Style of the item. itemStyle of start point and end point will be merged together.

series.funnel.markArea.data.0.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.funnel.markArea.data.0.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.funnel.markArea.data.0.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.funnel.markArea.data.0.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.funnel.markArea.data.0.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markArea.data.0.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.funnel.markArea.data.0.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.funnel.markArea.data.0.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.funnel.markArea.data.0.itemStyle.emphasis.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
)

series.funnel.markArea.data.0.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.funnel.markArea.data.0.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.funnel.markArea.data.0.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.funnel.markArea.data.0.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.funnel.markArea.data.0.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markArea.data.0.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.funnel.markArea.data.0.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.funnel.markArea.data.0.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.funnel.markArea.data.0.itemStyle.normal.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
)

series.funnel.markArea.data.0.value

value of the item, not necessary.

series.funnel.markArea.data.0.y

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.funnel.markArea.data.0.x

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.funnel.markArea.itemStyle

Style of the mark area.

series.funnel.markArea.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.funnel.markArea.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.funnel.markArea.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.funnel.markArea.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.funnel.markArea.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markArea.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.funnel.markArea.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.funnel.markArea.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.funnel.markArea.itemStyle.emphasis.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
)

series.funnel.markArea.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.funnel.markArea.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.funnel.markArea.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.funnel.markArea.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.funnel.markArea.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markArea.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.funnel.markArea.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.funnel.markArea.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.funnel.markArea.itemStyle.normal.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
)

series.funnel.markArea.label

Label in mark area.

series.funnel.markArea.label.emphasis.textStyle

Label font style.

series.funnel.markArea.label.emphasis.textStyle.fontSize

font size

series.funnel.markArea.label.emphasis.textStyle.fontFamily

font family

series.funnel.markArea.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.funnel.markArea.label.emphasis.textStyle.fontStyle

font style

Options are:

series.funnel.markArea.label.emphasis.textStyle.color

text color.

series.funnel.markArea.label.emphasis.position

Label position.

Followings are the options:

series.funnel.markArea.label.emphasis.show

Whether to show label.

series.funnel.markArea.label.normal.textStyle

Label font style.

series.funnel.markArea.label.normal.textStyle.fontSize

font size

series.funnel.markArea.label.normal.textStyle.fontFamily

font family

series.funnel.markArea.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.funnel.markArea.label.normal.textStyle.fontStyle

font style

Options are:

series.funnel.markArea.label.normal.textStyle.color

text color.

series.funnel.markArea.label.normal.position

Label position.

Followings are the options:

series.funnel.markArea.label.normal.show

Whether to show label.

series.funnel.markArea.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.funnel.markLine

Use a line in the chart to illustrate.

series.funnel.markLine.animationDelayUpdate

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.

series.funnel.markLine.animationEasingUpdate

Easing method used for animation.

series.funnel.markLine.animationDurationUpdate

Time for animation to complete.

series.funnel.markLine.animationDelay

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.

series.funnel.markLine.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.funnel.markLine.animationDuration

Duration of the first animation.

series.funnel.markLine.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.funnel.markLine.animation

Whether to enable animation.

series.funnel.markLine.data

Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.

  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.

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
        }
    ]
]

series.funnel.markLine.data.1

Data of the ending point.

series.funnel.markLine.data.1.label

Label of this data item, which will be merged with label of starting point and ending point.

series.funnel.markLine.data.1.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.funnel.markLine.data.1.label.emphasis.position

Positions of labels can be:

series.funnel.markLine.data.1.label.emphasis.show

Whether show label or not.

series.funnel.markLine.data.1.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.funnel.markLine.data.1.label.normal.position

Positions of labels can be:

series.funnel.markLine.data.1.label.normal.show

Whether show label or not.

series.funnel.markLine.data.1.lineStyle

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

series.funnel.markLine.data.1.lineStyle.emphasis.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.funnel.markLine.data.1.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.funnel.markLine.data.1.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.funnel.markLine.data.1.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.funnel.markLine.data.1.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.funnel.markLine.data.1.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markLine.data.1.lineStyle.emphasis.type

line type.

Options are:

series.funnel.markLine.data.1.lineStyle.emphasis.width

line width.

series.funnel.markLine.data.1.lineStyle.emphasis.color

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.funnel.markLine.data.1.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.funnel.markLine.data.1.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.funnel.markLine.data.1.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.funnel.markLine.data.1.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.funnel.markLine.data.1.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.funnel.markLine.data.1.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markLine.data.1.lineStyle.normal.type

line type.

Options are:

series.funnel.markLine.data.1.lineStyle.normal.width

line width.

series.funnel.markLine.data.1.lineStyle.normal.color

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.funnel.markLine.data.1.symbolOffset

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.

series.funnel.markLine.data.1.symbolRotate

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.

series.funnel.markLine.data.1.symbolSize

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.

series.funnel.markLine.data.1.symbol

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.

series.funnel.markLine.data.1.value

Label value, which can be ignored.

series.funnel.markLine.data.1.y

Y position according to container, in pixel.

series.funnel.markLine.data.1.x

X position according to container, in pixel.

series.funnel.markLine.data.0

Data of the starting point.

series.funnel.markLine.data.0.label

Label of this data item, which will be merged with label of starting point and ending point.

series.funnel.markLine.data.0.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.funnel.markLine.data.0.label.emphasis.position

Positions of labels can be:

series.funnel.markLine.data.0.label.emphasis.show

Whether show label or not.

series.funnel.markLine.data.0.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.funnel.markLine.data.0.label.normal.position

Positions of labels can be:

series.funnel.markLine.data.0.label.normal.show

Whether show label or not.

series.funnel.markLine.data.0.lineStyle

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

series.funnel.markLine.data.0.lineStyle.emphasis.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.funnel.markLine.data.0.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.funnel.markLine.data.0.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.funnel.markLine.data.0.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.funnel.markLine.data.0.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.funnel.markLine.data.0.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markLine.data.0.lineStyle.emphasis.type

line type.

Options are:

series.funnel.markLine.data.0.lineStyle.emphasis.width

line width.

series.funnel.markLine.data.0.lineStyle.emphasis.color

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.funnel.markLine.data.0.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.funnel.markLine.data.0.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.funnel.markLine.data.0.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.funnel.markLine.data.0.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.funnel.markLine.data.0.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.funnel.markLine.data.0.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markLine.data.0.lineStyle.normal.type

line type.

Options are:

series.funnel.markLine.data.0.lineStyle.normal.width

line width.

series.funnel.markLine.data.0.lineStyle.normal.color

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.funnel.markLine.data.0.symbolOffset

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.

series.funnel.markLine.data.0.symbolRotate

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.

series.funnel.markLine.data.0.symbolSize

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.

series.funnel.markLine.data.0.symbol

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.

series.funnel.markLine.data.0.value

Label value, which can be ignored.

series.funnel.markLine.data.0.y

Y position according to container, in pixel.

series.funnel.markLine.data.0.x

X position according to container, in pixel.

series.funnel.markLine.lineStyle

Mark line style.

series.funnel.markLine.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.funnel.markLine.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.funnel.markLine.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.funnel.markLine.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.funnel.markLine.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markLine.lineStyle.emphasis.type

line type.

Options are:

series.funnel.markLine.lineStyle.emphasis.width

line width.

series.funnel.markLine.lineStyle.emphasis.color

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.funnel.markLine.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.funnel.markLine.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.funnel.markLine.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.funnel.markLine.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.funnel.markLine.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.funnel.markLine.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markLine.lineStyle.normal.type

line type.

Options are:

series.funnel.markLine.lineStyle.normal.width

line width.

series.funnel.markLine.lineStyle.normal.color

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.funnel.markLine.label

Mark line text.

series.funnel.markLine.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.funnel.markLine.label.emphasis.position

Positions of labels can be:

series.funnel.markLine.label.emphasis.show

Whether show label or not.

series.funnel.markLine.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.funnel.markLine.label.normal.position

Positions of labels can be:

series.funnel.markLine.label.normal.show

Whether show label or not.

series.funnel.markLine.precision

Precison of marking line value, which is useful when displaying average value mark line.

series.funnel.markLine.symbolSize

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.

series.funnel.markLine.symbol

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.

series.funnel.markLine.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.funnel.markPoint

Mark point in a chart.

series.funnel.markPoint.animationDelayUpdate

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

series.funnel.markPoint.animationEasingUpdate

Easing method used for animation.

series.funnel.markPoint.animationDurationUpdate

Time for animation to complete.

series.funnel.markPoint.animationDelay

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.

series.funnel.markPoint.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.funnel.markPoint.animationDuration

Duration of the first animation.

series.funnel.markPoint.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.funnel.markPoint.animation

Whether to enable animation.

series.funnel.markPoint.data

Data array for mark points, each of which is an object. Here are some ways to assign mark point position.

  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.

When multiple attributes exist, priority is as the above order.

For example:

data: [
    {
        name: 'screen coordinate',
        x: 100,
        y: 100
    }
]

series.funnel.markPoint.itemStyle

Mark point style.

series.funnel.markPoint.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.funnel.markPoint.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.funnel.markPoint.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.funnel.markPoint.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.funnel.markPoint.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markPoint.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.funnel.markPoint.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.funnel.markPoint.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.funnel.markPoint.itemStyle.emphasis.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
)

series.funnel.markPoint.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.funnel.markPoint.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.funnel.markPoint.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.funnel.markPoint.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.funnel.markPoint.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markPoint.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.funnel.markPoint.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.funnel.markPoint.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.funnel.markPoint.itemStyle.normal.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
)

series.funnel.markPoint.label

Label of mark point.

series.funnel.markPoint.label.emphasis.textStyle

Label font style.

series.funnel.markPoint.label.emphasis.textStyle.fontSize

font size

series.funnel.markPoint.label.emphasis.textStyle.fontFamily

font family

series.funnel.markPoint.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.funnel.markPoint.label.emphasis.textStyle.fontStyle

font style

Options are:

series.funnel.markPoint.label.emphasis.textStyle.color

text color.

series.funnel.markPoint.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.funnel.markPoint.label.emphasis.position

Label position.

Followings are the options:

series.funnel.markPoint.label.emphasis.show

Whether to show label.

series.funnel.markPoint.label.normal.textStyle

Label font style.

series.funnel.markPoint.label.normal.textStyle.fontSize

font size

series.funnel.markPoint.label.normal.textStyle.fontFamily

font family

series.funnel.markPoint.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.funnel.markPoint.label.normal.textStyle.fontStyle

font style

Options are:

series.funnel.markPoint.label.normal.textStyle.color

text color.

series.funnel.markPoint.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.funnel.markPoint.label.normal.position

Label position.

Followings are the options:

series.funnel.markPoint.label.normal.show

Whether to show label.

series.funnel.markPoint.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.funnel.markPoint.symbolOffset

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.

series.funnel.markPoint.symbolRotate

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.

series.funnel.markPoint.symbolSize

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.

series.funnel.markPoint.symbol

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.

series.funnel.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:{}
}]

series.funnel.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.

series.funnel.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.funnel.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.funnel.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.funnel.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.funnel.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.funnel.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.funnel.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.funnel.itemStyle.emphasis.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
)

series.funnel.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.funnel.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.funnel.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.funnel.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.funnel.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.funnel.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.funnel.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.funnel.itemStyle.normal.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.

series.funnel.labelLine

The visual guide line style of label. When label position is set as 'left'or'right', the visual guide line will show.

series.funnel.labelLine.emphasis

The style of visual guide line in emphasis status.

series.funnel.labelLine.emphasis.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.funnel.labelLine.emphasis.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.funnel.labelLine.emphasis.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.funnel.labelLine.emphasis.lineStyle.shadowColor

Shadow color. Support same format as color.

series.funnel.labelLine.emphasis.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.labelLine.emphasis.lineStyle.type

line type.

Options are:

series.funnel.labelLine.emphasis.lineStyle.width

line width.

series.funnel.labelLine.emphasis.lineStyle.color

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.funnel.labelLine.emphasis.show

Whether to show visual guide line.

series.funnel.labelLine.normal

The style of visual guide line in normal status.

series.funnel.labelLine.normal.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.funnel.labelLine.normal.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.funnel.labelLine.normal.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.funnel.labelLine.normal.lineStyle.shadowColor

Shadow color. Support same format as color.

series.funnel.labelLine.normal.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.labelLine.normal.lineStyle.type

line type.

Options are:

series.funnel.labelLine.normal.lineStyle.width

line width.

series.funnel.labelLine.normal.lineStyle.color

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.funnel.labelLine.normal.length

The length of the first part from visual guide line.

series.funnel.labelLine.normal.show

Whether to show visual guide line.

series.funnel.label

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, labelis taken to be at the same level with itemStyle, and has two status normal and emphasis as itemStyle does.

series.funnel.label.emphasis.textStyle

the font style of lable.

series.funnel.label.emphasis.textStyle.fontSize

font size

series.funnel.label.emphasis.textStyle.fontFamily

font family

series.funnel.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.funnel.label.emphasis.textStyle.fontStyle

font style

Options are:

series.funnel.label.emphasis.textStyle.color

text color.

series.funnel.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.funnel.label.normal.textStyle

the font style of lable.

series.funnel.label.normal.textStyle.fontSize

font size

series.funnel.label.normal.textStyle.fontFamily

font family

series.funnel.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.funnel.label.normal.textStyle.fontStyle

font style

Options are:

series.funnel.label.normal.textStyle.color

text color.

series.funnel.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.funnel.label.normal.position

Label position.

Options:

series.funnel.funnelAlign

Horizontal align. Defaults to align center. Can be 'left', 'right', 'center'.

series.funnel.legendHoverLink

Whether to enable highlighting chart when legend is being hovered.

series.funnel.gap

Gap between each trapezoid.

series.funnel.sort

Data sorting, which can be whether 'ascending' or 'descending'.

series.funnel.maxSize

The mapped width from maximum data value max.

It can be absolute pixel and also the percentage of layout width.

series.funnel.minSize

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.

series.funnel.max

The specified maximum value.

series.funnel.min

The specified minimum value.

series.funnel.name

Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption.

series.sankey

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.

series.sankey.animationDelayUpdate

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.

series.sankey.animationEasingUpdate

Easing method used for animation.

series.sankey.animationDurationUpdate

Time for animation to complete.

series.sankey.animationDelay

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.

series.sankey.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.sankey.animationDuration

Duration of the first animation.

series.sankey.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.sankey.animation

Whether to enable animation.

series.sankey.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.sankey.edges

Equals to links

series.sankey.links

The links data between nodes. For instance:

links: [{
    source: 'n1',
    target: 'n2'
}, {
    source: 'n2',
    target: 'n3'
}]

series.sankey.nodes

Equals to data

series.sankey.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:{}
}]

series.sankey.lineStyle

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.

series.sankey.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.sankey.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.sankey.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.sankey.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.sankey.lineStyle.emphasis.curveness

The curveness of the edge in sankey graph.

series.sankey.lineStyle.emphasis.opacity

The opacity of the edge in sankey graph.

series.sankey.lineStyle.emphasis.color

The color of the edge in sankey graphs.

series.sankey.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.sankey.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.sankey.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.sankey.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.sankey.lineStyle.normal.curveness

The curveness of the edge in sankey graph.

series.sankey.lineStyle.normal.opacity

The opacity of the edge in sankey graph.

series.sankey.lineStyle.normal.color

The color of the edge in sankey graphs.

series.sankey.itemStyle

The style of node rectangle in sankey graphs.

series.sankey.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.sankey.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.sankey.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.sankey.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.sankey.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.sankey.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.sankey.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.sankey.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.sankey.itemStyle.emphasis.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
)

series.sankey.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.sankey.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.sankey.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.sankey.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.sankey.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.sankey.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.sankey.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.sankey.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.sankey.itemStyle.normal.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
)

series.sankey.label

label describes the text label style in each rectangular node.

series.sankey.label.emphasis.textStyle

Label font style.

series.sankey.label.emphasis.textStyle.fontSize

font size

series.sankey.label.emphasis.textStyle.fontFamily

font family

series.sankey.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.sankey.label.emphasis.textStyle.fontStyle

font style

Options are:

series.sankey.label.emphasis.textStyle.color

text color.

series.sankey.label.emphasis.position

Label position.

Followings are the options:

series.sankey.label.emphasis.show

Whether to show label.

series.sankey.label.normal.textStyle

Label font style.

series.sankey.label.normal.textStyle.fontSize

font size

series.sankey.label.normal.textStyle.fontFamily

font family

series.sankey.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.sankey.label.normal.textStyle.fontStyle

font style

Options are:

series.sankey.label.normal.textStyle.color

text color.

series.sankey.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.sankey.label.normal.position

Label position.

Followings are the options:

series.sankey.label.normal.show

Whether to show label.

series.sankey.layoutIterations

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.

series.sankey.nodeGap

The gap between any two regtangles in each column from the graph.

series.sankey.nodeWidth

The node width of rectangle in graph.

series.sankey.height

Height of sankey component.

series.sankey.width

Width of sankey component.

series.sankey.bottom

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%'.

series.sankey.right

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%'.

series.sankey.top

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.

series.sankey.left

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.

series.sankey.z

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.

series.sankey.zlevel

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.

series.graph

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:

series.graph.animationDelayUpdate

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.

series.graph.animationEasingUpdate

Easing method used for animation.

series.graph.animationDurationUpdate

Time for animation to complete.

series.graph.animationDelay

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.

series.graph.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.graph.animationDuration

Duration of the first animation.

series.graph.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.graph.animation

Whether to enable animation.

series.graph.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.graph.height

Height of component.

series.graph.width

Width of component.

series.graph.bottom

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.

series.graph.right

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.

series.graph.top

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.

series.graph.left

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.

series.graph.z

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.

series.graph.zlevel

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.

series.graph.markArea

Used to mark an area in chart. For example, mark a time interval.

series.graph.markArea.animationDelayUpdate

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.

series.graph.markArea.animationEasingUpdate

Easing method used for animation.

series.graph.markArea.animationDurationUpdate

Time for animation to complete.

series.graph.markArea.animationDelay

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.

series.graph.markArea.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.graph.markArea.animationDuration

Duration of the first animation.

series.graph.markArea.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.graph.markArea.animation

Whether to enable animation.

series.graph.markArea.data

The scope of the area is defined by data, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:

  1. Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 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%'
        }
    ]
]

series.graph.markArea.data.1

Specify the right-bottom point.

series.graph.markArea.data.1.label

Label style of the item. Label style of start point and end point will be merged together.

series.graph.markArea.data.1.label.emphasis.textStyle

Label font style.

series.graph.markArea.data.1.label.emphasis.textStyle.fontSize

font size

series.graph.markArea.data.1.label.emphasis.textStyle.fontFamily

font family

series.graph.markArea.data.1.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.graph.markArea.data.1.label.emphasis.textStyle.fontStyle

font style

Options are:

series.graph.markArea.data.1.label.emphasis.textStyle.color

text color.

series.graph.markArea.data.1.label.emphasis.position

Label position.

Followings are the options:

series.graph.markArea.data.1.label.emphasis.show

Whether to show label.

series.graph.markArea.data.1.label.normal.textStyle

Label font style.

series.graph.markArea.data.1.label.normal.textStyle.fontSize

font size

series.graph.markArea.data.1.label.normal.textStyle.fontFamily

font family

series.graph.markArea.data.1.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.graph.markArea.data.1.label.normal.textStyle.fontStyle

font style

Options are:

series.graph.markArea.data.1.label.normal.textStyle.color

text color.

series.graph.markArea.data.1.label.normal.position

Label position.

Followings are the options:

series.graph.markArea.data.1.label.normal.show

Whether to show label.

series.graph.markArea.data.1.itemStyle

Style of the item. itemStyle of start point and end point will be merged together.

series.graph.markArea.data.1.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.graph.markArea.data.1.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.graph.markArea.data.1.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.graph.markArea.data.1.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.graph.markArea.data.1.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markArea.data.1.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.graph.markArea.data.1.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.graph.markArea.data.1.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.graph.markArea.data.1.itemStyle.emphasis.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
)

series.graph.markArea.data.1.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.graph.markArea.data.1.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.graph.markArea.data.1.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.graph.markArea.data.1.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.graph.markArea.data.1.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markArea.data.1.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.graph.markArea.data.1.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.graph.markArea.data.1.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.graph.markArea.data.1.itemStyle.normal.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
)

series.graph.markArea.data.1.value

value of the item, not necessary.

series.graph.markArea.data.1.y

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.graph.markArea.data.1.x

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.graph.markArea.data.0

Specify the left-top point.

series.graph.markArea.data.0.label

Label style of the item. Label style of start point and end point will be merged together.

series.graph.markArea.data.0.label.emphasis.textStyle

Label font style.

series.graph.markArea.data.0.label.emphasis.textStyle.fontSize

font size

series.graph.markArea.data.0.label.emphasis.textStyle.fontFamily

font family

series.graph.markArea.data.0.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.graph.markArea.data.0.label.emphasis.textStyle.fontStyle

font style

Options are:

series.graph.markArea.data.0.label.emphasis.textStyle.color

text color.

series.graph.markArea.data.0.label.emphasis.position

Label position.

Followings are the options:

series.graph.markArea.data.0.label.emphasis.show

Whether to show label.

series.graph.markArea.data.0.label.normal.textStyle

Label font style.

series.graph.markArea.data.0.label.normal.textStyle.fontSize

font size

series.graph.markArea.data.0.label.normal.textStyle.fontFamily

font family

series.graph.markArea.data.0.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.graph.markArea.data.0.label.normal.textStyle.fontStyle

font style

Options are:

series.graph.markArea.data.0.label.normal.textStyle.color

text color.

series.graph.markArea.data.0.label.normal.position

Label position.

Followings are the options:

series.graph.markArea.data.0.label.normal.show

Whether to show label.

series.graph.markArea.data.0.itemStyle

Style of the item. itemStyle of start point and end point will be merged together.

series.graph.markArea.data.0.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.graph.markArea.data.0.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.graph.markArea.data.0.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.graph.markArea.data.0.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.graph.markArea.data.0.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markArea.data.0.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.graph.markArea.data.0.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.graph.markArea.data.0.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.graph.markArea.data.0.itemStyle.emphasis.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
)

series.graph.markArea.data.0.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.graph.markArea.data.0.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.graph.markArea.data.0.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.graph.markArea.data.0.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.graph.markArea.data.0.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markArea.data.0.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.graph.markArea.data.0.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.graph.markArea.data.0.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.graph.markArea.data.0.itemStyle.normal.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
)

series.graph.markArea.data.0.value

value of the item, not necessary.

series.graph.markArea.data.0.y

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.graph.markArea.data.0.x

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.graph.markArea.itemStyle

Style of the mark area.

series.graph.markArea.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.graph.markArea.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.graph.markArea.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.graph.markArea.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.graph.markArea.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markArea.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.graph.markArea.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.graph.markArea.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.graph.markArea.itemStyle.emphasis.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
)

series.graph.markArea.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.graph.markArea.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.graph.markArea.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.graph.markArea.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.graph.markArea.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markArea.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.graph.markArea.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.graph.markArea.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.graph.markArea.itemStyle.normal.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
)

series.graph.markArea.label

Label in mark area.

series.graph.markArea.label.emphasis.textStyle

Label font style.

series.graph.markArea.label.emphasis.textStyle.fontSize

font size

series.graph.markArea.label.emphasis.textStyle.fontFamily

font family

series.graph.markArea.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.graph.markArea.label.emphasis.textStyle.fontStyle

font style

Options are:

series.graph.markArea.label.emphasis.textStyle.color

text color.

series.graph.markArea.label.emphasis.position

Label position.

Followings are the options:

series.graph.markArea.label.emphasis.show

Whether to show label.

series.graph.markArea.label.normal.textStyle

Label font style.

series.graph.markArea.label.normal.textStyle.fontSize

font size

series.graph.markArea.label.normal.textStyle.fontFamily

font family

series.graph.markArea.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.graph.markArea.label.normal.textStyle.fontStyle

font style

Options are:

series.graph.markArea.label.normal.textStyle.color

text color.

series.graph.markArea.label.normal.position

Label position.

Followings are the options:

series.graph.markArea.label.normal.show

Whether to show label.

series.graph.markArea.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.graph.markLine

Use a line in the chart to illustrate.

series.graph.markLine.animationDelayUpdate

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.

series.graph.markLine.animationEasingUpdate

Easing method used for animation.

series.graph.markLine.animationDurationUpdate

Time for animation to complete.

series.graph.markLine.animationDelay

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.

series.graph.markLine.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.graph.markLine.animationDuration

Duration of the first animation.

series.graph.markLine.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.graph.markLine.animation

Whether to enable animation.

series.graph.markLine.data

Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.

  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.

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
        }
    ]
]

series.graph.markLine.data.1

Data of the ending point.

series.graph.markLine.data.1.label

Label of this data item, which will be merged with label of starting point and ending point.

series.graph.markLine.data.1.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.graph.markLine.data.1.label.emphasis.position

Positions of labels can be:

series.graph.markLine.data.1.label.emphasis.show

Whether show label or not.

series.graph.markLine.data.1.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.graph.markLine.data.1.label.normal.position

Positions of labels can be:

series.graph.markLine.data.1.label.normal.show

Whether show label or not.

series.graph.markLine.data.1.lineStyle

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

series.graph.markLine.data.1.lineStyle.emphasis.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.graph.markLine.data.1.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.graph.markLine.data.1.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.graph.markLine.data.1.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.graph.markLine.data.1.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.graph.markLine.data.1.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markLine.data.1.lineStyle.emphasis.type

line type.

Options are:

series.graph.markLine.data.1.lineStyle.emphasis.width

line width.

series.graph.markLine.data.1.lineStyle.emphasis.color

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.graph.markLine.data.1.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.graph.markLine.data.1.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.graph.markLine.data.1.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.graph.markLine.data.1.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.graph.markLine.data.1.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.graph.markLine.data.1.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markLine.data.1.lineStyle.normal.type

line type.

Options are:

series.graph.markLine.data.1.lineStyle.normal.width

line width.

series.graph.markLine.data.1.lineStyle.normal.color

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.graph.markLine.data.1.symbolOffset

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.

series.graph.markLine.data.1.symbolRotate

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.

series.graph.markLine.data.1.symbolSize

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.

series.graph.markLine.data.1.symbol

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.

series.graph.markLine.data.1.value

Label value, which can be ignored.

series.graph.markLine.data.1.y

Y position according to container, in pixel.

series.graph.markLine.data.1.x

X position according to container, in pixel.

series.graph.markLine.data.0

Data of the starting point.

series.graph.markLine.data.0.label

Label of this data item, which will be merged with label of starting point and ending point.

series.graph.markLine.data.0.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.graph.markLine.data.0.label.emphasis.position

Positions of labels can be:

series.graph.markLine.data.0.label.emphasis.show

Whether show label or not.

series.graph.markLine.data.0.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.graph.markLine.data.0.label.normal.position

Positions of labels can be:

series.graph.markLine.data.0.label.normal.show

Whether show label or not.

series.graph.markLine.data.0.lineStyle

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

series.graph.markLine.data.0.lineStyle.emphasis.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.graph.markLine.data.0.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.graph.markLine.data.0.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.graph.markLine.data.0.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.graph.markLine.data.0.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.graph.markLine.data.0.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markLine.data.0.lineStyle.emphasis.type

line type.

Options are:

series.graph.markLine.data.0.lineStyle.emphasis.width

line width.

series.graph.markLine.data.0.lineStyle.emphasis.color

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.graph.markLine.data.0.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.graph.markLine.data.0.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.graph.markLine.data.0.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.graph.markLine.data.0.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.graph.markLine.data.0.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.graph.markLine.data.0.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markLine.data.0.lineStyle.normal.type

line type.

Options are:

series.graph.markLine.data.0.lineStyle.normal.width

line width.

series.graph.markLine.data.0.lineStyle.normal.color

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.graph.markLine.data.0.symbolOffset

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.

series.graph.markLine.data.0.symbolRotate

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.

series.graph.markLine.data.0.symbolSize

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.

series.graph.markLine.data.0.symbol

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.

series.graph.markLine.data.0.value

Label value, which can be ignored.

series.graph.markLine.data.0.y

Y position according to container, in pixel.

series.graph.markLine.data.0.x

X position according to container, in pixel.

series.graph.markLine.lineStyle

Mark line style.

series.graph.markLine.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.graph.markLine.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.graph.markLine.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.graph.markLine.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.graph.markLine.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markLine.lineStyle.emphasis.type

line type.

Options are:

series.graph.markLine.lineStyle.emphasis.width

line width.

series.graph.markLine.lineStyle.emphasis.color

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.graph.markLine.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.graph.markLine.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.graph.markLine.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.graph.markLine.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.graph.markLine.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.graph.markLine.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markLine.lineStyle.normal.type

line type.

Options are:

series.graph.markLine.lineStyle.normal.width

line width.

series.graph.markLine.lineStyle.normal.color

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.graph.markLine.label

Mark line text.

series.graph.markLine.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.graph.markLine.label.emphasis.position

Positions of labels can be:

series.graph.markLine.label.emphasis.show

Whether show label or not.

series.graph.markLine.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.graph.markLine.label.normal.position

Positions of labels can be:

series.graph.markLine.label.normal.show

Whether show label or not.

series.graph.markLine.precision

Precison of marking line value, which is useful when displaying average value mark line.

series.graph.markLine.symbolSize

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.

series.graph.markLine.symbol

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.

series.graph.markLine.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.graph.markPoint

Mark point in a chart.

series.graph.markPoint.animationDelayUpdate

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

series.graph.markPoint.animationEasingUpdate

Easing method used for animation.

series.graph.markPoint.animationDurationUpdate

Time for animation to complete.

series.graph.markPoint.animationDelay

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.

series.graph.markPoint.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.graph.markPoint.animationDuration

Duration of the first animation.

series.graph.markPoint.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.graph.markPoint.animation

Whether to enable animation.

series.graph.markPoint.data

Data array for mark points, each of which is an object. Here are some ways to assign mark point position.

  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.

When multiple attributes exist, priority is as the above order.

For example:

data: [
    {
        name: 'screen coordinate',
        x: 100,
        y: 100
    }
]

series.graph.markPoint.itemStyle

Mark point style.

series.graph.markPoint.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.graph.markPoint.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.graph.markPoint.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.graph.markPoint.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.graph.markPoint.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markPoint.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.graph.markPoint.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.graph.markPoint.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.graph.markPoint.itemStyle.emphasis.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
)

series.graph.markPoint.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.graph.markPoint.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.graph.markPoint.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.graph.markPoint.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.graph.markPoint.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markPoint.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.graph.markPoint.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.graph.markPoint.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.graph.markPoint.itemStyle.normal.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
)

series.graph.markPoint.label

Label of mark point.

series.graph.markPoint.label.emphasis.textStyle

Label font style.

series.graph.markPoint.label.emphasis.textStyle.fontSize

font size

series.graph.markPoint.label.emphasis.textStyle.fontFamily

font family

series.graph.markPoint.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.graph.markPoint.label.emphasis.textStyle.fontStyle

font style

Options are:

series.graph.markPoint.label.emphasis.textStyle.color

text color.

series.graph.markPoint.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.graph.markPoint.label.emphasis.position

Label position.

Followings are the options:

series.graph.markPoint.label.emphasis.show

Whether to show label.

series.graph.markPoint.label.normal.textStyle

Label font style.

series.graph.markPoint.label.normal.textStyle.fontSize

font size

series.graph.markPoint.label.normal.textStyle.fontFamily

font family

series.graph.markPoint.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.graph.markPoint.label.normal.textStyle.fontStyle

font style

Options are:

series.graph.markPoint.label.normal.textStyle.color

text color.

series.graph.markPoint.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.graph.markPoint.label.normal.position

Label position.

Followings are the options:

series.graph.markPoint.label.normal.show

Whether to show label.

series.graph.markPoint.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.graph.markPoint.symbolOffset

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.

series.graph.markPoint.symbolRotate

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.

series.graph.markPoint.symbolSize

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.

series.graph.markPoint.symbol

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.

series.graph.edges

Alias of links

series.graph.links

Relational data between nodes. Example:

links: [{
    source: 'n1',
    target: 'n2'
}, {
    source: 'n2',
    target: 'n3'
}]

series.graph.nodes

Alias of data

series.graph.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:{}
}]

series.graph.categories

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.

series.graph.edgeLabel.emphasis.textStyle.fontSize

font size

series.graph.edgeLabel.emphasis.textStyle.fontFamily

font family

series.graph.edgeLabel.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.graph.edgeLabel.emphasis.textStyle.fontStyle

font style

Options are:

series.graph.edgeLabel.emphasis.textStyle.color

text color.

series.graph.edgeLabel.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.graph.edgeLabel.emphasis.position

Label position, options:

series.graph.edgeLabel.emphasis.show

If show label on edge.

series.graph.edgeLabel.normal.textStyle.fontSize

font size

series.graph.edgeLabel.normal.textStyle.fontFamily

font family

series.graph.edgeLabel.normal.textStyle.fontWeight

font thick weight

Options are:

series.graph.edgeLabel.normal.textStyle.fontStyle

font style

Options are:

series.graph.edgeLabel.normal.textStyle.color

text color.

series.graph.edgeLabel.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.graph.edgeLabel.normal.position

Label position, options:

series.graph.edgeLabel.normal.show

If show label on edge.

series.graph.label

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, labelis taken to be at the same level with itemStyle, and has two status normal and emphasis as itemStyle does.

series.graph.label.emphasis.textStyle

Label font style.

series.graph.label.emphasis.textStyle.fontSize

font size

series.graph.label.emphasis.textStyle.fontFamily

font family

series.graph.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.graph.label.emphasis.textStyle.fontStyle

font style

Options are:

series.graph.label.emphasis.textStyle.color

text color.

series.graph.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.graph.label.emphasis.position

Label position.

Followings are the options:

series.graph.label.emphasis.show

Whether to show label.

series.graph.label.normal.textStyle

Label font style.

series.graph.label.normal.textStyle.fontSize

font size

series.graph.label.normal.textStyle.fontFamily

font family

series.graph.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.graph.label.normal.textStyle.fontStyle

font style

Options are:

series.graph.label.normal.textStyle.color

text color.

series.graph.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.graph.label.normal.position

Label position.

Followings are the options:

series.graph.label.normal.show

Whether to show label.

series.graph.lineStyle

The style of edge line. lineStyle.normal.color can be 'source' or 'target', which will use the color of source node or target node.

series.graph.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.graph.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.graph.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.graph.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.graph.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.lineStyle.emphasis.type

line type.

Options are:

series.graph.lineStyle.emphasis.width

line width.

series.graph.lineStyle.emphasis.color

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.graph.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.graph.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.graph.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.graph.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.graph.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.graph.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.lineStyle.normal.type

line type.

Options are:

series.graph.lineStyle.normal.width

line width.

series.graph.lineStyle.normal.color

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.graph.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.

series.graph.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.graph.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.graph.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.graph.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.graph.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.graph.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.graph.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.graph.itemStyle.emphasis.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
)

series.graph.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.graph.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.graph.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.graph.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.graph.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.graph.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.graph.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.graph.itemStyle.normal.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.

series.graph.edgeSymbolSize

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

series.graph.edgeSymbol

Symbol of two ends of edge line.

For example:

edgeSymbol: ['circle', 'arrow']

series.graph.focusNodeAdjacency

Whether to focus/highlight the hover node and it's adjacencies.

series.graph.symbolOffset

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.

series.graph.symbolRotate

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.

series.graph.symbolSize

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.

series.graph.symbol

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.

series.graph.draggable

If node is draggable. Only available when using force-directed layout.

series.graph.nodeScaleRatio

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.

series.graph.roam

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.

series.graph.force

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.

series.graph.force.layoutAnimation

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.

series.graph.force.edgeLength

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.

series.graph.force.gravity

The gravity factor enforcing nodes approach to the center. The nodes will be closer to the center as the value becomes larger.

series.graph.force.repulsion

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.

series.graph.force.initLayout

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'.

series.graph.circular

Configuration about circular layout.

series.graph.circular.rotateLabel

Whether to rotate the label automatically.

series.graph.layout

Graph layout.

Options:

series.graph.hoverAnimation

Whether to enable the highlight animation effect of mousr hover node.

series.graph.geoIndex

Index of geographic coordinate to combine with, which is useful for multiple geographic axes in one chart.

series.graph.polarIndex

Index of polar coordinate to combine with, which is useful for multiple polar axes in one chart.

series.graph.yAxisIndex

Index of y axis to combine with, which is useful for multiple y axes in one chart.

series.graph.xAxisIndex

Index of x axis to combine with, which is useful for multiple x axes in one chart.

series.graph.coordinateSystem

The coordinate used in the series, whose options are:

series.graph.legendHoverLink

Whether to enable highlighting chart when legend is being hovered.

series.graph.name

Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption.

series.lines

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:

series.lines.animationDelayUpdate

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.

series.lines.animationEasingUpdate

Easing method used for animation.

series.lines.animationDurationUpdate

Time for animation to complete.

series.lines.animationDelay

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.

series.lines.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.lines.animationDuration

Duration of the first animation.

series.lines.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.lines.animation

Whether to enable animation.

series.lines.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.lines.z

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.

series.lines.zlevel

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.

series.lines.markArea

Used to mark an area in chart. For example, mark a time interval.

series.lines.markArea.animationDelayUpdate

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.

series.lines.markArea.animationEasingUpdate

Easing method used for animation.

series.lines.markArea.animationDurationUpdate

Time for animation to complete.

series.lines.markArea.animationDelay

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.

series.lines.markArea.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.lines.markArea.animationDuration

Duration of the first animation.

series.lines.markArea.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.lines.markArea.animation

Whether to enable animation.

series.lines.markArea.data

The scope of the area is defined by data, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:

  1. Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 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%'
        }
    ]
]

series.lines.markArea.data.1

Specify the right-bottom point.

series.lines.markArea.data.1.label

Label style of the item. Label style of start point and end point will be merged together.

series.lines.markArea.data.1.label.emphasis.textStyle

Label font style.

series.lines.markArea.data.1.label.emphasis.textStyle.fontSize

font size

series.lines.markArea.data.1.label.emphasis.textStyle.fontFamily

font family

series.lines.markArea.data.1.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.lines.markArea.data.1.label.emphasis.textStyle.fontStyle

font style

Options are:

series.lines.markArea.data.1.label.emphasis.textStyle.color

text color.

series.lines.markArea.data.1.label.emphasis.position

Label position.

Followings are the options:

series.lines.markArea.data.1.label.emphasis.show

Whether to show label.

series.lines.markArea.data.1.label.normal.textStyle

Label font style.

series.lines.markArea.data.1.label.normal.textStyle.fontSize

font size

series.lines.markArea.data.1.label.normal.textStyle.fontFamily

font family

series.lines.markArea.data.1.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.lines.markArea.data.1.label.normal.textStyle.fontStyle

font style

Options are:

series.lines.markArea.data.1.label.normal.textStyle.color

text color.

series.lines.markArea.data.1.label.normal.position

Label position.

Followings are the options:

series.lines.markArea.data.1.label.normal.show

Whether to show label.

series.lines.markArea.data.1.itemStyle

Style of the item. itemStyle of start point and end point will be merged together.

series.lines.markArea.data.1.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.lines.markArea.data.1.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.lines.markArea.data.1.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.lines.markArea.data.1.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.lines.markArea.data.1.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markArea.data.1.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.lines.markArea.data.1.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.lines.markArea.data.1.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.lines.markArea.data.1.itemStyle.emphasis.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
)

series.lines.markArea.data.1.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.lines.markArea.data.1.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.lines.markArea.data.1.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.lines.markArea.data.1.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.lines.markArea.data.1.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markArea.data.1.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.lines.markArea.data.1.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.lines.markArea.data.1.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.lines.markArea.data.1.itemStyle.normal.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
)

series.lines.markArea.data.1.value

value of the item, not necessary.

series.lines.markArea.data.1.y

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.lines.markArea.data.1.x

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.lines.markArea.data.0

Specify the left-top point.

series.lines.markArea.data.0.label

Label style of the item. Label style of start point and end point will be merged together.

series.lines.markArea.data.0.label.emphasis.textStyle

Label font style.

series.lines.markArea.data.0.label.emphasis.textStyle.fontSize

font size

series.lines.markArea.data.0.label.emphasis.textStyle.fontFamily

font family

series.lines.markArea.data.0.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.lines.markArea.data.0.label.emphasis.textStyle.fontStyle

font style

Options are:

series.lines.markArea.data.0.label.emphasis.textStyle.color

text color.

series.lines.markArea.data.0.label.emphasis.position

Label position.

Followings are the options:

series.lines.markArea.data.0.label.emphasis.show

Whether to show label.

series.lines.markArea.data.0.label.normal.textStyle

Label font style.

series.lines.markArea.data.0.label.normal.textStyle.fontSize

font size

series.lines.markArea.data.0.label.normal.textStyle.fontFamily

font family

series.lines.markArea.data.0.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.lines.markArea.data.0.label.normal.textStyle.fontStyle

font style

Options are:

series.lines.markArea.data.0.label.normal.textStyle.color

text color.

series.lines.markArea.data.0.label.normal.position

Label position.

Followings are the options:

series.lines.markArea.data.0.label.normal.show

Whether to show label.

series.lines.markArea.data.0.itemStyle

Style of the item. itemStyle of start point and end point will be merged together.

series.lines.markArea.data.0.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.lines.markArea.data.0.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.lines.markArea.data.0.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.lines.markArea.data.0.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.lines.markArea.data.0.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markArea.data.0.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.lines.markArea.data.0.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.lines.markArea.data.0.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.lines.markArea.data.0.itemStyle.emphasis.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
)

series.lines.markArea.data.0.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.lines.markArea.data.0.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.lines.markArea.data.0.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.lines.markArea.data.0.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.lines.markArea.data.0.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markArea.data.0.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.lines.markArea.data.0.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.lines.markArea.data.0.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.lines.markArea.data.0.itemStyle.normal.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
)

series.lines.markArea.data.0.value

value of the item, not necessary.

series.lines.markArea.data.0.y

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.lines.markArea.data.0.x

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.lines.markArea.itemStyle

Style of the mark area.

series.lines.markArea.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.lines.markArea.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.lines.markArea.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.lines.markArea.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.lines.markArea.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markArea.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.lines.markArea.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.lines.markArea.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.lines.markArea.itemStyle.emphasis.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
)

series.lines.markArea.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.lines.markArea.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.lines.markArea.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.lines.markArea.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.lines.markArea.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markArea.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.lines.markArea.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.lines.markArea.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.lines.markArea.itemStyle.normal.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
)

series.lines.markArea.label

Label in mark area.

series.lines.markArea.label.emphasis.textStyle

Label font style.

series.lines.markArea.label.emphasis.textStyle.fontSize

font size

series.lines.markArea.label.emphasis.textStyle.fontFamily

font family

series.lines.markArea.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.lines.markArea.label.emphasis.textStyle.fontStyle

font style

Options are:

series.lines.markArea.label.emphasis.textStyle.color

text color.

series.lines.markArea.label.emphasis.position

Label position.

Followings are the options:

series.lines.markArea.label.emphasis.show

Whether to show label.

series.lines.markArea.label.normal.textStyle

Label font style.

series.lines.markArea.label.normal.textStyle.fontSize

font size

series.lines.markArea.label.normal.textStyle.fontFamily

font family

series.lines.markArea.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.lines.markArea.label.normal.textStyle.fontStyle

font style

Options are:

series.lines.markArea.label.normal.textStyle.color

text color.

series.lines.markArea.label.normal.position

Label position.

Followings are the options:

series.lines.markArea.label.normal.show

Whether to show label.

series.lines.markArea.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.lines.markLine

Use a line in the chart to illustrate.

series.lines.markLine.animationDelayUpdate

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.

series.lines.markLine.animationEasingUpdate

Easing method used for animation.

series.lines.markLine.animationDurationUpdate

Time for animation to complete.

series.lines.markLine.animationDelay

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.

series.lines.markLine.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.lines.markLine.animationDuration

Duration of the first animation.

series.lines.markLine.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.lines.markLine.animation

Whether to enable animation.

series.lines.markLine.data

Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.

  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.

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
        }
    ]
]

series.lines.markLine.data.1

Data of the ending point.

series.lines.markLine.data.1.label

Label of this data item, which will be merged with label of starting point and ending point.

series.lines.markLine.data.1.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.lines.markLine.data.1.label.emphasis.position

Positions of labels can be:

series.lines.markLine.data.1.label.emphasis.show

Whether show label or not.

series.lines.markLine.data.1.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.lines.markLine.data.1.label.normal.position

Positions of labels can be:

series.lines.markLine.data.1.label.normal.show

Whether show label or not.

series.lines.markLine.data.1.lineStyle

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

series.lines.markLine.data.1.lineStyle.emphasis.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.lines.markLine.data.1.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.lines.markLine.data.1.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.lines.markLine.data.1.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.lines.markLine.data.1.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.lines.markLine.data.1.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markLine.data.1.lineStyle.emphasis.type

line type.

Options are:

series.lines.markLine.data.1.lineStyle.emphasis.width

line width.

series.lines.markLine.data.1.lineStyle.emphasis.color

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.lines.markLine.data.1.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.lines.markLine.data.1.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.lines.markLine.data.1.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.lines.markLine.data.1.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.lines.markLine.data.1.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.lines.markLine.data.1.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markLine.data.1.lineStyle.normal.type

line type.

Options are:

series.lines.markLine.data.1.lineStyle.normal.width

line width.

series.lines.markLine.data.1.lineStyle.normal.color

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.lines.markLine.data.1.symbolOffset

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.

series.lines.markLine.data.1.symbolRotate

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.

series.lines.markLine.data.1.symbolSize

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.

series.lines.markLine.data.1.symbol

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.

series.lines.markLine.data.1.value

Label value, which can be ignored.

series.lines.markLine.data.1.y

Y position according to container, in pixel.

series.lines.markLine.data.1.x

X position according to container, in pixel.

series.lines.markLine.data.0

Data of the starting point.

series.lines.markLine.data.0.label

Label of this data item, which will be merged with label of starting point and ending point.

series.lines.markLine.data.0.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.lines.markLine.data.0.label.emphasis.position

Positions of labels can be:

series.lines.markLine.data.0.label.emphasis.show

Whether show label or not.

series.lines.markLine.data.0.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.lines.markLine.data.0.label.normal.position

Positions of labels can be:

series.lines.markLine.data.0.label.normal.show

Whether show label or not.

series.lines.markLine.data.0.lineStyle

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

series.lines.markLine.data.0.lineStyle.emphasis.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.lines.markLine.data.0.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.lines.markLine.data.0.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.lines.markLine.data.0.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.lines.markLine.data.0.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.lines.markLine.data.0.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markLine.data.0.lineStyle.emphasis.type

line type.

Options are:

series.lines.markLine.data.0.lineStyle.emphasis.width

line width.

series.lines.markLine.data.0.lineStyle.emphasis.color

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.lines.markLine.data.0.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.lines.markLine.data.0.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.lines.markLine.data.0.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.lines.markLine.data.0.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.lines.markLine.data.0.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.lines.markLine.data.0.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markLine.data.0.lineStyle.normal.type

line type.

Options are:

series.lines.markLine.data.0.lineStyle.normal.width

line width.

series.lines.markLine.data.0.lineStyle.normal.color

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.lines.markLine.data.0.symbolOffset

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.

series.lines.markLine.data.0.symbolRotate

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.

series.lines.markLine.data.0.symbolSize

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.

series.lines.markLine.data.0.symbol

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.

series.lines.markLine.data.0.value

Label value, which can be ignored.

series.lines.markLine.data.0.y

Y position according to container, in pixel.

series.lines.markLine.data.0.x

X position according to container, in pixel.

series.lines.markLine.lineStyle

Mark line style.

series.lines.markLine.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.lines.markLine.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.lines.markLine.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.lines.markLine.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.lines.markLine.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markLine.lineStyle.emphasis.type

line type.

Options are:

series.lines.markLine.lineStyle.emphasis.width

line width.

series.lines.markLine.lineStyle.emphasis.color

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.lines.markLine.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.lines.markLine.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.lines.markLine.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.lines.markLine.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.lines.markLine.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.lines.markLine.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markLine.lineStyle.normal.type

line type.

Options are:

series.lines.markLine.lineStyle.normal.width

line width.

series.lines.markLine.lineStyle.normal.color

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.lines.markLine.label

Mark line text.

series.lines.markLine.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.lines.markLine.label.emphasis.position

Positions of labels can be:

series.lines.markLine.label.emphasis.show

Whether show label or not.

series.lines.markLine.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.lines.markLine.label.normal.position

Positions of labels can be:

series.lines.markLine.label.normal.show

Whether show label or not.

series.lines.markLine.precision

Precison of marking line value, which is useful when displaying average value mark line.

series.lines.markLine.symbolSize

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.

series.lines.markLine.symbol

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.

series.lines.markLine.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.lines.markPoint

Mark point in a chart.

series.lines.markPoint.animationDelayUpdate

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

series.lines.markPoint.animationEasingUpdate

Easing method used for animation.

series.lines.markPoint.animationDurationUpdate

Time for animation to complete.

series.lines.markPoint.animationDelay

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.

series.lines.markPoint.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.lines.markPoint.animationDuration

Duration of the first animation.

series.lines.markPoint.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.lines.markPoint.animation

Whether to enable animation.

series.lines.markPoint.data

Data array for mark points, each of which is an object. Here are some ways to assign mark point position.

  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.

When multiple attributes exist, priority is as the above order.

For example:

data: [
    {
        name: 'screen coordinate',
        x: 100,
        y: 100
    }
]

series.lines.markPoint.itemStyle

Mark point style.

series.lines.markPoint.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.lines.markPoint.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.lines.markPoint.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.lines.markPoint.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.lines.markPoint.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markPoint.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.lines.markPoint.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.lines.markPoint.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.lines.markPoint.itemStyle.emphasis.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
)

series.lines.markPoint.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.lines.markPoint.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.lines.markPoint.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.lines.markPoint.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.lines.markPoint.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markPoint.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.lines.markPoint.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.lines.markPoint.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.lines.markPoint.itemStyle.normal.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
)

series.lines.markPoint.label

Label of mark point.

series.lines.markPoint.label.emphasis.textStyle

Label font style.

series.lines.markPoint.label.emphasis.textStyle.fontSize

font size

series.lines.markPoint.label.emphasis.textStyle.fontFamily

font family

series.lines.markPoint.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.lines.markPoint.label.emphasis.textStyle.fontStyle

font style

Options are:

series.lines.markPoint.label.emphasis.textStyle.color

text color.

series.lines.markPoint.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.lines.markPoint.label.emphasis.position

Label position.

Followings are the options:

series.lines.markPoint.label.emphasis.show

Whether to show label.

series.lines.markPoint.label.normal.textStyle

Label font style.

series.lines.markPoint.label.normal.textStyle.fontSize

font size

series.lines.markPoint.label.normal.textStyle.fontFamily

font family

series.lines.markPoint.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.lines.markPoint.label.normal.textStyle.fontStyle

font style

Options are:

series.lines.markPoint.label.normal.textStyle.color

text color.

series.lines.markPoint.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.lines.markPoint.label.normal.position

Label position.

Followings are the options:

series.lines.markPoint.label.normal.show

Whether to show label.

series.lines.markPoint.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.lines.markPoint.symbolOffset

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.

series.lines.markPoint.symbolRotate

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.

series.lines.markPoint.symbolSize

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.

series.lines.markPoint.symbol

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.

series.lines.data

The data set of lines.

series.lines.label.emphasis.textStyle.fontSize

font size

series.lines.label.emphasis.textStyle.fontFamily

font family

series.lines.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.lines.label.emphasis.textStyle.fontStyle

font style

Options are:

series.lines.label.emphasis.textStyle.color

text color.

series.lines.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.lines.label.emphasis.position

the position of label, options:

series.lines.label.emphasis.show

Whether to show label.

series.lines.label.normal.textStyle.fontSize

font size

series.lines.label.normal.textStyle.fontFamily

font family

series.lines.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.lines.label.normal.textStyle.fontStyle

font style

Options are:

series.lines.label.normal.textStyle.color

text color.

series.lines.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.lines.label.normal.position

the position of label, options:

series.lines.label.normal.show

Whether to show label.

series.lines.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.lines.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.lines.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.lines.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.lines.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.lineStyle.emphasis.type

line type.

Options are:

series.lines.lineStyle.emphasis.width

line width.

series.lines.lineStyle.emphasis.color

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.lines.lineStyle.normal.curveness

The curveness of edge. The values from 0 to 1 could be set. The curveness would be larger as the the value becomes larger.

series.lines.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.lines.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.lines.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.lines.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.lines.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.lineStyle.normal.type

line type.

Options are:

series.lines.lineStyle.normal.width

line width.

series.lines.lineStyle.normal.color

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
)

series.lines.largeThreshold

The threshold enabling the drawing optimization.

series.lines.large

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

series.lines.effect

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.

series.lines.effect.loop

Whether to loop the special effect animation.

series.lines.effect.trailLength

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.

series.lines.effect.color

The color of special effect symbol, which defaults to be same with lineStyle.normal.color.

series.lines.effect.symbolSize

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.

series.lines.effect.symbol

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.

series.lines.effect.constantSpeed

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.

series.lines.effect.period

The duration of special effect, which unit is second.

series.lines.effect.show

Whether to show special effect.

series.lines.polyline

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.

series.lines.geoIndex

Index of geographic coordinate to combine with, which is useful for multiple geographic axes in one chart.

series.lines.yAxisIndex

Index of y axis to combine with, which is useful for multiple y axes in one chart.

series.lines.xAxisIndex

Index of x axis to combine with, which is useful for multiple x axes in one chart.

series.lines.coordinateSystem

The coordinate used in the series, whose options are:

series.lines.name

Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption.

series.parallel

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



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:

series.parallel.animationDelayUpdate

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.

series.parallel.animationEasingUpdate

Easing method used for animation.

series.parallel.animationDurationUpdate

Time for animation to complete.

series.parallel.animationDelay

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.

series.parallel.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.parallel.animationDuration

Duration of the first animation.

series.parallel.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.parallel.animation

Whether to enable animation.

series.parallel.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.parallel.z

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.

series.parallel.zlevel

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.

series.parallel.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".

series.parallel.realtime

Whether to update view in realtime.

series.parallel.activeOpacity

When perform brush selection, the selected lines will be set as this transparency rate (which could highlight those lines).

series.parallel.inactiveOpacity

When perform brush selection, the unselected lines will be set as this transparency rate (which could darken those lines).

series.parallel.lineStyle

Line style.

series.parallel.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.parallel.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.parallel.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.parallel.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.parallel.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.parallel.lineStyle.emphasis.type

line type.

Options are:

series.parallel.lineStyle.emphasis.width

line width.

series.parallel.lineStyle.emphasis.color

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.parallel.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.parallel.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.parallel.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.parallel.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.parallel.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.parallel.lineStyle.normal.type

line type.

Options are:

series.parallel.lineStyle.normal.width

line width.

series.parallel.lineStyle.normal.color

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.parallel.name

Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption.

series.parallel.parallelIndex

Index of parallel coordinates to combine with, which is useful for multiple parallel axes in one chart.

series.parallel.coordinateSystem

The coordinate used in the series, whose options are:

series.map

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:

series.map.data

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:{}
}]

series.map.showLegendSymbol

Show the symbol in related area (dot of series symbol). Available when legend component exists.

series.map.mapValueCalculation

Value of multiple series with the same map type can use this option to get a statistical value.

Supported statistical methods:

series.map.layoutSize

Size of map, see layoutCenter for more information. Percentage relative to screen width, and absolute pixel values are supported.

series.map.layoutCenter

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.

series.map.bottom

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.

series.map.right

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.

series.map.top

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.

series.map.left

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.

series.map.z

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.

series.map.zlevel

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.

series.map.itemStyle

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.

series.map.itemStyle.emphasis

Map area style in highlighted state.

series.map.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.map.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.map.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.map.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.map.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.map.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.map.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.map.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.map.itemStyle.emphasis.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
)

series.map.itemStyle.emphasis.areaColor

Area filling color.

series.map.itemStyle.normal

Map area style in normal state.

series.map.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.map.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.map.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.map.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.map.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.map.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.map.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.map.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.map.itemStyle.normal.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
)

series.map.itemStyle.normal.areaColor

Area filling color.

series.map.label

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, labelis taken to be at the same level with itemStyle, and has two status normal and emphasis as itemStyle does.

series.map.label.emphasis.textStyle

Style of text in highlighted state.

series.map.label.emphasis.textStyle.fontSize

font size

series.map.label.emphasis.textStyle.fontFamily

font family

series.map.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.map.label.emphasis.textStyle.fontStyle

font style

Options are:

series.map.label.emphasis.textStyle.color

text color.

series.map.label.emphasis.show

Whether to show label in highlighted state.

series.map.label.normal.textStyle

Style of text in normal state.

series.map.label.normal.textStyle.fontSize

font size

series.map.label.normal.textStyle.fontFamily

font family

series.map.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.map.label.normal.textStyle.fontStyle

font style

Options are:

series.map.label.normal.textStyle.color

text color.

series.map.label.normal.show

Whether to show label in normal state.

series.map.selectedMode

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.

series.map.nameMap

Name mapping for customized areas. For example:

{
    'China' : '中国'
}

series.map.scaleLimit

Limit of scaling, with min and max. 1 by default.

series.map.scaleLimit.max

Maximum scaling

series.map.scaleLimit.min

Minimum scaling

series.map.zoom

Zoom rate of current view-port.

series.map.aspectScale

Used to scale aspect of geo.

The final aspect is calculated by: geoBoundingRect.width / geoBoundingRect.height * aspectScale.

series.map.center

Center of current view-port, in longitude and latitude.

Example:

center: [115.97, 29.71]

series.map.roam

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.

series.map.map

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.map.name

Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption.

series.heatmap

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:

series.heatmap.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.heatmap.z

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.

series.heatmap.zlevel

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.

series.heatmap.markArea

Used to mark an area in chart. For example, mark a time interval.

series.heatmap.markArea.animationDelayUpdate

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.

series.heatmap.markArea.animationEasingUpdate

Easing method used for animation.

series.heatmap.markArea.animationDurationUpdate

Time for animation to complete.

series.heatmap.markArea.animationDelay

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.

series.heatmap.markArea.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.heatmap.markArea.animationDuration

Duration of the first animation.

series.heatmap.markArea.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.heatmap.markArea.animation

Whether to enable animation.

series.heatmap.markArea.data

The scope of the area is defined by data, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:

  1. Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 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%'
        }
    ]
]

series.heatmap.markArea.data.1

Specify the right-bottom point.

series.heatmap.markArea.data.1.label

Label style of the item. Label style of start point and end point will be merged together.

series.heatmap.markArea.data.1.label.emphasis.textStyle

Label font style.

series.heatmap.markArea.data.1.label.emphasis.textStyle.fontSize

font size

series.heatmap.markArea.data.1.label.emphasis.textStyle.fontFamily

font family

series.heatmap.markArea.data.1.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.heatmap.markArea.data.1.label.emphasis.textStyle.fontStyle

font style

Options are:

series.heatmap.markArea.data.1.label.emphasis.textStyle.color

text color.

series.heatmap.markArea.data.1.label.emphasis.position

Label position.

Followings are the options:

series.heatmap.markArea.data.1.label.emphasis.show

Whether to show label.

series.heatmap.markArea.data.1.label.normal.textStyle

Label font style.

series.heatmap.markArea.data.1.label.normal.textStyle.fontSize

font size

series.heatmap.markArea.data.1.label.normal.textStyle.fontFamily

font family

series.heatmap.markArea.data.1.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.heatmap.markArea.data.1.label.normal.textStyle.fontStyle

font style

Options are:

series.heatmap.markArea.data.1.label.normal.textStyle.color

text color.

series.heatmap.markArea.data.1.label.normal.position

Label position.

Followings are the options:

series.heatmap.markArea.data.1.label.normal.show

Whether to show label.

series.heatmap.markArea.data.1.itemStyle

Style of the item. itemStyle of start point and end point will be merged together.

series.heatmap.markArea.data.1.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.heatmap.markArea.data.1.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.heatmap.markArea.data.1.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.heatmap.markArea.data.1.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.heatmap.markArea.data.1.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markArea.data.1.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.heatmap.markArea.data.1.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.heatmap.markArea.data.1.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.heatmap.markArea.data.1.itemStyle.emphasis.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
)

series.heatmap.markArea.data.1.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.heatmap.markArea.data.1.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.heatmap.markArea.data.1.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.heatmap.markArea.data.1.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.heatmap.markArea.data.1.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markArea.data.1.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.heatmap.markArea.data.1.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.heatmap.markArea.data.1.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.heatmap.markArea.data.1.itemStyle.normal.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
)

series.heatmap.markArea.data.1.value

value of the item, not necessary.

series.heatmap.markArea.data.1.y

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.heatmap.markArea.data.1.x

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.heatmap.markArea.data.0

Specify the left-top point.

series.heatmap.markArea.data.0.label

Label style of the item. Label style of start point and end point will be merged together.

series.heatmap.markArea.data.0.label.emphasis.textStyle

Label font style.

series.heatmap.markArea.data.0.label.emphasis.textStyle.fontSize

font size

series.heatmap.markArea.data.0.label.emphasis.textStyle.fontFamily

font family

series.heatmap.markArea.data.0.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.heatmap.markArea.data.0.label.emphasis.textStyle.fontStyle

font style

Options are:

series.heatmap.markArea.data.0.label.emphasis.textStyle.color

text color.

series.heatmap.markArea.data.0.label.emphasis.position

Label position.

Followings are the options:

series.heatmap.markArea.data.0.label.emphasis.show

Whether to show label.

series.heatmap.markArea.data.0.label.normal.textStyle

Label font style.

series.heatmap.markArea.data.0.label.normal.textStyle.fontSize

font size

series.heatmap.markArea.data.0.label.normal.textStyle.fontFamily

font family

series.heatmap.markArea.data.0.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.heatmap.markArea.data.0.label.normal.textStyle.fontStyle

font style

Options are:

series.heatmap.markArea.data.0.label.normal.textStyle.color

text color.

series.heatmap.markArea.data.0.label.normal.position

Label position.

Followings are the options:

series.heatmap.markArea.data.0.label.normal.show

Whether to show label.

series.heatmap.markArea.data.0.itemStyle

Style of the item. itemStyle of start point and end point will be merged together.

series.heatmap.markArea.data.0.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.heatmap.markArea.data.0.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.heatmap.markArea.data.0.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.heatmap.markArea.data.0.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.heatmap.markArea.data.0.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markArea.data.0.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.heatmap.markArea.data.0.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.heatmap.markArea.data.0.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.heatmap.markArea.data.0.itemStyle.emphasis.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
)

series.heatmap.markArea.data.0.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.heatmap.markArea.data.0.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.heatmap.markArea.data.0.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.heatmap.markArea.data.0.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.heatmap.markArea.data.0.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markArea.data.0.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.heatmap.markArea.data.0.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.heatmap.markArea.data.0.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.heatmap.markArea.data.0.itemStyle.normal.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
)

series.heatmap.markArea.data.0.value

value of the item, not necessary.

series.heatmap.markArea.data.0.y

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.heatmap.markArea.data.0.x

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.heatmap.markArea.itemStyle

Style of the mark area.

series.heatmap.markArea.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.heatmap.markArea.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.heatmap.markArea.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.heatmap.markArea.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.heatmap.markArea.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markArea.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.heatmap.markArea.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.heatmap.markArea.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.heatmap.markArea.itemStyle.emphasis.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
)

series.heatmap.markArea.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.heatmap.markArea.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.heatmap.markArea.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.heatmap.markArea.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.heatmap.markArea.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markArea.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.heatmap.markArea.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.heatmap.markArea.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.heatmap.markArea.itemStyle.normal.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
)

series.heatmap.markArea.label

Label in mark area.

series.heatmap.markArea.label.emphasis.textStyle

Label font style.

series.heatmap.markArea.label.emphasis.textStyle.fontSize

font size

series.heatmap.markArea.label.emphasis.textStyle.fontFamily

font family

series.heatmap.markArea.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.heatmap.markArea.label.emphasis.textStyle.fontStyle

font style

Options are:

series.heatmap.markArea.label.emphasis.textStyle.color

text color.

series.heatmap.markArea.label.emphasis.position

Label position.

Followings are the options:

series.heatmap.markArea.label.emphasis.show

Whether to show label.

series.heatmap.markArea.label.normal.textStyle

Label font style.

series.heatmap.markArea.label.normal.textStyle.fontSize

font size

series.heatmap.markArea.label.normal.textStyle.fontFamily

font family

series.heatmap.markArea.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.heatmap.markArea.label.normal.textStyle.fontStyle

font style

Options are:

series.heatmap.markArea.label.normal.textStyle.color

text color.

series.heatmap.markArea.label.normal.position

Label position.

Followings are the options:

series.heatmap.markArea.label.normal.show

Whether to show label.

series.heatmap.markArea.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.heatmap.markLine

Use a line in the chart to illustrate.

series.heatmap.markLine.animationDelayUpdate

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.

series.heatmap.markLine.animationEasingUpdate

Easing method used for animation.

series.heatmap.markLine.animationDurationUpdate

Time for animation to complete.

series.heatmap.markLine.animationDelay

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.

series.heatmap.markLine.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.heatmap.markLine.animationDuration

Duration of the first animation.

series.heatmap.markLine.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.heatmap.markLine.animation

Whether to enable animation.

series.heatmap.markLine.data

Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.

  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.

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
        }
    ]
]

series.heatmap.markLine.data.1

Data of the ending point.

series.heatmap.markLine.data.1.label

Label of this data item, which will be merged with label of starting point and ending point.

series.heatmap.markLine.data.1.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.heatmap.markLine.data.1.label.emphasis.position

Positions of labels can be:

series.heatmap.markLine.data.1.label.emphasis.show

Whether show label or not.

series.heatmap.markLine.data.1.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.heatmap.markLine.data.1.label.normal.position

Positions of labels can be:

series.heatmap.markLine.data.1.label.normal.show

Whether show label or not.

series.heatmap.markLine.data.1.lineStyle

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

series.heatmap.markLine.data.1.lineStyle.emphasis.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.heatmap.markLine.data.1.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.heatmap.markLine.data.1.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.heatmap.markLine.data.1.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.heatmap.markLine.data.1.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.heatmap.markLine.data.1.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markLine.data.1.lineStyle.emphasis.type

line type.

Options are:

series.heatmap.markLine.data.1.lineStyle.emphasis.width

line width.

series.heatmap.markLine.data.1.lineStyle.emphasis.color

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.heatmap.markLine.data.1.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.heatmap.markLine.data.1.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.heatmap.markLine.data.1.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.heatmap.markLine.data.1.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.heatmap.markLine.data.1.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.heatmap.markLine.data.1.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markLine.data.1.lineStyle.normal.type

line type.

Options are:

series.heatmap.markLine.data.1.lineStyle.normal.width

line width.

series.heatmap.markLine.data.1.lineStyle.normal.color

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.heatmap.markLine.data.1.symbolOffset

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.

series.heatmap.markLine.data.1.symbolRotate

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.

series.heatmap.markLine.data.1.symbolSize

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.

series.heatmap.markLine.data.1.symbol

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.

series.heatmap.markLine.data.1.value

Label value, which can be ignored.

series.heatmap.markLine.data.1.y

Y position according to container, in pixel.

series.heatmap.markLine.data.1.x

X position according to container, in pixel.

series.heatmap.markLine.data.0

Data of the starting point.

series.heatmap.markLine.data.0.label

Label of this data item, which will be merged with label of starting point and ending point.

series.heatmap.markLine.data.0.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.heatmap.markLine.data.0.label.emphasis.position

Positions of labels can be:

series.heatmap.markLine.data.0.label.emphasis.show

Whether show label or not.

series.heatmap.markLine.data.0.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.heatmap.markLine.data.0.label.normal.position

Positions of labels can be:

series.heatmap.markLine.data.0.label.normal.show

Whether show label or not.

series.heatmap.markLine.data.0.lineStyle

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

series.heatmap.markLine.data.0.lineStyle.emphasis.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.heatmap.markLine.data.0.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.heatmap.markLine.data.0.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.heatmap.markLine.data.0.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.heatmap.markLine.data.0.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.heatmap.markLine.data.0.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markLine.data.0.lineStyle.emphasis.type

line type.

Options are:

series.heatmap.markLine.data.0.lineStyle.emphasis.width

line width.

series.heatmap.markLine.data.0.lineStyle.emphasis.color

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.heatmap.markLine.data.0.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.heatmap.markLine.data.0.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.heatmap.markLine.data.0.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.heatmap.markLine.data.0.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.heatmap.markLine.data.0.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.heatmap.markLine.data.0.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markLine.data.0.lineStyle.normal.type

line type.

Options are:

series.heatmap.markLine.data.0.lineStyle.normal.width

line width.

series.heatmap.markLine.data.0.lineStyle.normal.color

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.heatmap.markLine.data.0.symbolOffset

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.

series.heatmap.markLine.data.0.symbolRotate

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.

series.heatmap.markLine.data.0.symbolSize

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.

series.heatmap.markLine.data.0.symbol

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.

series.heatmap.markLine.data.0.value

Label value, which can be ignored.

series.heatmap.markLine.data.0.y

Y position according to container, in pixel.

series.heatmap.markLine.data.0.x

X position according to container, in pixel.

series.heatmap.markLine.lineStyle

Mark line style.

series.heatmap.markLine.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.heatmap.markLine.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.heatmap.markLine.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.heatmap.markLine.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.heatmap.markLine.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markLine.lineStyle.emphasis.type

line type.

Options are:

series.heatmap.markLine.lineStyle.emphasis.width

line width.

series.heatmap.markLine.lineStyle.emphasis.color

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.heatmap.markLine.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.heatmap.markLine.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.heatmap.markLine.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.heatmap.markLine.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.heatmap.markLine.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.heatmap.markLine.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markLine.lineStyle.normal.type

line type.

Options are:

series.heatmap.markLine.lineStyle.normal.width

line width.

series.heatmap.markLine.lineStyle.normal.color

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.heatmap.markLine.label

Mark line text.

series.heatmap.markLine.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.heatmap.markLine.label.emphasis.position

Positions of labels can be:

series.heatmap.markLine.label.emphasis.show

Whether show label or not.

series.heatmap.markLine.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.heatmap.markLine.label.normal.position

Positions of labels can be:

series.heatmap.markLine.label.normal.show

Whether show label or not.

series.heatmap.markLine.precision

Precison of marking line value, which is useful when displaying average value mark line.

series.heatmap.markLine.symbolSize

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.

series.heatmap.markLine.symbol

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.

series.heatmap.markLine.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.heatmap.markPoint

Mark point in a chart.

series.heatmap.markPoint.animationDelayUpdate

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

series.heatmap.markPoint.animationEasingUpdate

Easing method used for animation.

series.heatmap.markPoint.animationDurationUpdate

Time for animation to complete.

series.heatmap.markPoint.animationDelay

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.

series.heatmap.markPoint.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.heatmap.markPoint.animationDuration

Duration of the first animation.

series.heatmap.markPoint.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.heatmap.markPoint.animation

Whether to enable animation.

series.heatmap.markPoint.data

Data array for mark points, each of which is an object. Here are some ways to assign mark point position.

  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.

When multiple attributes exist, priority is as the above order.

For example:

data: [
    {
        name: 'screen coordinate',
        x: 100,
        y: 100
    }
]

series.heatmap.markPoint.itemStyle

Mark point style.

series.heatmap.markPoint.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.heatmap.markPoint.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.heatmap.markPoint.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.heatmap.markPoint.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.heatmap.markPoint.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markPoint.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.heatmap.markPoint.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.heatmap.markPoint.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.heatmap.markPoint.itemStyle.emphasis.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
)

series.heatmap.markPoint.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.heatmap.markPoint.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.heatmap.markPoint.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.heatmap.markPoint.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.heatmap.markPoint.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markPoint.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.heatmap.markPoint.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.heatmap.markPoint.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.heatmap.markPoint.itemStyle.normal.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
)

series.heatmap.markPoint.label

Label of mark point.

series.heatmap.markPoint.label.emphasis.textStyle

Label font style.

series.heatmap.markPoint.label.emphasis.textStyle.fontSize

font size

series.heatmap.markPoint.label.emphasis.textStyle.fontFamily

font family

series.heatmap.markPoint.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.heatmap.markPoint.label.emphasis.textStyle.fontStyle

font style

Options are:

series.heatmap.markPoint.label.emphasis.textStyle.color

text color.

series.heatmap.markPoint.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.heatmap.markPoint.label.emphasis.position

Label position.

Followings are the options:

series.heatmap.markPoint.label.emphasis.show

Whether to show label.

series.heatmap.markPoint.label.normal.textStyle

Label font style.

series.heatmap.markPoint.label.normal.textStyle.fontSize

font size

series.heatmap.markPoint.label.normal.textStyle.fontFamily

font family

series.heatmap.markPoint.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.heatmap.markPoint.label.normal.textStyle.fontStyle

font style

Options are:

series.heatmap.markPoint.label.normal.textStyle.color

text color.

series.heatmap.markPoint.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.heatmap.markPoint.label.normal.position

Label position.

Followings are the options:

series.heatmap.markPoint.label.normal.show

Whether to show label.

series.heatmap.markPoint.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.heatmap.markPoint.symbolOffset

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.

series.heatmap.markPoint.symbolRotate

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.

series.heatmap.markPoint.symbolSize

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.

series.heatmap.markPoint.symbol

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.

series.heatmap.data

Data array of series, which can be in the following forms:

  1. 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]
    
  2. 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.

  3. 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.

series.heatmap.maxOpacity

Maximum opacity. It is valid with coordinateSystem of 'geo' value.

series.heatmap.minOpacity

Minimum opacity. It is valid with coordinateSystem of 'geo' value.

series.heatmap.blurSize

Blur size of each data point. It is valid with coordinateSystem of 'geo' value.

series.heatmap.geoIndex

Index of geographic coordinate to combine with, which is useful for multiple geographic axes in one chart.

series.heatmap.yAxisIndex

Index of y axis to combine with, which is useful for multiple y axes in one chart.

series.heatmap.xAxisIndex

Index of x axis to combine with, which is useful for multiple x axes in one chart.

series.heatmap.coordinateSystem

The coordinate used in the series, whose options are:

series.heatmap.name

Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption.

series.candlestick

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.



series.candlestick.animationDelay

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.

series.candlestick.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.candlestick.animationDuration

Duration of the first animation.

series.candlestick.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.candlestick.z

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.

series.candlestick.zlevel

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.

series.candlestick.markArea

Used to mark an area in chart. For example, mark a time interval.

series.candlestick.markArea.animationDelayUpdate

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.

series.candlestick.markArea.animationEasingUpdate

Easing method used for animation.

series.candlestick.markArea.animationDurationUpdate

Time for animation to complete.

series.candlestick.markArea.animationDelay

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.

series.candlestick.markArea.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.candlestick.markArea.animationDuration

Duration of the first animation.

series.candlestick.markArea.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.candlestick.markArea.animation

Whether to enable animation.

series.candlestick.markArea.data

The scope of the area is defined by data, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:

  1. Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 5), or percent (e.g., the value is '35%').

  2. 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'])。

  1. Locate the point on the min value or max value of series.data using type, where valueIndex or valueDim can be used to specify the dimension on which the min, max or average are calculated.
  2. If in cartesian, you can only specify xAxis or yAxis to define a mark area based on only X or Y axis, see sample scatter-weight

The 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%'
        }
    ]
]

series.candlestick.markArea.data.1

Specify the right-bottom point.

series.candlestick.markArea.data.1.label

Label style of the item. Label style of start point and end point will be merged together.

series.candlestick.markArea.data.1.label.emphasis.textStyle

Label font style.

series.candlestick.markArea.data.1.label.emphasis.textStyle.fontSize

font size

series.candlestick.markArea.data.1.label.emphasis.textStyle.fontFamily

font family

series.candlestick.markArea.data.1.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.candlestick.markArea.data.1.label.emphasis.textStyle.fontStyle

font style

Options are:

series.candlestick.markArea.data.1.label.emphasis.textStyle.color

text color.

series.candlestick.markArea.data.1.label.emphasis.position

Label position.

Followings are the options:

series.candlestick.markArea.data.1.label.emphasis.show

Whether to show label.

series.candlestick.markArea.data.1.label.normal.textStyle

Label font style.

series.candlestick.markArea.data.1.label.normal.textStyle.fontSize

font size

series.candlestick.markArea.data.1.label.normal.textStyle.fontFamily

font family

series.candlestick.markArea.data.1.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.candlestick.markArea.data.1.label.normal.textStyle.fontStyle

font style

Options are:

series.candlestick.markArea.data.1.label.normal.textStyle.color

text color.

series.candlestick.markArea.data.1.label.normal.position

Label position.

Followings are the options:

series.candlestick.markArea.data.1.label.normal.show

Whether to show label.

series.candlestick.markArea.data.1.itemStyle

Style of the item. itemStyle of start point and end point will be merged together.

series.candlestick.markArea.data.1.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.candlestick.markArea.data.1.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.candlestick.markArea.data.1.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.candlestick.markArea.data.1.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.candlestick.markArea.data.1.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markArea.data.1.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.candlestick.markArea.data.1.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.candlestick.markArea.data.1.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.candlestick.markArea.data.1.itemStyle.emphasis.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
)

series.candlestick.markArea.data.1.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.candlestick.markArea.data.1.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.candlestick.markArea.data.1.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.candlestick.markArea.data.1.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.candlestick.markArea.data.1.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markArea.data.1.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.candlestick.markArea.data.1.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.candlestick.markArea.data.1.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.candlestick.markArea.data.1.itemStyle.normal.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
)

series.candlestick.markArea.data.1.value

value of the item, not necessary.

series.candlestick.markArea.data.1.y

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.candlestick.markArea.data.1.x

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.candlestick.markArea.data.1.coord

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

series.candlestick.markArea.data.1.valueDim

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).

series.candlestick.markArea.data.1.valueIndex

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.

series.candlestick.markArea.data.1.type

Specify this item is on min or max or average value.

Options:

series.candlestick.markArea.data.0

Specify the left-top point.

series.candlestick.markArea.data.0.label

Label style of the item. Label style of start point and end point will be merged together.

series.candlestick.markArea.data.0.label.emphasis.textStyle

Label font style.

series.candlestick.markArea.data.0.label.emphasis.textStyle.fontSize

font size

series.candlestick.markArea.data.0.label.emphasis.textStyle.fontFamily

font family

series.candlestick.markArea.data.0.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.candlestick.markArea.data.0.label.emphasis.textStyle.fontStyle

font style

Options are:

series.candlestick.markArea.data.0.label.emphasis.textStyle.color

text color.

series.candlestick.markArea.data.0.label.emphasis.position

Label position.

Followings are the options:

series.candlestick.markArea.data.0.label.emphasis.show

Whether to show label.

series.candlestick.markArea.data.0.label.normal.textStyle

Label font style.

series.candlestick.markArea.data.0.label.normal.textStyle.fontSize

font size

series.candlestick.markArea.data.0.label.normal.textStyle.fontFamily

font family

series.candlestick.markArea.data.0.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.candlestick.markArea.data.0.label.normal.textStyle.fontStyle

font style

Options are:

series.candlestick.markArea.data.0.label.normal.textStyle.color

text color.

series.candlestick.markArea.data.0.label.normal.position

Label position.

Followings are the options:

series.candlestick.markArea.data.0.label.normal.show

Whether to show label.

series.candlestick.markArea.data.0.itemStyle

Style of the item. itemStyle of start point and end point will be merged together.

series.candlestick.markArea.data.0.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.candlestick.markArea.data.0.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.candlestick.markArea.data.0.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.candlestick.markArea.data.0.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.candlestick.markArea.data.0.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markArea.data.0.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.candlestick.markArea.data.0.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.candlestick.markArea.data.0.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.candlestick.markArea.data.0.itemStyle.emphasis.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
)

series.candlestick.markArea.data.0.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.candlestick.markArea.data.0.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.candlestick.markArea.data.0.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.candlestick.markArea.data.0.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.candlestick.markArea.data.0.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markArea.data.0.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.candlestick.markArea.data.0.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.candlestick.markArea.data.0.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.candlestick.markArea.data.0.itemStyle.normal.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
)

series.candlestick.markArea.data.0.value

value of the item, not necessary.

series.candlestick.markArea.data.0.y

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.candlestick.markArea.data.0.x

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.candlestick.markArea.data.0.coord

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

series.candlestick.markArea.data.0.valueDim

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).

series.candlestick.markArea.data.0.valueIndex

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.

series.candlestick.markArea.data.0.type

Specify this item is on min or max or average value.

Options:

series.candlestick.markArea.itemStyle

Style of the mark area.

series.candlestick.markArea.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.candlestick.markArea.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.candlestick.markArea.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.candlestick.markArea.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.candlestick.markArea.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markArea.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.candlestick.markArea.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.candlestick.markArea.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.candlestick.markArea.itemStyle.emphasis.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
)

series.candlestick.markArea.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.candlestick.markArea.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.candlestick.markArea.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.candlestick.markArea.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.candlestick.markArea.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markArea.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.candlestick.markArea.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.candlestick.markArea.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.candlestick.markArea.itemStyle.normal.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
)

series.candlestick.markArea.label

Label in mark area.

series.candlestick.markArea.label.emphasis.textStyle

Label font style.

series.candlestick.markArea.label.emphasis.textStyle.fontSize

font size

series.candlestick.markArea.label.emphasis.textStyle.fontFamily

font family

series.candlestick.markArea.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.candlestick.markArea.label.emphasis.textStyle.fontStyle

font style

Options are:

series.candlestick.markArea.label.emphasis.textStyle.color

text color.

series.candlestick.markArea.label.emphasis.position

Label position.

Followings are the options:

series.candlestick.markArea.label.emphasis.show

Whether to show label.

series.candlestick.markArea.label.normal.textStyle

Label font style.

series.candlestick.markArea.label.normal.textStyle.fontSize

font size

series.candlestick.markArea.label.normal.textStyle.fontFamily

font family

series.candlestick.markArea.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.candlestick.markArea.label.normal.textStyle.fontStyle

font style

Options are:

series.candlestick.markArea.label.normal.textStyle.color

text color.

series.candlestick.markArea.label.normal.position

Label position.

Followings are the options:

series.candlestick.markArea.label.normal.show

Whether to show label.

series.candlestick.markArea.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.candlestick.markLine

Use a line in the chart to illustrate.

series.candlestick.markLine.animationDelayUpdate

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.

series.candlestick.markLine.animationEasingUpdate

Easing method used for animation.

series.candlestick.markLine.animationDurationUpdate

Time for animation to complete.

series.candlestick.markLine.animationDelay

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.

series.candlestick.markLine.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.candlestick.markLine.animationDuration

Duration of the first animation.

series.candlestick.markLine.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.candlestick.markLine.animation

Whether to enable animation.

series.candlestick.markLine.data

Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.

  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.

  2. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

  3. 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.

  4. You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning xAxis or yAxis. See scatter-weight 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
        }
    ]
]

series.candlestick.markLine.data.1

Data of the ending point.

series.candlestick.markLine.data.1.label

Label of this data item, which will be merged with label of starting point and ending point.

series.candlestick.markLine.data.1.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.candlestick.markLine.data.1.label.emphasis.position

Positions of labels can be:

series.candlestick.markLine.data.1.label.emphasis.show

Whether show label or not.

series.candlestick.markLine.data.1.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.candlestick.markLine.data.1.label.normal.position

Positions of labels can be:

series.candlestick.markLine.data.1.label.normal.show

Whether show label or not.

series.candlestick.markLine.data.1.lineStyle

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

series.candlestick.markLine.data.1.lineStyle.emphasis.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.candlestick.markLine.data.1.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.candlestick.markLine.data.1.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.candlestick.markLine.data.1.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.candlestick.markLine.data.1.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.candlestick.markLine.data.1.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markLine.data.1.lineStyle.emphasis.type

line type.

Options are:

series.candlestick.markLine.data.1.lineStyle.emphasis.width

line width.

series.candlestick.markLine.data.1.lineStyle.emphasis.color

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.candlestick.markLine.data.1.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.candlestick.markLine.data.1.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.candlestick.markLine.data.1.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.candlestick.markLine.data.1.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.candlestick.markLine.data.1.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.candlestick.markLine.data.1.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markLine.data.1.lineStyle.normal.type

line type.

Options are:

series.candlestick.markLine.data.1.lineStyle.normal.width

line width.

series.candlestick.markLine.data.1.lineStyle.normal.color

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.candlestick.markLine.data.1.symbolOffset

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.

series.candlestick.markLine.data.1.symbolRotate

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.

series.candlestick.markLine.data.1.symbolSize

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.

series.candlestick.markLine.data.1.symbol

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.

series.candlestick.markLine.data.1.value

Label value, which can be ignored.

series.candlestick.markLine.data.1.y

Y position according to container, in pixel.

series.candlestick.markLine.data.1.x

X position according to container, in pixel.

series.candlestick.markLine.data.1.coord

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':

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.
            }]
        }
    }
}

series.candlestick.markLine.data.1.valueDim

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.

series.candlestick.markLine.data.1.valueIndex

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.

series.candlestick.markLine.data.1.type

Special label types, are used to label maximum value, minimum value and so on.

Options are:

series.candlestick.markLine.data.0

Data of the starting point.

series.candlestick.markLine.data.0.label

Label of this data item, which will be merged with label of starting point and ending point.

series.candlestick.markLine.data.0.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.candlestick.markLine.data.0.label.emphasis.position

Positions of labels can be:

series.candlestick.markLine.data.0.label.emphasis.show

Whether show label or not.

series.candlestick.markLine.data.0.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.candlestick.markLine.data.0.label.normal.position

Positions of labels can be:

series.candlestick.markLine.data.0.label.normal.show

Whether show label or not.

series.candlestick.markLine.data.0.lineStyle

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

series.candlestick.markLine.data.0.lineStyle.emphasis.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.candlestick.markLine.data.0.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.candlestick.markLine.data.0.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.candlestick.markLine.data.0.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.candlestick.markLine.data.0.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.candlestick.markLine.data.0.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markLine.data.0.lineStyle.emphasis.type

line type.

Options are:

series.candlestick.markLine.data.0.lineStyle.emphasis.width

line width.

series.candlestick.markLine.data.0.lineStyle.emphasis.color

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.candlestick.markLine.data.0.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.candlestick.markLine.data.0.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.candlestick.markLine.data.0.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.candlestick.markLine.data.0.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.candlestick.markLine.data.0.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.candlestick.markLine.data.0.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markLine.data.0.lineStyle.normal.type

line type.

Options are:

series.candlestick.markLine.data.0.lineStyle.normal.width

line width.

series.candlestick.markLine.data.0.lineStyle.normal.color

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.candlestick.markLine.data.0.symbolOffset

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.

series.candlestick.markLine.data.0.symbolRotate

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.

series.candlestick.markLine.data.0.symbolSize

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.

series.candlestick.markLine.data.0.symbol

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.

series.candlestick.markLine.data.0.value

Label value, which can be ignored.

series.candlestick.markLine.data.0.y

Y position according to container, in pixel.

series.candlestick.markLine.data.0.x

X position according to container, in pixel.

series.candlestick.markLine.data.0.coord

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':

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.
            }]
        }
    }
}

series.candlestick.markLine.data.0.valueDim

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.

series.candlestick.markLine.data.0.valueIndex

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.

series.candlestick.markLine.data.0.type

Special label types, are used to label maximum value, minimum value and so on.

Options are:

series.candlestick.markLine.lineStyle

Mark line style.

series.candlestick.markLine.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.candlestick.markLine.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.candlestick.markLine.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.candlestick.markLine.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.candlestick.markLine.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markLine.lineStyle.emphasis.type

line type.

Options are:

series.candlestick.markLine.lineStyle.emphasis.width

line width.

series.candlestick.markLine.lineStyle.emphasis.color

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.candlestick.markLine.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.candlestick.markLine.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.candlestick.markLine.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.candlestick.markLine.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.candlestick.markLine.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.candlestick.markLine.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markLine.lineStyle.normal.type

line type.

Options are:

series.candlestick.markLine.lineStyle.normal.width

line width.

series.candlestick.markLine.lineStyle.normal.color

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.candlestick.markLine.label

Mark line text.

series.candlestick.markLine.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.candlestick.markLine.label.emphasis.position

Positions of labels can be:

series.candlestick.markLine.label.emphasis.show

Whether show label or not.

series.candlestick.markLine.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.candlestick.markLine.label.normal.position

Positions of labels can be:

series.candlestick.markLine.label.normal.show

Whether show label or not.

series.candlestick.markLine.precision

Precison of marking line value, which is useful when displaying average value mark line.

series.candlestick.markLine.symbolSize

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.

series.candlestick.markLine.symbol

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.

series.candlestick.markLine.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.candlestick.markPoint

Mark point in a chart.

series.candlestick.markPoint.animationDelayUpdate

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

series.candlestick.markPoint.animationEasingUpdate

Easing method used for animation.

series.candlestick.markPoint.animationDurationUpdate

Time for animation to complete.

series.candlestick.markPoint.animationDelay

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.

series.candlestick.markPoint.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.candlestick.markPoint.animationDuration

Duration of the first animation.

series.candlestick.markPoint.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.candlestick.markPoint.animation

Whether to enable animation.

series.candlestick.markPoint.data

Data array for mark points, each of which is an object. Here are some ways to assign mark point position.

  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.

  2. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

  3. 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
    }
]

series.candlestick.markPoint.itemStyle

Mark point style.

series.candlestick.markPoint.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.candlestick.markPoint.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.candlestick.markPoint.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.candlestick.markPoint.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.candlestick.markPoint.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markPoint.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.candlestick.markPoint.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.candlestick.markPoint.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.candlestick.markPoint.itemStyle.emphasis.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
)

series.candlestick.markPoint.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.candlestick.markPoint.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.candlestick.markPoint.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.candlestick.markPoint.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.candlestick.markPoint.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markPoint.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.candlestick.markPoint.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.candlestick.markPoint.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.candlestick.markPoint.itemStyle.normal.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
)

series.candlestick.markPoint.label

Label of mark point.

series.candlestick.markPoint.label.emphasis.textStyle

Label font style.

series.candlestick.markPoint.label.emphasis.textStyle.fontSize

font size

series.candlestick.markPoint.label.emphasis.textStyle.fontFamily

font family

series.candlestick.markPoint.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.candlestick.markPoint.label.emphasis.textStyle.fontStyle

font style

Options are:

series.candlestick.markPoint.label.emphasis.textStyle.color

text color.

series.candlestick.markPoint.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.candlestick.markPoint.label.emphasis.position

Label position.

Followings are the options:

series.candlestick.markPoint.label.emphasis.show

Whether to show label.

series.candlestick.markPoint.label.normal.textStyle

Label font style.

series.candlestick.markPoint.label.normal.textStyle.fontSize

font size

series.candlestick.markPoint.label.normal.textStyle.fontFamily

font family

series.candlestick.markPoint.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.candlestick.markPoint.label.normal.textStyle.fontStyle

font style

Options are:

series.candlestick.markPoint.label.normal.textStyle.color

text color.

series.candlestick.markPoint.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.candlestick.markPoint.label.normal.position

Label position.

Followings are the options:

series.candlestick.markPoint.label.normal.show

Whether to show label.

series.candlestick.markPoint.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.candlestick.markPoint.symbolOffset

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.

series.candlestick.markPoint.symbolRotate

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.

series.candlestick.markPoint.symbolSize

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.

series.candlestick.markPoint.symbol

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.

series.candlestick.data

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])

series.candlestick.itemStyle

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.

series.candlestick.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.candlestick.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.candlestick.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.candlestick.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.candlestick.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.itemStyle.emphasis.borderWidth

Border width of candlestick. There is no border when it is 0.

series.candlestick.itemStyle.emphasis.borderColor0

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
)

series.candlestick.itemStyle.emphasis.borderColor

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
)

series.candlestick.itemStyle.emphasis.color0

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
)

series.candlestick.itemStyle.emphasis.color

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
)

series.candlestick.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.candlestick.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.candlestick.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.candlestick.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.candlestick.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.itemStyle.normal.borderWidth

Border width of candlestick. There is no border when it is 0.

series.candlestick.itemStyle.normal.borderColor0

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
)

series.candlestick.itemStyle.normal.borderColor

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
)

series.candlestick.itemStyle.normal.color0

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
)

series.candlestick.itemStyle.normal.color

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
)

series.candlestick.layout

Layout method, whose values may be:

The default value is decided by:

series.candlestick.hoverAnimation

Whether to enable animitation when hovering on box.

series.candlestick.legendHoverLink

Whether to enable highlighting chart when legend is being hovered.

series.candlestick.name

Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption.

series.candlestick.yAxisIndex

Index of y axis to combine with, which is useful for multiple y axes in one chart.

series.candlestick.xAxisIndex

Index of x axis to combine with, which is useful for multiple x axes in one chart.

series.candlestick.coordinateSystem

The coordinate used in the series, whose options are:

series.boxplot

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.



series.boxplot.animationDelay

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.

series.boxplot.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.boxplot.animationDuration

Duration of the first animation.

series.boxplot.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.boxplot.z

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.

series.boxplot.zlevel

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.

series.boxplot.markArea

Used to mark an area in chart. For example, mark a time interval.

series.boxplot.markArea.animationDelayUpdate

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.

series.boxplot.markArea.animationEasingUpdate

Easing method used for animation.

series.boxplot.markArea.animationDurationUpdate

Time for animation to complete.

series.boxplot.markArea.animationDelay

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.

series.boxplot.markArea.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.boxplot.markArea.animationDuration

Duration of the first animation.

series.boxplot.markArea.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.boxplot.markArea.animation

Whether to enable animation.

series.boxplot.markArea.data

The scope of the area is defined by data, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:

  1. Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 5), or percent (e.g., the value is '35%').

  2. 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'])。

  1. Locate the point on the min value or max value of series.data using type, where valueIndex or valueDim can be used to specify the dimension on which the min, max or average are calculated.
  2. If in cartesian, you can only specify xAxis or yAxis to define a mark area based on only X or Y axis, see sample scatter-weight

The 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%'
        }
    ]
]

series.boxplot.markArea.data.1

Specify the right-bottom point.

series.boxplot.markArea.data.1.label

Label style of the item. Label style of start point and end point will be merged together.

series.boxplot.markArea.data.1.label.emphasis.textStyle

Label font style.

series.boxplot.markArea.data.1.label.emphasis.textStyle.fontSize

font size

series.boxplot.markArea.data.1.label.emphasis.textStyle.fontFamily

font family

series.boxplot.markArea.data.1.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.boxplot.markArea.data.1.label.emphasis.textStyle.fontStyle

font style

Options are:

series.boxplot.markArea.data.1.label.emphasis.textStyle.color

text color.

series.boxplot.markArea.data.1.label.emphasis.position

Label position.

Followings are the options:

series.boxplot.markArea.data.1.label.emphasis.show

Whether to show label.

series.boxplot.markArea.data.1.label.normal.textStyle

Label font style.

series.boxplot.markArea.data.1.label.normal.textStyle.fontSize

font size

series.boxplot.markArea.data.1.label.normal.textStyle.fontFamily

font family

series.boxplot.markArea.data.1.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.boxplot.markArea.data.1.label.normal.textStyle.fontStyle

font style

Options are:

series.boxplot.markArea.data.1.label.normal.textStyle.color

text color.

series.boxplot.markArea.data.1.label.normal.position

Label position.

Followings are the options:

series.boxplot.markArea.data.1.label.normal.show

Whether to show label.

series.boxplot.markArea.data.1.itemStyle

Style of the item. itemStyle of start point and end point will be merged together.

series.boxplot.markArea.data.1.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.boxplot.markArea.data.1.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.boxplot.markArea.data.1.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.boxplot.markArea.data.1.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.boxplot.markArea.data.1.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markArea.data.1.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.boxplot.markArea.data.1.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.boxplot.markArea.data.1.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.boxplot.markArea.data.1.itemStyle.emphasis.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
)

series.boxplot.markArea.data.1.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.boxplot.markArea.data.1.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.boxplot.markArea.data.1.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.boxplot.markArea.data.1.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.boxplot.markArea.data.1.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markArea.data.1.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.boxplot.markArea.data.1.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.boxplot.markArea.data.1.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.boxplot.markArea.data.1.itemStyle.normal.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
)

series.boxplot.markArea.data.1.value

value of the item, not necessary.

series.boxplot.markArea.data.1.y

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.boxplot.markArea.data.1.x

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.boxplot.markArea.data.1.coord

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

series.boxplot.markArea.data.1.valueDim

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).

series.boxplot.markArea.data.1.valueIndex

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.

series.boxplot.markArea.data.1.type

Specify this item is on min or max or average value.

Options:

series.boxplot.markArea.data.0

Specify the left-top point.

series.boxplot.markArea.data.0.label

Label style of the item. Label style of start point and end point will be merged together.

series.boxplot.markArea.data.0.label.emphasis.textStyle

Label font style.

series.boxplot.markArea.data.0.label.emphasis.textStyle.fontSize

font size

series.boxplot.markArea.data.0.label.emphasis.textStyle.fontFamily

font family

series.boxplot.markArea.data.0.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.boxplot.markArea.data.0.label.emphasis.textStyle.fontStyle

font style

Options are:

series.boxplot.markArea.data.0.label.emphasis.textStyle.color

text color.

series.boxplot.markArea.data.0.label.emphasis.position

Label position.

Followings are the options:

series.boxplot.markArea.data.0.label.emphasis.show

Whether to show label.

series.boxplot.markArea.data.0.label.normal.textStyle

Label font style.

series.boxplot.markArea.data.0.label.normal.textStyle.fontSize

font size

series.boxplot.markArea.data.0.label.normal.textStyle.fontFamily

font family

series.boxplot.markArea.data.0.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.boxplot.markArea.data.0.label.normal.textStyle.fontStyle

font style

Options are:

series.boxplot.markArea.data.0.label.normal.textStyle.color

text color.

series.boxplot.markArea.data.0.label.normal.position

Label position.

Followings are the options:

series.boxplot.markArea.data.0.label.normal.show

Whether to show label.

series.boxplot.markArea.data.0.itemStyle

Style of the item. itemStyle of start point and end point will be merged together.

series.boxplot.markArea.data.0.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.boxplot.markArea.data.0.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.boxplot.markArea.data.0.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.boxplot.markArea.data.0.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.boxplot.markArea.data.0.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markArea.data.0.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.boxplot.markArea.data.0.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.boxplot.markArea.data.0.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.boxplot.markArea.data.0.itemStyle.emphasis.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
)

series.boxplot.markArea.data.0.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.boxplot.markArea.data.0.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.boxplot.markArea.data.0.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.boxplot.markArea.data.0.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.boxplot.markArea.data.0.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markArea.data.0.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.boxplot.markArea.data.0.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.boxplot.markArea.data.0.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.boxplot.markArea.data.0.itemStyle.normal.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
)

series.boxplot.markArea.data.0.value

value of the item, not necessary.

series.boxplot.markArea.data.0.y

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.boxplot.markArea.data.0.x

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.boxplot.markArea.data.0.coord

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

series.boxplot.markArea.data.0.valueDim

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).

series.boxplot.markArea.data.0.valueIndex

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.

series.boxplot.markArea.data.0.type

Specify this item is on min or max or average value.

Options:

series.boxplot.markArea.itemStyle

Style of the mark area.

series.boxplot.markArea.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.boxplot.markArea.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.boxplot.markArea.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.boxplot.markArea.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.boxplot.markArea.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markArea.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.boxplot.markArea.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.boxplot.markArea.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.boxplot.markArea.itemStyle.emphasis.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
)

series.boxplot.markArea.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.boxplot.markArea.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.boxplot.markArea.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.boxplot.markArea.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.boxplot.markArea.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markArea.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.boxplot.markArea.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.boxplot.markArea.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.boxplot.markArea.itemStyle.normal.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
)

series.boxplot.markArea.label

Label in mark area.

series.boxplot.markArea.label.emphasis.textStyle

Label font style.

series.boxplot.markArea.label.emphasis.textStyle.fontSize

font size

series.boxplot.markArea.label.emphasis.textStyle.fontFamily

font family

series.boxplot.markArea.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.boxplot.markArea.label.emphasis.textStyle.fontStyle

font style

Options are:

series.boxplot.markArea.label.emphasis.textStyle.color

text color.

series.boxplot.markArea.label.emphasis.position

Label position.

Followings are the options:

series.boxplot.markArea.label.emphasis.show

Whether to show label.

series.boxplot.markArea.label.normal.textStyle

Label font style.

series.boxplot.markArea.label.normal.textStyle.fontSize

font size

series.boxplot.markArea.label.normal.textStyle.fontFamily

font family

series.boxplot.markArea.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.boxplot.markArea.label.normal.textStyle.fontStyle

font style

Options are:

series.boxplot.markArea.label.normal.textStyle.color

text color.

series.boxplot.markArea.label.normal.position

Label position.

Followings are the options:

series.boxplot.markArea.label.normal.show

Whether to show label.

series.boxplot.markArea.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.boxplot.markLine

Use a line in the chart to illustrate.

series.boxplot.markLine.animationDelayUpdate

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.

series.boxplot.markLine.animationEasingUpdate

Easing method used for animation.

series.boxplot.markLine.animationDurationUpdate

Time for animation to complete.

series.boxplot.markLine.animationDelay

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.

series.boxplot.markLine.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.boxplot.markLine.animationDuration

Duration of the first animation.

series.boxplot.markLine.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.boxplot.markLine.animation

Whether to enable animation.

series.boxplot.markLine.data

Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.

  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.

  2. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

  3. 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.

  4. You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning xAxis or yAxis. See scatter-weight 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
        }
    ]
]

series.boxplot.markLine.data.1

Data of the ending point.

series.boxplot.markLine.data.1.label

Label of this data item, which will be merged with label of starting point and ending point.

series.boxplot.markLine.data.1.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.boxplot.markLine.data.1.label.emphasis.position

Positions of labels can be:

series.boxplot.markLine.data.1.label.emphasis.show

Whether show label or not.

series.boxplot.markLine.data.1.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.boxplot.markLine.data.1.label.normal.position

Positions of labels can be:

series.boxplot.markLine.data.1.label.normal.show

Whether show label or not.

series.boxplot.markLine.data.1.lineStyle

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

series.boxplot.markLine.data.1.lineStyle.emphasis.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.boxplot.markLine.data.1.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.boxplot.markLine.data.1.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.boxplot.markLine.data.1.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.boxplot.markLine.data.1.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.boxplot.markLine.data.1.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markLine.data.1.lineStyle.emphasis.type

line type.

Options are:

series.boxplot.markLine.data.1.lineStyle.emphasis.width

line width.

series.boxplot.markLine.data.1.lineStyle.emphasis.color

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.boxplot.markLine.data.1.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.boxplot.markLine.data.1.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.boxplot.markLine.data.1.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.boxplot.markLine.data.1.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.boxplot.markLine.data.1.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.boxplot.markLine.data.1.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markLine.data.1.lineStyle.normal.type

line type.

Options are:

series.boxplot.markLine.data.1.lineStyle.normal.width

line width.

series.boxplot.markLine.data.1.lineStyle.normal.color

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.boxplot.markLine.data.1.symbolOffset

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.

series.boxplot.markLine.data.1.symbolRotate

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.

series.boxplot.markLine.data.1.symbolSize

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.

series.boxplot.markLine.data.1.symbol

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.

series.boxplot.markLine.data.1.value

Label value, which can be ignored.

series.boxplot.markLine.data.1.y

Y position according to container, in pixel.

series.boxplot.markLine.data.1.x

X position according to container, in pixel.

series.boxplot.markLine.data.1.coord

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':

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.
            }]
        }
    }
}

series.boxplot.markLine.data.1.valueDim

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.

series.boxplot.markLine.data.1.valueIndex

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.

series.boxplot.markLine.data.1.type

Special label types, are used to label maximum value, minimum value and so on.

Options are:

series.boxplot.markLine.data.0

Data of the starting point.

series.boxplot.markLine.data.0.label

Label of this data item, which will be merged with label of starting point and ending point.

series.boxplot.markLine.data.0.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.boxplot.markLine.data.0.label.emphasis.position

Positions of labels can be:

series.boxplot.markLine.data.0.label.emphasis.show

Whether show label or not.

series.boxplot.markLine.data.0.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.boxplot.markLine.data.0.label.normal.position

Positions of labels can be:

series.boxplot.markLine.data.0.label.normal.show

Whether show label or not.

series.boxplot.markLine.data.0.lineStyle

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

series.boxplot.markLine.data.0.lineStyle.emphasis.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.boxplot.markLine.data.0.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.boxplot.markLine.data.0.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.boxplot.markLine.data.0.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.boxplot.markLine.data.0.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.boxplot.markLine.data.0.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markLine.data.0.lineStyle.emphasis.type

line type.

Options are:

series.boxplot.markLine.data.0.lineStyle.emphasis.width

line width.

series.boxplot.markLine.data.0.lineStyle.emphasis.color

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.boxplot.markLine.data.0.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.boxplot.markLine.data.0.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.boxplot.markLine.data.0.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.boxplot.markLine.data.0.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.boxplot.markLine.data.0.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.boxplot.markLine.data.0.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markLine.data.0.lineStyle.normal.type

line type.

Options are:

series.boxplot.markLine.data.0.lineStyle.normal.width

line width.

series.boxplot.markLine.data.0.lineStyle.normal.color

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.boxplot.markLine.data.0.symbolOffset

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.

series.boxplot.markLine.data.0.symbolRotate

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.

series.boxplot.markLine.data.0.symbolSize

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.

series.boxplot.markLine.data.0.symbol

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.

series.boxplot.markLine.data.0.value

Label value, which can be ignored.

series.boxplot.markLine.data.0.y

Y position according to container, in pixel.

series.boxplot.markLine.data.0.x

X position according to container, in pixel.

series.boxplot.markLine.data.0.coord

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':

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.
            }]
        }
    }
}

series.boxplot.markLine.data.0.valueDim

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.

series.boxplot.markLine.data.0.valueIndex

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.

series.boxplot.markLine.data.0.type

Special label types, are used to label maximum value, minimum value and so on.

Options are:

series.boxplot.markLine.lineStyle

Mark line style.

series.boxplot.markLine.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.boxplot.markLine.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.boxplot.markLine.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.boxplot.markLine.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.boxplot.markLine.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markLine.lineStyle.emphasis.type

line type.

Options are:

series.boxplot.markLine.lineStyle.emphasis.width

line width.

series.boxplot.markLine.lineStyle.emphasis.color

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.boxplot.markLine.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.boxplot.markLine.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.boxplot.markLine.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.boxplot.markLine.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.boxplot.markLine.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.boxplot.markLine.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markLine.lineStyle.normal.type

line type.

Options are:

series.boxplot.markLine.lineStyle.normal.width

line width.

series.boxplot.markLine.lineStyle.normal.color

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.boxplot.markLine.label

Mark line text.

series.boxplot.markLine.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.boxplot.markLine.label.emphasis.position

Positions of labels can be:

series.boxplot.markLine.label.emphasis.show

Whether show label or not.

series.boxplot.markLine.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.boxplot.markLine.label.normal.position

Positions of labels can be:

series.boxplot.markLine.label.normal.show

Whether show label or not.

series.boxplot.markLine.precision

Precison of marking line value, which is useful when displaying average value mark line.

series.boxplot.markLine.symbolSize

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.

series.boxplot.markLine.symbol

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.

series.boxplot.markLine.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.boxplot.markPoint

Mark point in a chart.

series.boxplot.markPoint.animationDelayUpdate

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

series.boxplot.markPoint.animationEasingUpdate

Easing method used for animation.

series.boxplot.markPoint.animationDurationUpdate

Time for animation to complete.

series.boxplot.markPoint.animationDelay

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.

series.boxplot.markPoint.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.boxplot.markPoint.animationDuration

Duration of the first animation.

series.boxplot.markPoint.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.boxplot.markPoint.animation

Whether to enable animation.

series.boxplot.markPoint.data

Data array for mark points, each of which is an object. Here are some ways to assign mark point position.

  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.

  2. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

  3. 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
    }
]

series.boxplot.markPoint.itemStyle

Mark point style.

series.boxplot.markPoint.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.boxplot.markPoint.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.boxplot.markPoint.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.boxplot.markPoint.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.boxplot.markPoint.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markPoint.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.boxplot.markPoint.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.boxplot.markPoint.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.boxplot.markPoint.itemStyle.emphasis.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
)

series.boxplot.markPoint.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.boxplot.markPoint.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.boxplot.markPoint.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.boxplot.markPoint.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.boxplot.markPoint.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markPoint.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.boxplot.markPoint.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.boxplot.markPoint.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.boxplot.markPoint.itemStyle.normal.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
)

series.boxplot.markPoint.label

Label of mark point.

series.boxplot.markPoint.label.emphasis.textStyle

Label font style.

series.boxplot.markPoint.label.emphasis.textStyle.fontSize

font size

series.boxplot.markPoint.label.emphasis.textStyle.fontFamily

font family

series.boxplot.markPoint.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.boxplot.markPoint.label.emphasis.textStyle.fontStyle

font style

Options are:

series.boxplot.markPoint.label.emphasis.textStyle.color

text color.

series.boxplot.markPoint.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.boxplot.markPoint.label.emphasis.position

Label position.

Followings are the options:

series.boxplot.markPoint.label.emphasis.show

Whether to show label.

series.boxplot.markPoint.label.normal.textStyle

Label font style.

series.boxplot.markPoint.label.normal.textStyle.fontSize

font size

series.boxplot.markPoint.label.normal.textStyle.fontFamily

font family

series.boxplot.markPoint.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.boxplot.markPoint.label.normal.textStyle.fontStyle

font style

Options are:

series.boxplot.markPoint.label.normal.textStyle.color

text color.

series.boxplot.markPoint.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.boxplot.markPoint.label.normal.position

Label position.

Followings are the options:

series.boxplot.markPoint.label.normal.show

Whether to show label.

series.boxplot.markPoint.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.boxplot.markPoint.symbolOffset

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.

series.boxplot.markPoint.symbolRotate

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.

series.boxplot.markPoint.symbolSize

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.

series.boxplot.markPoint.symbol

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.

series.boxplot.data

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.

series.boxplot.itemStyle

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.

series.boxplot.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.boxplot.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.boxplot.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.boxplot.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.boxplot.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.boxplot.itemStyle.emphasis.borderWidth

boxplot border width. No border when it is set to be 0.

series.boxplot.itemStyle.emphasis.borderColor

boxplot border color, whose format is similar to that of color.

series.boxplot.itemStyle.emphasis.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
)

series.boxplot.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.boxplot.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.boxplot.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.boxplot.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.boxplot.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.boxplot.itemStyle.normal.borderWidth

boxplot border width. No border when it is set to be 0.

series.boxplot.itemStyle.normal.borderColor

boxplot border color, whose format is similar to that of color.

series.boxplot.itemStyle.normal.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
)

series.boxplot.boxWidth

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.

series.boxplot.layout

Layout methods, whose optional values are:

The default value is decided by:

series.boxplot.hoverAnimation

Whether to enable the animation when hovering on box.

series.boxplot.legendHoverLink

Whether to enable highlighting chart when legend is being hovered.

series.boxplot.name

Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption.

series.boxplot.yAxisIndex

Index of y axis to combine with, which is useful for multiple y axes in one chart.

series.boxplot.xAxisIndex

Index of x axis to combine with, which is useful for multiple x axes in one chart.

series.boxplot.coordinateSystem

The coordinate used in the series, whose options are:

series.treemap

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:



series.treemap.animationDelay

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.

series.treemap.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.treemap.animationDuration

Duration of the first animation.

series.treemap.data

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.
    },
    ...
]

series.treemap.breadcrumb

breadcrumb, showing the path of the current node.

series.treemap.breadcrumb.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.

series.treemap.breadcrumb.itemStyle.emphasis.textStyle.fontSize

font size

series.treemap.breadcrumb.itemStyle.emphasis.textStyle.fontFamily

font family

series.treemap.breadcrumb.itemStyle.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.treemap.breadcrumb.itemStyle.emphasis.textStyle.fontStyle

font style

Options are:

series.treemap.breadcrumb.itemStyle.emphasis.textStyle.color

text color.

series.treemap.breadcrumb.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.treemap.breadcrumb.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.treemap.breadcrumb.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.treemap.breadcrumb.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.treemap.breadcrumb.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.treemap.breadcrumb.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.treemap.breadcrumb.itemStyle.emphasis.borderWidth

boxplot border width. No border when it is set to be 0.

series.treemap.breadcrumb.itemStyle.emphasis.borderColor

boxplot border color, whose format is similar to that of color.

series.treemap.breadcrumb.itemStyle.emphasis.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
)

series.treemap.breadcrumb.itemStyle.normal.textStyle.fontSize

font size

series.treemap.breadcrumb.itemStyle.normal.textStyle.fontFamily

font family

series.treemap.breadcrumb.itemStyle.normal.textStyle.fontWeight

font thick weight

Options are:

series.treemap.breadcrumb.itemStyle.normal.textStyle.fontStyle

font style

Options are:

series.treemap.breadcrumb.itemStyle.normal.textStyle.color

text color.

series.treemap.breadcrumb.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.treemap.breadcrumb.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.treemap.breadcrumb.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.treemap.breadcrumb.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.treemap.breadcrumb.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.treemap.breadcrumb.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.treemap.breadcrumb.itemStyle.normal.borderWidth

boxplot border width. No border when it is set to be 0.

series.treemap.breadcrumb.itemStyle.normal.borderColor

boxplot border color, whose format is similar to that of color.

series.treemap.breadcrumb.itemStyle.normal.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
)

series.treemap.breadcrumb.emptyItemWidth

When is no content in breadcrumb, this minimal width need to be set up.

series.treemap.breadcrumb.height

The height of breadcrumb.

series.treemap.breadcrumb.bottom

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.

series.treemap.breadcrumb.right

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.

series.treemap.breadcrumb.top

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.

series.treemap.breadcrumb.left

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.

series.treemap.breadcrumb.show

Whether to show the breadcrumb.

series.treemap.itemStyle


Tps: In treemap, itemStyle attribute could appear in more than one places:


series.treemap.itemStyle.emphasis.color

The color of a node. It use global palette option.color by default.

series.treemap.itemStyle.normal.borderColorSaturation

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.

series.treemap.itemStyle.normal.borderColor

The border color and gap color of a node.

series.treemap.itemStyle.normal.gapWidth

Gaps between child nodes.

series.treemap.itemStyle.normal.borderWidth

The border width of a node. There is no border when it is set as 0.

Tip, gaps between child nodes are specified by gapWidth

series.treemap.itemStyle.normal.colorSaturation

The color saturation of a node. The range is between 0 ~ 1.

series.treemap.itemStyle.normal.colorAlpha

The tranparent rate of a node, the range is between 0 ~ 1.

series.treemap.itemStyle.normal.color

The color of a node. It use global palette option.color by default.

series.treemap.label

label decribes the style of the label in each node.


Tps: In treemap, label attribute could appear in more than one places:


series.treemap.label.emphasis.textStyle.baseline

Vertical alignment, Optional values are 'middle', 'right and 'left'.

series.treemap.label.emphasis.textStyle.align

Horizontal alignment. Optional values are 'center', 'right and 'left'.

series.treemap.label.emphasis.textStyle.fontSize

font size

series.treemap.label.emphasis.textStyle.fontFamily

font family

series.treemap.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.treemap.label.emphasis.textStyle.fontStyle

font style

Options are:

series.treemap.label.emphasis.textStyle.color

text color.

series.treemap.label.emphasis.textStyle.ellipsis

When the text is overflow the rectangle boundary, whether to replace the excess part with apostrophe.

series.treemap.label.emphasis.position

Label position.

Followings are the options:

series.treemap.label.emphasis.show

Wether to show the text label.

series.treemap.label.normal.textStyle.baseline

Vertical alignment, Optional values are 'middle', 'right and 'left'.

series.treemap.label.normal.textStyle.align

Horizontal alignment. Optional values are 'center', 'right and 'left'.

series.treemap.label.normal.textStyle.fontSize

font size

series.treemap.label.normal.textStyle.fontFamily

font family

series.treemap.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.treemap.label.normal.textStyle.fontStyle

font style

Options are:

series.treemap.label.normal.textStyle.color

text color.

series.treemap.label.normal.textStyle.ellipsis

When the text is overflow the rectangle boundary, whether to replace the excess part with apostrophe.

series.treemap.label.normal.position

Label position.

Followings are the options:

series.treemap.label.normal.show

Wether to show the text label.

series.treemap.childrenVisibleMin

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:

series.treemap.visibleMin

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:

series.treemap.colorMappingBy

Specify the rule according to which each node obtain color from color list. Optional values:

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.

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.

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:

series.treemap.colorSaturation

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:

series.treemap.colorAlpha

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:

series.treemap.visualMax

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.

series.treemap.visualMin

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.

series.treemap.visualDimension

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:

series.treemap.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.treemap.silent.children

child nodes, recursive definition, configurations are the same as series-treemap.data.

series.treemap.silent.target

The same meaning as target in html <a> label, See series-treemap.data.link. Option values are: 'blank' or 'self'.

series.treemap.silent.link

Enable hyperlink jump when clicking on node. It is avaliable when series-treemap.nodeClick is 'link'.

See series-treemap.data.target.

series.treemap.levels

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

series.treemap.zoomToNodeRatio

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.

series.treemap.nodeClick

The behaviour when clicking a node. Optional values are:

series.treemap.roam

Whether to enable dragging roam (move and zoom). Optional values are:

series.treemap.leafDepth

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:

series.treemap.squareRatio

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)).

series.treemap.height

Height of treemap component.

series.treemap.width

Width of treemap component.

series.treemap.bottom

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.

series.treemap.right

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.

series.treemap.top

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.

series.treemap.left

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.

series.treemap.z

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.

series.treemap.zlevel

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.

series.radar

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.

series.radar.animationDelayUpdate

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.

series.radar.animationEasingUpdate

Easing method used for animation.

series.radar.animationDurationUpdate

Time for animation to complete.

series.radar.animationDelay

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.

series.radar.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.radar.animationDuration

Duration of the first animation.

series.radar.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.radar.animation

Whether to enable animation.

series.radar.z

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.

series.radar.zlevel

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.

series.radar.data

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.

series.radar.areaStyle

Area filling style.

series.radar.areaStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.radar.areaStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.radar.areaStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.radar.areaStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.radar.areaStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.radar.areaStyle.emphasis.color

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
)

series.radar.areaStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.radar.areaStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.radar.areaStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.radar.areaStyle.normal.shadowColor

Shadow color. Support same format as color.

series.radar.areaStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.radar.areaStyle.normal.color

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
)

series.radar.lineStyle

Line style.

series.radar.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.radar.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.radar.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.radar.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.radar.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.radar.lineStyle.emphasis.type

line type.

Options are:

series.radar.lineStyle.emphasis.width

line width.

series.radar.lineStyle.emphasis.color

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.radar.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.radar.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.radar.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.radar.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.radar.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.radar.lineStyle.normal.type

line type.

Options are:

series.radar.lineStyle.normal.width

line width.

series.radar.lineStyle.normal.color

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.radar.itemStyle

Item style of the inflection point of the lines.

series.radar.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.radar.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.radar.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.radar.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.radar.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.radar.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.radar.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.radar.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.radar.itemStyle.emphasis.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
)

series.radar.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.radar.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.radar.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.radar.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.radar.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.radar.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.radar.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.radar.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.radar.itemStyle.normal.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.

series.radar.label

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, labelis taken to be at the same level with itemStyle, and has two status normal and emphasis as itemStyle does.

series.radar.label.emphasis.textStyle

Label font style.

series.radar.label.emphasis.textStyle.fontSize

font size

series.radar.label.emphasis.textStyle.fontFamily

font family

series.radar.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.radar.label.emphasis.textStyle.fontStyle

font style

Options are:

series.radar.label.emphasis.textStyle.color

text color.

series.radar.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.radar.label.emphasis.position

Label position.

Followings are the options:

series.radar.label.emphasis.show

Whether to show label.

series.radar.label.normal.textStyle

Label font style.

series.radar.label.normal.textStyle.fontSize

font size

series.radar.label.normal.textStyle.fontFamily

font family

series.radar.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.radar.label.normal.textStyle.fontStyle

font style

Options are:

series.radar.label.normal.textStyle.color

text color.

series.radar.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.radar.label.normal.position

Label position.

Followings are the options:

series.radar.label.normal.show

Whether to show label.

series.radar.symbolOffset

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.

series.radar.symbolRotate

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.

series.radar.symbolSize

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.

series.radar.symbol

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.

series.radar.radarIndex

Index of radar component that radar chart uses.

series.radar.name

Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption.

series.effectScatter

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:

series.effectScatter.animationDelayUpdate

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.

series.effectScatter.animationEasingUpdate

Easing method used for animation.

series.effectScatter.animationDurationUpdate

Time for animation to complete.

series.effectScatter.animationDelay

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.

series.effectScatter.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.effectScatter.animationDuration

Duration of the first animation.

series.effectScatter.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.effectScatter.animation

Whether to enable animation.

series.effectScatter.z

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.

series.effectScatter.zlevel

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.

series.effectScatter.markArea

Used to mark an area in chart. For example, mark a time interval.

series.effectScatter.markArea.animationDelayUpdate

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.

series.effectScatter.markArea.animationEasingUpdate

Easing method used for animation.

series.effectScatter.markArea.animationDurationUpdate

Time for animation to complete.

series.effectScatter.markArea.animationDelay

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.

series.effectScatter.markArea.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.effectScatter.markArea.animationDuration

Duration of the first animation.

series.effectScatter.markArea.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.effectScatter.markArea.animation

Whether to enable animation.

series.effectScatter.markArea.data

The scope of the area is defined by data, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:

  1. Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 5), or percent (e.g., the value is '35%').

  2. 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'])。

  1. Locate the point on the min value or max value of series.data using type, where valueIndex or valueDim can be used to specify the dimension on which the min, max or average are calculated.
  2. If in cartesian, you can only specify xAxis or yAxis to define a mark area based on only X or Y axis, see sample scatter-weight

The 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%'
        }
    ]
]

series.effectScatter.markArea.data.1

Specify the right-bottom point.

series.effectScatter.markArea.data.1.label

Label style of the item. Label style of start point and end point will be merged together.

series.effectScatter.markArea.data.1.label.emphasis.textStyle

Label font style.

series.effectScatter.markArea.data.1.label.emphasis.textStyle.fontSize

font size

series.effectScatter.markArea.data.1.label.emphasis.textStyle.fontFamily

font family

series.effectScatter.markArea.data.1.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.effectScatter.markArea.data.1.label.emphasis.textStyle.fontStyle

font style

Options are:

series.effectScatter.markArea.data.1.label.emphasis.textStyle.color

text color.

series.effectScatter.markArea.data.1.label.emphasis.position

Label position.

Followings are the options:

series.effectScatter.markArea.data.1.label.emphasis.show

Whether to show label.

series.effectScatter.markArea.data.1.label.normal.textStyle

Label font style.

series.effectScatter.markArea.data.1.label.normal.textStyle.fontSize

font size

series.effectScatter.markArea.data.1.label.normal.textStyle.fontFamily

font family

series.effectScatter.markArea.data.1.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.effectScatter.markArea.data.1.label.normal.textStyle.fontStyle

font style

Options are:

series.effectScatter.markArea.data.1.label.normal.textStyle.color

text color.

series.effectScatter.markArea.data.1.label.normal.position

Label position.

Followings are the options:

series.effectScatter.markArea.data.1.label.normal.show

Whether to show label.

series.effectScatter.markArea.data.1.itemStyle

Style of the item. itemStyle of start point and end point will be merged together.

series.effectScatter.markArea.data.1.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.effectScatter.markArea.data.1.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.effectScatter.markArea.data.1.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.effectScatter.markArea.data.1.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.effectScatter.markArea.data.1.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markArea.data.1.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.effectScatter.markArea.data.1.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.effectScatter.markArea.data.1.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.effectScatter.markArea.data.1.itemStyle.emphasis.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
)

series.effectScatter.markArea.data.1.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.effectScatter.markArea.data.1.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.effectScatter.markArea.data.1.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.effectScatter.markArea.data.1.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.effectScatter.markArea.data.1.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markArea.data.1.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.effectScatter.markArea.data.1.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.effectScatter.markArea.data.1.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.effectScatter.markArea.data.1.itemStyle.normal.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
)

series.effectScatter.markArea.data.1.value

value of the item, not necessary.

series.effectScatter.markArea.data.1.y

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.effectScatter.markArea.data.1.x

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.effectScatter.markArea.data.1.coord

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

series.effectScatter.markArea.data.1.valueDim

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).

series.effectScatter.markArea.data.1.valueIndex

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.

series.effectScatter.markArea.data.1.type

Specify this item is on min or max or average value.

Options:

series.effectScatter.markArea.data.0

Specify the left-top point.

series.effectScatter.markArea.data.0.label

Label style of the item. Label style of start point and end point will be merged together.

series.effectScatter.markArea.data.0.label.emphasis.textStyle

Label font style.

series.effectScatter.markArea.data.0.label.emphasis.textStyle.fontSize

font size

series.effectScatter.markArea.data.0.label.emphasis.textStyle.fontFamily

font family

series.effectScatter.markArea.data.0.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.effectScatter.markArea.data.0.label.emphasis.textStyle.fontStyle

font style

Options are:

series.effectScatter.markArea.data.0.label.emphasis.textStyle.color

text color.

series.effectScatter.markArea.data.0.label.emphasis.position

Label position.

Followings are the options:

series.effectScatter.markArea.data.0.label.emphasis.show

Whether to show label.

series.effectScatter.markArea.data.0.label.normal.textStyle

Label font style.

series.effectScatter.markArea.data.0.label.normal.textStyle.fontSize

font size

series.effectScatter.markArea.data.0.label.normal.textStyle.fontFamily

font family

series.effectScatter.markArea.data.0.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.effectScatter.markArea.data.0.label.normal.textStyle.fontStyle

font style

Options are:

series.effectScatter.markArea.data.0.label.normal.textStyle.color

text color.

series.effectScatter.markArea.data.0.label.normal.position

Label position.

Followings are the options:

series.effectScatter.markArea.data.0.label.normal.show

Whether to show label.

series.effectScatter.markArea.data.0.itemStyle

Style of the item. itemStyle of start point and end point will be merged together.

series.effectScatter.markArea.data.0.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.effectScatter.markArea.data.0.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.effectScatter.markArea.data.0.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.effectScatter.markArea.data.0.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.effectScatter.markArea.data.0.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markArea.data.0.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.effectScatter.markArea.data.0.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.effectScatter.markArea.data.0.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.effectScatter.markArea.data.0.itemStyle.emphasis.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
)

series.effectScatter.markArea.data.0.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.effectScatter.markArea.data.0.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.effectScatter.markArea.data.0.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.effectScatter.markArea.data.0.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.effectScatter.markArea.data.0.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markArea.data.0.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.effectScatter.markArea.data.0.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.effectScatter.markArea.data.0.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.effectScatter.markArea.data.0.itemStyle.normal.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
)

series.effectScatter.markArea.data.0.value

value of the item, not necessary.

series.effectScatter.markArea.data.0.y

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.effectScatter.markArea.data.0.x

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.effectScatter.markArea.data.0.coord

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

series.effectScatter.markArea.data.0.valueDim

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).

series.effectScatter.markArea.data.0.valueIndex

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.

series.effectScatter.markArea.data.0.type

Specify this item is on min or max or average value.

Options:

series.effectScatter.markArea.itemStyle

Style of the mark area.

series.effectScatter.markArea.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.effectScatter.markArea.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.effectScatter.markArea.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.effectScatter.markArea.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.effectScatter.markArea.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markArea.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.effectScatter.markArea.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.effectScatter.markArea.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.effectScatter.markArea.itemStyle.emphasis.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
)

series.effectScatter.markArea.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.effectScatter.markArea.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.effectScatter.markArea.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.effectScatter.markArea.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.effectScatter.markArea.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markArea.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.effectScatter.markArea.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.effectScatter.markArea.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.effectScatter.markArea.itemStyle.normal.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
)

series.effectScatter.markArea.label

Label in mark area.

series.effectScatter.markArea.label.emphasis.textStyle

Label font style.

series.effectScatter.markArea.label.emphasis.textStyle.fontSize

font size

series.effectScatter.markArea.label.emphasis.textStyle.fontFamily

font family

series.effectScatter.markArea.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.effectScatter.markArea.label.emphasis.textStyle.fontStyle

font style

Options are:

series.effectScatter.markArea.label.emphasis.textStyle.color

text color.

series.effectScatter.markArea.label.emphasis.position

Label position.

Followings are the options:

series.effectScatter.markArea.label.emphasis.show

Whether to show label.

series.effectScatter.markArea.label.normal.textStyle

Label font style.

series.effectScatter.markArea.label.normal.textStyle.fontSize

font size

series.effectScatter.markArea.label.normal.textStyle.fontFamily

font family

series.effectScatter.markArea.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.effectScatter.markArea.label.normal.textStyle.fontStyle

font style

Options are:

series.effectScatter.markArea.label.normal.textStyle.color

text color.

series.effectScatter.markArea.label.normal.position

Label position.

Followings are the options:

series.effectScatter.markArea.label.normal.show

Whether to show label.

series.effectScatter.markArea.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.effectScatter.markLine

Use a line in the chart to illustrate.

series.effectScatter.markLine.animationDelayUpdate

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.

series.effectScatter.markLine.animationEasingUpdate

Easing method used for animation.

series.effectScatter.markLine.animationDurationUpdate

Time for animation to complete.

series.effectScatter.markLine.animationDelay

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.

series.effectScatter.markLine.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.effectScatter.markLine.animationDuration

Duration of the first animation.

series.effectScatter.markLine.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.effectScatter.markLine.animation

Whether to enable animation.

series.effectScatter.markLine.data

Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.

  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.

  2. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

  3. 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.

  4. You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning xAxis or yAxis. See scatter-weight 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
        }
    ]
]

series.effectScatter.markLine.data.1

Data of the ending point.

series.effectScatter.markLine.data.1.label

Label of this data item, which will be merged with label of starting point and ending point.

series.effectScatter.markLine.data.1.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.effectScatter.markLine.data.1.label.emphasis.position

Positions of labels can be:

series.effectScatter.markLine.data.1.label.emphasis.show

Whether show label or not.

series.effectScatter.markLine.data.1.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.effectScatter.markLine.data.1.label.normal.position

Positions of labels can be:

series.effectScatter.markLine.data.1.label.normal.show

Whether show label or not.

series.effectScatter.markLine.data.1.lineStyle

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

series.effectScatter.markLine.data.1.lineStyle.emphasis.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.effectScatter.markLine.data.1.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.effectScatter.markLine.data.1.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.effectScatter.markLine.data.1.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.effectScatter.markLine.data.1.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.effectScatter.markLine.data.1.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markLine.data.1.lineStyle.emphasis.type

line type.

Options are:

series.effectScatter.markLine.data.1.lineStyle.emphasis.width

line width.

series.effectScatter.markLine.data.1.lineStyle.emphasis.color

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.effectScatter.markLine.data.1.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.effectScatter.markLine.data.1.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.effectScatter.markLine.data.1.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.effectScatter.markLine.data.1.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.effectScatter.markLine.data.1.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.effectScatter.markLine.data.1.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markLine.data.1.lineStyle.normal.type

line type.

Options are:

series.effectScatter.markLine.data.1.lineStyle.normal.width

line width.

series.effectScatter.markLine.data.1.lineStyle.normal.color

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.effectScatter.markLine.data.1.symbolOffset

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.

series.effectScatter.markLine.data.1.symbolRotate

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.

series.effectScatter.markLine.data.1.symbolSize

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.

series.effectScatter.markLine.data.1.symbol

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.

series.effectScatter.markLine.data.1.value

Label value, which can be ignored.

series.effectScatter.markLine.data.1.y

Y position according to container, in pixel.

series.effectScatter.markLine.data.1.x

X position according to container, in pixel.

series.effectScatter.markLine.data.1.coord

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':

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.
            }]
        }
    }
}

series.effectScatter.markLine.data.1.valueDim

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.

series.effectScatter.markLine.data.1.valueIndex

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.

series.effectScatter.markLine.data.1.type

Special label types, are used to label maximum value, minimum value and so on.

Options are:

series.effectScatter.markLine.data.0

Data of the starting point.

series.effectScatter.markLine.data.0.label

Label of this data item, which will be merged with label of starting point and ending point.

series.effectScatter.markLine.data.0.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.effectScatter.markLine.data.0.label.emphasis.position

Positions of labels can be:

series.effectScatter.markLine.data.0.label.emphasis.show

Whether show label or not.

series.effectScatter.markLine.data.0.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.effectScatter.markLine.data.0.label.normal.position

Positions of labels can be:

series.effectScatter.markLine.data.0.label.normal.show

Whether show label or not.

series.effectScatter.markLine.data.0.lineStyle

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

series.effectScatter.markLine.data.0.lineStyle.emphasis.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.effectScatter.markLine.data.0.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.effectScatter.markLine.data.0.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.effectScatter.markLine.data.0.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.effectScatter.markLine.data.0.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.effectScatter.markLine.data.0.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markLine.data.0.lineStyle.emphasis.type

line type.

Options are:

series.effectScatter.markLine.data.0.lineStyle.emphasis.width

line width.

series.effectScatter.markLine.data.0.lineStyle.emphasis.color

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.effectScatter.markLine.data.0.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.effectScatter.markLine.data.0.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.effectScatter.markLine.data.0.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.effectScatter.markLine.data.0.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.effectScatter.markLine.data.0.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.effectScatter.markLine.data.0.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markLine.data.0.lineStyle.normal.type

line type.

Options are:

series.effectScatter.markLine.data.0.lineStyle.normal.width

line width.

series.effectScatter.markLine.data.0.lineStyle.normal.color

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.effectScatter.markLine.data.0.symbolOffset

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.

series.effectScatter.markLine.data.0.symbolRotate

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.

series.effectScatter.markLine.data.0.symbolSize

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.

series.effectScatter.markLine.data.0.symbol

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.

series.effectScatter.markLine.data.0.value

Label value, which can be ignored.

series.effectScatter.markLine.data.0.y

Y position according to container, in pixel.

series.effectScatter.markLine.data.0.x

X position according to container, in pixel.

series.effectScatter.markLine.data.0.coord

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':

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.
            }]
        }
    }
}

series.effectScatter.markLine.data.0.valueDim

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.

series.effectScatter.markLine.data.0.valueIndex

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.

series.effectScatter.markLine.data.0.type

Special label types, are used to label maximum value, minimum value and so on.

Options are:

series.effectScatter.markLine.lineStyle

Mark line style.

series.effectScatter.markLine.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.effectScatter.markLine.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.effectScatter.markLine.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.effectScatter.markLine.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.effectScatter.markLine.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markLine.lineStyle.emphasis.type

line type.

Options are:

series.effectScatter.markLine.lineStyle.emphasis.width

line width.

series.effectScatter.markLine.lineStyle.emphasis.color

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.effectScatter.markLine.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.effectScatter.markLine.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.effectScatter.markLine.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.effectScatter.markLine.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.effectScatter.markLine.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.effectScatter.markLine.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markLine.lineStyle.normal.type

line type.

Options are:

series.effectScatter.markLine.lineStyle.normal.width

line width.

series.effectScatter.markLine.lineStyle.normal.color

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.effectScatter.markLine.label

Mark line text.

series.effectScatter.markLine.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.effectScatter.markLine.label.emphasis.position

Positions of labels can be:

series.effectScatter.markLine.label.emphasis.show

Whether show label or not.

series.effectScatter.markLine.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.effectScatter.markLine.label.normal.position

Positions of labels can be:

series.effectScatter.markLine.label.normal.show

Whether show label or not.

series.effectScatter.markLine.precision

Precison of marking line value, which is useful when displaying average value mark line.

series.effectScatter.markLine.symbolSize

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.

series.effectScatter.markLine.symbol

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.

series.effectScatter.markLine.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.effectScatter.markPoint

Mark point in a chart.

series.effectScatter.markPoint.animationDelayUpdate

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

series.effectScatter.markPoint.animationEasingUpdate

Easing method used for animation.

series.effectScatter.markPoint.animationDurationUpdate

Time for animation to complete.

series.effectScatter.markPoint.animationDelay

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.

series.effectScatter.markPoint.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.effectScatter.markPoint.animationDuration

Duration of the first animation.

series.effectScatter.markPoint.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.effectScatter.markPoint.animation

Whether to enable animation.

series.effectScatter.markPoint.data

Data array for mark points, each of which is an object. Here are some ways to assign mark point position.

  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.

  2. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

  3. 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
    }
]

series.effectScatter.markPoint.itemStyle

Mark point style.

series.effectScatter.markPoint.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.effectScatter.markPoint.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.effectScatter.markPoint.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.effectScatter.markPoint.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.effectScatter.markPoint.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markPoint.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.effectScatter.markPoint.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.effectScatter.markPoint.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.effectScatter.markPoint.itemStyle.emphasis.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
)

series.effectScatter.markPoint.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.effectScatter.markPoint.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.effectScatter.markPoint.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.effectScatter.markPoint.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.effectScatter.markPoint.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markPoint.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.effectScatter.markPoint.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.effectScatter.markPoint.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.effectScatter.markPoint.itemStyle.normal.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
)

series.effectScatter.markPoint.label

Label of mark point.

series.effectScatter.markPoint.label.emphasis.textStyle

Label font style.

series.effectScatter.markPoint.label.emphasis.textStyle.fontSize

font size

series.effectScatter.markPoint.label.emphasis.textStyle.fontFamily

font family

series.effectScatter.markPoint.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.effectScatter.markPoint.label.emphasis.textStyle.fontStyle

font style

Options are:

series.effectScatter.markPoint.label.emphasis.textStyle.color

text color.

series.effectScatter.markPoint.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.effectScatter.markPoint.label.emphasis.position

Label position.

Followings are the options:

series.effectScatter.markPoint.label.emphasis.show

Whether to show label.

series.effectScatter.markPoint.label.normal.textStyle

Label font style.

series.effectScatter.markPoint.label.normal.textStyle.fontSize

font size

series.effectScatter.markPoint.label.normal.textStyle.fontFamily

font family

series.effectScatter.markPoint.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.effectScatter.markPoint.label.normal.textStyle.fontStyle

font style

Options are:

series.effectScatter.markPoint.label.normal.textStyle.color

text color.

series.effectScatter.markPoint.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.effectScatter.markPoint.label.normal.position

Label position.

Followings are the options:

series.effectScatter.markPoint.label.normal.show

Whether to show label.

series.effectScatter.markPoint.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.effectScatter.markPoint.symbolOffset

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.

series.effectScatter.markPoint.symbolRotate

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.

series.effectScatter.markPoint.symbolSize

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.

series.effectScatter.markPoint.symbol

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.

series.effectScatter.data

Data array of series, which can be in the following forms:

  1. 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]
    
  2. 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.

  3. 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.

series.effectScatter.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.

series.effectScatter.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.effectScatter.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.effectScatter.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.effectScatter.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.effectScatter.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.effectScatter.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.effectScatter.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.effectScatter.itemStyle.emphasis.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
)

series.effectScatter.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.effectScatter.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.effectScatter.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.effectScatter.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.effectScatter.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.effectScatter.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.effectScatter.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.effectScatter.itemStyle.normal.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.

series.effectScatter.label

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, labelis taken to be at the same level with itemStyle, and has two status normal and emphasis as itemStyle does.

series.effectScatter.label.emphasis.textStyle

Label font style.

series.effectScatter.label.emphasis.textStyle.fontSize

font size

series.effectScatter.label.emphasis.textStyle.fontFamily

font family

series.effectScatter.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.effectScatter.label.emphasis.textStyle.fontStyle

font style

Options are:

series.effectScatter.label.emphasis.textStyle.color

text color.

series.effectScatter.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.effectScatter.label.emphasis.position

Label position.

Followings are the options:

series.effectScatter.label.emphasis.show

Whether to show label.

series.effectScatter.label.normal.textStyle

Label font style.

series.effectScatter.label.normal.textStyle.fontSize

font size

series.effectScatter.label.normal.textStyle.fontFamily

font family

series.effectScatter.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.effectScatter.label.normal.textStyle.fontStyle

font style

Options are:

series.effectScatter.label.normal.textStyle.color

text color.

series.effectScatter.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.effectScatter.label.normal.position

Label position.

Followings are the options:

series.effectScatter.label.normal.show

Whether to show label.

series.effectScatter.symbolOffset

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.

series.effectScatter.symbolRotate

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.

series.effectScatter.symbolSize

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.

series.effectScatter.symbol

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.

series.effectScatter.geoIndex

Index of geographic coordinate to combine with, which is useful for multiple geographic axes in one chart.

series.effectScatter.polarIndex

Index of polar coordinate to combine with, which is useful for multiple polar axes in one chart.

series.effectScatter.yAxisIndex

Index of y axis to combine with, which is useful for multiple y axes in one chart.

series.effectScatter.xAxisIndex

Index of x axis to combine with, which is useful for multiple x axes in one chart.

series.effectScatter.coordinateSystem

The coordinate used in the series, whose options are:

series.effectScatter.rippleEffect

Related configurations about ripple effect.

series.effectScatter.rippleEffect.brushType

The brush type for ripples. options: 'stroke' and 'fill'.

series.effectScatter.rippleEffect.scale

The maximum zooming scale of ripples in animation.

series.effectScatter.rippleEffect.period

The duration of animation.

series.effectScatter.showEffectOn

When to show the effect.

Options:

series.effectScatter.effectType

Type of effect. Only ripple effect of 'ripple' is supported currently.

series.effectScatter.legendHoverLink

Whether to enable highlighting chart when legend is being hovered.

series.effectScatter.name

Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption.

series.scatter

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.

series.scatter.animationDelayUpdate

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.

series.scatter.animationEasingUpdate

Easing method used for animation.

series.scatter.animationDurationUpdate

Time for animation to complete.

series.scatter.animationDelay

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.

series.scatter.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.scatter.animationDuration

Duration of the first animation.

series.scatter.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.scatter.animation

Whether to enable animation.

series.scatter.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.scatter.z

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.

series.scatter.zlevel

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.

series.scatter.markArea

Used to mark an area in chart. For example, mark a time interval.

series.scatter.markArea.animationDelayUpdate

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.

series.scatter.markArea.animationEasingUpdate

Easing method used for animation.

series.scatter.markArea.animationDurationUpdate

Time for animation to complete.

series.scatter.markArea.animationDelay

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.

series.scatter.markArea.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.scatter.markArea.animationDuration

Duration of the first animation.

series.scatter.markArea.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.scatter.markArea.animation

Whether to enable animation.

series.scatter.markArea.data

The scope of the area is defined by data, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:

  1. Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 5), or percent (e.g., the value is '35%').

  2. 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'])。

  1. Locate the point on the min value or max value of series.data using type, where valueIndex or valueDim can be used to specify the dimension on which the min, max or average are calculated.
  2. If in cartesian, you can only specify xAxis or yAxis to define a mark area based on only X or Y axis, see sample scatter-weight

The 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%'
        }
    ]
]

series.scatter.markArea.data.1

Specify the right-bottom point.

series.scatter.markArea.data.1.label

Label style of the item. Label style of start point and end point will be merged together.

series.scatter.markArea.data.1.label.emphasis.textStyle

Label font style.

series.scatter.markArea.data.1.label.emphasis.textStyle.fontSize

font size

series.scatter.markArea.data.1.label.emphasis.textStyle.fontFamily

font family

series.scatter.markArea.data.1.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.scatter.markArea.data.1.label.emphasis.textStyle.fontStyle

font style

Options are:

series.scatter.markArea.data.1.label.emphasis.textStyle.color

text color.

series.scatter.markArea.data.1.label.emphasis.position

Label position.

Followings are the options:

series.scatter.markArea.data.1.label.emphasis.show

Whether to show label.

series.scatter.markArea.data.1.label.normal.textStyle

Label font style.

series.scatter.markArea.data.1.label.normal.textStyle.fontSize

font size

series.scatter.markArea.data.1.label.normal.textStyle.fontFamily

font family

series.scatter.markArea.data.1.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.scatter.markArea.data.1.label.normal.textStyle.fontStyle

font style

Options are:

series.scatter.markArea.data.1.label.normal.textStyle.color

text color.

series.scatter.markArea.data.1.label.normal.position

Label position.

Followings are the options:

series.scatter.markArea.data.1.label.normal.show

Whether to show label.

series.scatter.markArea.data.1.itemStyle

Style of the item. itemStyle of start point and end point will be merged together.

series.scatter.markArea.data.1.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.scatter.markArea.data.1.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.scatter.markArea.data.1.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.scatter.markArea.data.1.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.scatter.markArea.data.1.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markArea.data.1.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.scatter.markArea.data.1.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.scatter.markArea.data.1.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.scatter.markArea.data.1.itemStyle.emphasis.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
)

series.scatter.markArea.data.1.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.scatter.markArea.data.1.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.scatter.markArea.data.1.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.scatter.markArea.data.1.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.scatter.markArea.data.1.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markArea.data.1.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.scatter.markArea.data.1.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.scatter.markArea.data.1.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.scatter.markArea.data.1.itemStyle.normal.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
)

series.scatter.markArea.data.1.value

value of the item, not necessary.

series.scatter.markArea.data.1.y

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.scatter.markArea.data.1.x

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.scatter.markArea.data.1.coord

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

series.scatter.markArea.data.1.valueDim

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).

series.scatter.markArea.data.1.valueIndex

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.

series.scatter.markArea.data.1.type

Specify this item is on min or max or average value.

Options:

series.scatter.markArea.data.0

Specify the left-top point.

series.scatter.markArea.data.0.label

Label style of the item. Label style of start point and end point will be merged together.

series.scatter.markArea.data.0.label.emphasis.textStyle

Label font style.

series.scatter.markArea.data.0.label.emphasis.textStyle.fontSize

font size

series.scatter.markArea.data.0.label.emphasis.textStyle.fontFamily

font family

series.scatter.markArea.data.0.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.scatter.markArea.data.0.label.emphasis.textStyle.fontStyle

font style

Options are:

series.scatter.markArea.data.0.label.emphasis.textStyle.color

text color.

series.scatter.markArea.data.0.label.emphasis.position

Label position.

Followings are the options:

series.scatter.markArea.data.0.label.emphasis.show

Whether to show label.

series.scatter.markArea.data.0.label.normal.textStyle

Label font style.

series.scatter.markArea.data.0.label.normal.textStyle.fontSize

font size

series.scatter.markArea.data.0.label.normal.textStyle.fontFamily

font family

series.scatter.markArea.data.0.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.scatter.markArea.data.0.label.normal.textStyle.fontStyle

font style

Options are:

series.scatter.markArea.data.0.label.normal.textStyle.color

text color.

series.scatter.markArea.data.0.label.normal.position

Label position.

Followings are the options:

series.scatter.markArea.data.0.label.normal.show

Whether to show label.

series.scatter.markArea.data.0.itemStyle

Style of the item. itemStyle of start point and end point will be merged together.

series.scatter.markArea.data.0.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.scatter.markArea.data.0.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.scatter.markArea.data.0.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.scatter.markArea.data.0.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.scatter.markArea.data.0.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markArea.data.0.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.scatter.markArea.data.0.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.scatter.markArea.data.0.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.scatter.markArea.data.0.itemStyle.emphasis.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
)

series.scatter.markArea.data.0.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.scatter.markArea.data.0.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.scatter.markArea.data.0.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.scatter.markArea.data.0.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.scatter.markArea.data.0.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markArea.data.0.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.scatter.markArea.data.0.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.scatter.markArea.data.0.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.scatter.markArea.data.0.itemStyle.normal.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
)

series.scatter.markArea.data.0.value

value of the item, not necessary.

series.scatter.markArea.data.0.y

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.scatter.markArea.data.0.x

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.scatter.markArea.data.0.coord

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

series.scatter.markArea.data.0.valueDim

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).

series.scatter.markArea.data.0.valueIndex

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.

series.scatter.markArea.data.0.type

Specify this item is on min or max or average value.

Options:

series.scatter.markArea.itemStyle

Style of the mark area.

series.scatter.markArea.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.scatter.markArea.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.scatter.markArea.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.scatter.markArea.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.scatter.markArea.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markArea.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.scatter.markArea.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.scatter.markArea.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.scatter.markArea.itemStyle.emphasis.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
)

series.scatter.markArea.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.scatter.markArea.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.scatter.markArea.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.scatter.markArea.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.scatter.markArea.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markArea.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.scatter.markArea.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.scatter.markArea.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.scatter.markArea.itemStyle.normal.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
)

series.scatter.markArea.label

Label in mark area.

series.scatter.markArea.label.emphasis.textStyle

Label font style.

series.scatter.markArea.label.emphasis.textStyle.fontSize

font size

series.scatter.markArea.label.emphasis.textStyle.fontFamily

font family

series.scatter.markArea.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.scatter.markArea.label.emphasis.textStyle.fontStyle

font style

Options are:

series.scatter.markArea.label.emphasis.textStyle.color

text color.

series.scatter.markArea.label.emphasis.position

Label position.

Followings are the options:

series.scatter.markArea.label.emphasis.show

Whether to show label.

series.scatter.markArea.label.normal.textStyle

Label font style.

series.scatter.markArea.label.normal.textStyle.fontSize

font size

series.scatter.markArea.label.normal.textStyle.fontFamily

font family

series.scatter.markArea.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.scatter.markArea.label.normal.textStyle.fontStyle

font style

Options are:

series.scatter.markArea.label.normal.textStyle.color

text color.

series.scatter.markArea.label.normal.position

Label position.

Followings are the options:

series.scatter.markArea.label.normal.show

Whether to show label.

series.scatter.markArea.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.scatter.markLine

Use a line in the chart to illustrate.

series.scatter.markLine.animationDelayUpdate

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.

series.scatter.markLine.animationEasingUpdate

Easing method used for animation.

series.scatter.markLine.animationDurationUpdate

Time for animation to complete.

series.scatter.markLine.animationDelay

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.

series.scatter.markLine.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.scatter.markLine.animationDuration

Duration of the first animation.

series.scatter.markLine.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.scatter.markLine.animation

Whether to enable animation.

series.scatter.markLine.data

Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.

  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.

  2. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

  3. 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.

  4. You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning xAxis or yAxis. See scatter-weight 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
        }
    ]
]

series.scatter.markLine.data.1

Data of the ending point.

series.scatter.markLine.data.1.label

Label of this data item, which will be merged with label of starting point and ending point.

series.scatter.markLine.data.1.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.scatter.markLine.data.1.label.emphasis.position

Positions of labels can be:

series.scatter.markLine.data.1.label.emphasis.show

Whether show label or not.

series.scatter.markLine.data.1.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.scatter.markLine.data.1.label.normal.position

Positions of labels can be:

series.scatter.markLine.data.1.label.normal.show

Whether show label or not.

series.scatter.markLine.data.1.lineStyle

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

series.scatter.markLine.data.1.lineStyle.emphasis.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.scatter.markLine.data.1.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.scatter.markLine.data.1.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.scatter.markLine.data.1.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.scatter.markLine.data.1.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.scatter.markLine.data.1.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markLine.data.1.lineStyle.emphasis.type

line type.

Options are:

series.scatter.markLine.data.1.lineStyle.emphasis.width

line width.

series.scatter.markLine.data.1.lineStyle.emphasis.color

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.scatter.markLine.data.1.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.scatter.markLine.data.1.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.scatter.markLine.data.1.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.scatter.markLine.data.1.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.scatter.markLine.data.1.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.scatter.markLine.data.1.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markLine.data.1.lineStyle.normal.type

line type.

Options are:

series.scatter.markLine.data.1.lineStyle.normal.width

line width.

series.scatter.markLine.data.1.lineStyle.normal.color

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.scatter.markLine.data.1.symbolOffset

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.

series.scatter.markLine.data.1.symbolRotate

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.

series.scatter.markLine.data.1.symbolSize

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.

series.scatter.markLine.data.1.symbol

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.

series.scatter.markLine.data.1.value

Label value, which can be ignored.

series.scatter.markLine.data.1.y

Y position according to container, in pixel.

series.scatter.markLine.data.1.x

X position according to container, in pixel.

series.scatter.markLine.data.1.coord

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':

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.
            }]
        }
    }
}

series.scatter.markLine.data.1.valueDim

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.

series.scatter.markLine.data.1.valueIndex

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.

series.scatter.markLine.data.1.type

Special label types, are used to label maximum value, minimum value and so on.

Options are:

series.scatter.markLine.data.0

Data of the starting point.

series.scatter.markLine.data.0.label

Label of this data item, which will be merged with label of starting point and ending point.

series.scatter.markLine.data.0.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.scatter.markLine.data.0.label.emphasis.position

Positions of labels can be:

series.scatter.markLine.data.0.label.emphasis.show

Whether show label or not.

series.scatter.markLine.data.0.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.scatter.markLine.data.0.label.normal.position

Positions of labels can be:

series.scatter.markLine.data.0.label.normal.show

Whether show label or not.

series.scatter.markLine.data.0.lineStyle

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

series.scatter.markLine.data.0.lineStyle.emphasis.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.scatter.markLine.data.0.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.scatter.markLine.data.0.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.scatter.markLine.data.0.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.scatter.markLine.data.0.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.scatter.markLine.data.0.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markLine.data.0.lineStyle.emphasis.type

line type.

Options are:

series.scatter.markLine.data.0.lineStyle.emphasis.width

line width.

series.scatter.markLine.data.0.lineStyle.emphasis.color

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.scatter.markLine.data.0.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.scatter.markLine.data.0.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.scatter.markLine.data.0.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.scatter.markLine.data.0.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.scatter.markLine.data.0.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.scatter.markLine.data.0.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markLine.data.0.lineStyle.normal.type

line type.

Options are:

series.scatter.markLine.data.0.lineStyle.normal.width

line width.

series.scatter.markLine.data.0.lineStyle.normal.color

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.scatter.markLine.data.0.symbolOffset

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.

series.scatter.markLine.data.0.symbolRotate

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.

series.scatter.markLine.data.0.symbolSize

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.

series.scatter.markLine.data.0.symbol

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.

series.scatter.markLine.data.0.value

Label value, which can be ignored.

series.scatter.markLine.data.0.y

Y position according to container, in pixel.

series.scatter.markLine.data.0.x

X position according to container, in pixel.

series.scatter.markLine.data.0.coord

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':

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.
            }]
        }
    }
}

series.scatter.markLine.data.0.valueDim

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.

series.scatter.markLine.data.0.valueIndex

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.

series.scatter.markLine.data.0.type

Special label types, are used to label maximum value, minimum value and so on.

Options are:

series.scatter.markLine.lineStyle

Mark line style.

series.scatter.markLine.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.scatter.markLine.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.scatter.markLine.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.scatter.markLine.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.scatter.markLine.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markLine.lineStyle.emphasis.type

line type.

Options are:

series.scatter.markLine.lineStyle.emphasis.width

line width.

series.scatter.markLine.lineStyle.emphasis.color

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.scatter.markLine.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.scatter.markLine.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.scatter.markLine.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.scatter.markLine.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.scatter.markLine.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.scatter.markLine.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markLine.lineStyle.normal.type

line type.

Options are:

series.scatter.markLine.lineStyle.normal.width

line width.

series.scatter.markLine.lineStyle.normal.color

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.scatter.markLine.label

Mark line text.

series.scatter.markLine.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.scatter.markLine.label.emphasis.position

Positions of labels can be:

series.scatter.markLine.label.emphasis.show

Whether show label or not.

series.scatter.markLine.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.scatter.markLine.label.normal.position

Positions of labels can be:

series.scatter.markLine.label.normal.show

Whether show label or not.

series.scatter.markLine.precision

Precison of marking line value, which is useful when displaying average value mark line.

series.scatter.markLine.symbolSize

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.

series.scatter.markLine.symbol

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.

series.scatter.markLine.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.scatter.markPoint

Mark point in a chart.

series.scatter.markPoint.animationDelayUpdate

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

series.scatter.markPoint.animationEasingUpdate

Easing method used for animation.

series.scatter.markPoint.animationDurationUpdate

Time for animation to complete.

series.scatter.markPoint.animationDelay

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.

series.scatter.markPoint.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.scatter.markPoint.animationDuration

Duration of the first animation.

series.scatter.markPoint.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.scatter.markPoint.animation

Whether to enable animation.

series.scatter.markPoint.data

Data array for mark points, each of which is an object. Here are some ways to assign mark point position.

  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.

  2. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

  3. 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
    }
]

series.scatter.markPoint.itemStyle

Mark point style.

series.scatter.markPoint.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.scatter.markPoint.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.scatter.markPoint.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.scatter.markPoint.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.scatter.markPoint.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markPoint.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.scatter.markPoint.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.scatter.markPoint.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.scatter.markPoint.itemStyle.emphasis.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
)

series.scatter.markPoint.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.scatter.markPoint.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.scatter.markPoint.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.scatter.markPoint.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.scatter.markPoint.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markPoint.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.scatter.markPoint.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.scatter.markPoint.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.scatter.markPoint.itemStyle.normal.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
)

series.scatter.markPoint.label

Label of mark point.

series.scatter.markPoint.label.emphasis.textStyle

Label font style.

series.scatter.markPoint.label.emphasis.textStyle.fontSize

font size

series.scatter.markPoint.label.emphasis.textStyle.fontFamily

font family

series.scatter.markPoint.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.scatter.markPoint.label.emphasis.textStyle.fontStyle

font style

Options are:

series.scatter.markPoint.label.emphasis.textStyle.color

text color.

series.scatter.markPoint.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.scatter.markPoint.label.emphasis.position

Label position.

Followings are the options:

series.scatter.markPoint.label.emphasis.show

Whether to show label.

series.scatter.markPoint.label.normal.textStyle

Label font style.

series.scatter.markPoint.label.normal.textStyle.fontSize

font size

series.scatter.markPoint.label.normal.textStyle.fontFamily

font family

series.scatter.markPoint.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.scatter.markPoint.label.normal.textStyle.fontStyle

font style

Options are:

series.scatter.markPoint.label.normal.textStyle.color

text color.

series.scatter.markPoint.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.scatter.markPoint.label.normal.position

Label position.

Followings are the options:

series.scatter.markPoint.label.normal.show

Whether to show label.

series.scatter.markPoint.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.scatter.markPoint.symbolOffset

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.

series.scatter.markPoint.symbolRotate

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.

series.scatter.markPoint.symbolSize

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.

series.scatter.markPoint.symbol

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.

series.scatter.data

Data array of series, which can be in the following forms:

  1. 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]
    
  2. 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.

  3. 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.

series.scatter.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.

series.scatter.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.scatter.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.scatter.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.scatter.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.scatter.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.scatter.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.scatter.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.scatter.itemStyle.emphasis.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
)

series.scatter.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.scatter.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.scatter.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.scatter.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.scatter.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.scatter.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.scatter.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.scatter.itemStyle.normal.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.

series.scatter.label

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, labelis taken to be at the same level with itemStyle, and has two status normal and emphasis as itemStyle does.

series.scatter.label.emphasis.textStyle

Label font style.

series.scatter.label.emphasis.textStyle.fontSize

font size

series.scatter.label.emphasis.textStyle.fontFamily

font family

series.scatter.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.scatter.label.emphasis.textStyle.fontStyle

font style

Options are:

series.scatter.label.emphasis.textStyle.color

text color.

series.scatter.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.scatter.label.emphasis.position

Label position.

Followings are the options:

series.scatter.label.emphasis.show

Whether to show label.

series.scatter.label.normal.textStyle

Label font style.

series.scatter.label.normal.textStyle.fontSize

font size

series.scatter.label.normal.textStyle.fontFamily

font family

series.scatter.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.scatter.label.normal.textStyle.fontStyle

font style

Options are:

series.scatter.label.normal.textStyle.color

text color.

series.scatter.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.scatter.label.normal.position

Label position.

Followings are the options:

series.scatter.label.normal.show

Whether to show label.

series.scatter.largeThreshold

The threshold enabling the drawing optimization.

series.scatter.large

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.

series.scatter.symbolOffset

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.

series.scatter.symbolRotate

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.

series.scatter.symbolSize

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.

series.scatter.symbol

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.

series.scatter.legendHoverLink

Whether to enable highlighting chart when legend is being hovered.

series.scatter.hoverAnimation

Whether to enable the animation effect when mouse is on the symbol.

series.scatter.geoIndex

Index of geographic coordinate to combine with, which is useful for multiple geographic axes in one chart.

series.scatter.polarIndex

Index of polar coordinate to combine with, which is useful for multiple polar axes in one chart.

series.scatter.yAxisIndex

Index of y axis to combine with, which is useful for multiple y axes in one chart.

series.scatter.xAxisIndex

Index of x axis to combine with, which is useful for multiple x axes in one chart.

series.scatter.coordinateSystem

The coordinate used in the series, whose options are:

series.scatter.name

Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption.

series.pie

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:

series.pie.animationDelayUpdate

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.

series.pie.animationEasingUpdate

Easing method used for animation.

series.pie.animationDurationUpdate

Time for animation to complete.

series.pie.animationDelay

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.

series.pie.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.pie.animationDuration

Duration of the first animation.

series.pie.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.pie.animation

Whether to enable animation.

series.pie.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.pie.markArea

Used to mark an area in chart. For example, mark a time interval.

series.pie.markArea.animationDelayUpdate

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.

series.pie.markArea.animationEasingUpdate

Easing method used for animation.

series.pie.markArea.animationDurationUpdate

Time for animation to complete.

series.pie.markArea.animationDelay

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.

series.pie.markArea.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.pie.markArea.animationDuration

Duration of the first animation.

series.pie.markArea.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.pie.markArea.animation

Whether to enable animation.

series.pie.markArea.data

The scope of the area is defined by data, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:

  1. Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 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%'
        }
    ]
]

series.pie.markArea.data.1

Specify the right-bottom point.

series.pie.markArea.data.1.label

Label style of the item. Label style of start point and end point will be merged together.

series.pie.markArea.data.1.label.emphasis.textStyle

Label font style.

series.pie.markArea.data.1.label.emphasis.textStyle.fontSize

font size

series.pie.markArea.data.1.label.emphasis.textStyle.fontFamily

font family

series.pie.markArea.data.1.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.pie.markArea.data.1.label.emphasis.textStyle.fontStyle

font style

Options are:

series.pie.markArea.data.1.label.emphasis.textStyle.color

text color.

series.pie.markArea.data.1.label.emphasis.position

Label position.

Followings are the options:

series.pie.markArea.data.1.label.emphasis.show

Whether to show label.

series.pie.markArea.data.1.label.normal.textStyle

Label font style.

series.pie.markArea.data.1.label.normal.textStyle.fontSize

font size

series.pie.markArea.data.1.label.normal.textStyle.fontFamily

font family

series.pie.markArea.data.1.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.pie.markArea.data.1.label.normal.textStyle.fontStyle

font style

Options are:

series.pie.markArea.data.1.label.normal.textStyle.color

text color.

series.pie.markArea.data.1.label.normal.position

Label position.

Followings are the options:

series.pie.markArea.data.1.label.normal.show

Whether to show label.

series.pie.markArea.data.1.itemStyle

Style of the item. itemStyle of start point and end point will be merged together.

series.pie.markArea.data.1.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.pie.markArea.data.1.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.pie.markArea.data.1.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.pie.markArea.data.1.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.pie.markArea.data.1.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markArea.data.1.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.pie.markArea.data.1.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.pie.markArea.data.1.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.pie.markArea.data.1.itemStyle.emphasis.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
)

series.pie.markArea.data.1.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.pie.markArea.data.1.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.pie.markArea.data.1.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.pie.markArea.data.1.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.pie.markArea.data.1.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markArea.data.1.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.pie.markArea.data.1.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.pie.markArea.data.1.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.pie.markArea.data.1.itemStyle.normal.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
)

series.pie.markArea.data.1.value

value of the item, not necessary.

series.pie.markArea.data.1.y

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.pie.markArea.data.1.x

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.pie.markArea.data.0

Specify the left-top point.

series.pie.markArea.data.0.label

Label style of the item. Label style of start point and end point will be merged together.

series.pie.markArea.data.0.label.emphasis.textStyle

Label font style.

series.pie.markArea.data.0.label.emphasis.textStyle.fontSize

font size

series.pie.markArea.data.0.label.emphasis.textStyle.fontFamily

font family

series.pie.markArea.data.0.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.pie.markArea.data.0.label.emphasis.textStyle.fontStyle

font style

Options are:

series.pie.markArea.data.0.label.emphasis.textStyle.color

text color.

series.pie.markArea.data.0.label.emphasis.position

Label position.

Followings are the options:

series.pie.markArea.data.0.label.emphasis.show

Whether to show label.

series.pie.markArea.data.0.label.normal.textStyle

Label font style.

series.pie.markArea.data.0.label.normal.textStyle.fontSize

font size

series.pie.markArea.data.0.label.normal.textStyle.fontFamily

font family

series.pie.markArea.data.0.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.pie.markArea.data.0.label.normal.textStyle.fontStyle

font style

Options are:

series.pie.markArea.data.0.label.normal.textStyle.color

text color.

series.pie.markArea.data.0.label.normal.position

Label position.

Followings are the options:

series.pie.markArea.data.0.label.normal.show

Whether to show label.

series.pie.markArea.data.0.itemStyle

Style of the item. itemStyle of start point and end point will be merged together.

series.pie.markArea.data.0.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.pie.markArea.data.0.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.pie.markArea.data.0.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.pie.markArea.data.0.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.pie.markArea.data.0.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markArea.data.0.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.pie.markArea.data.0.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.pie.markArea.data.0.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.pie.markArea.data.0.itemStyle.emphasis.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
)

series.pie.markArea.data.0.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.pie.markArea.data.0.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.pie.markArea.data.0.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.pie.markArea.data.0.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.pie.markArea.data.0.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markArea.data.0.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.pie.markArea.data.0.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.pie.markArea.data.0.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.pie.markArea.data.0.itemStyle.normal.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
)

series.pie.markArea.data.0.value

value of the item, not necessary.

series.pie.markArea.data.0.y

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.pie.markArea.data.0.x

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.pie.markArea.itemStyle

Style of the mark area.

series.pie.markArea.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.pie.markArea.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.pie.markArea.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.pie.markArea.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.pie.markArea.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markArea.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.pie.markArea.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.pie.markArea.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.pie.markArea.itemStyle.emphasis.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
)

series.pie.markArea.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.pie.markArea.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.pie.markArea.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.pie.markArea.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.pie.markArea.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markArea.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.pie.markArea.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.pie.markArea.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.pie.markArea.itemStyle.normal.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
)

series.pie.markArea.label

Label in mark area.

series.pie.markArea.label.emphasis.textStyle

Label font style.

series.pie.markArea.label.emphasis.textStyle.fontSize

font size

series.pie.markArea.label.emphasis.textStyle.fontFamily

font family

series.pie.markArea.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.pie.markArea.label.emphasis.textStyle.fontStyle

font style

Options are:

series.pie.markArea.label.emphasis.textStyle.color

text color.

series.pie.markArea.label.emphasis.position

Label position.

Followings are the options:

series.pie.markArea.label.emphasis.show

Whether to show label.

series.pie.markArea.label.normal.textStyle

Label font style.

series.pie.markArea.label.normal.textStyle.fontSize

font size

series.pie.markArea.label.normal.textStyle.fontFamily

font family

series.pie.markArea.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.pie.markArea.label.normal.textStyle.fontStyle

font style

Options are:

series.pie.markArea.label.normal.textStyle.color

text color.

series.pie.markArea.label.normal.position

Label position.

Followings are the options:

series.pie.markArea.label.normal.show

Whether to show label.

series.pie.markArea.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.pie.markLine

Use a line in the chart to illustrate.

series.pie.markLine.animationDelayUpdate

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.

series.pie.markLine.animationEasingUpdate

Easing method used for animation.

series.pie.markLine.animationDurationUpdate

Time for animation to complete.

series.pie.markLine.animationDelay

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.

series.pie.markLine.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.pie.markLine.animationDuration

Duration of the first animation.

series.pie.markLine.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.pie.markLine.animation

Whether to enable animation.

series.pie.markLine.data

Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.

  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.

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
        }
    ]
]

series.pie.markLine.data.1

Data of the ending point.

series.pie.markLine.data.1.label

Label of this data item, which will be merged with label of starting point and ending point.

series.pie.markLine.data.1.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.pie.markLine.data.1.label.emphasis.position

Positions of labels can be:

series.pie.markLine.data.1.label.emphasis.show

Whether show label or not.

series.pie.markLine.data.1.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.pie.markLine.data.1.label.normal.position

Positions of labels can be:

series.pie.markLine.data.1.label.normal.show

Whether show label or not.

series.pie.markLine.data.1.lineStyle

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

series.pie.markLine.data.1.lineStyle.emphasis.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.pie.markLine.data.1.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.pie.markLine.data.1.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.pie.markLine.data.1.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.pie.markLine.data.1.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.pie.markLine.data.1.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markLine.data.1.lineStyle.emphasis.type

line type.

Options are:

series.pie.markLine.data.1.lineStyle.emphasis.width

line width.

series.pie.markLine.data.1.lineStyle.emphasis.color

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.pie.markLine.data.1.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.pie.markLine.data.1.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.pie.markLine.data.1.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.pie.markLine.data.1.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.pie.markLine.data.1.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.pie.markLine.data.1.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markLine.data.1.lineStyle.normal.type

line type.

Options are:

series.pie.markLine.data.1.lineStyle.normal.width

line width.

series.pie.markLine.data.1.lineStyle.normal.color

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.pie.markLine.data.1.symbolOffset

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.

series.pie.markLine.data.1.symbolRotate

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.

series.pie.markLine.data.1.symbolSize

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.

series.pie.markLine.data.1.symbol

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.

series.pie.markLine.data.1.value

Label value, which can be ignored.

series.pie.markLine.data.1.y

Y position according to container, in pixel.

series.pie.markLine.data.1.x

X position according to container, in pixel.

series.pie.markLine.data.0

Data of the starting point.

series.pie.markLine.data.0.label

Label of this data item, which will be merged with label of starting point and ending point.

series.pie.markLine.data.0.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.pie.markLine.data.0.label.emphasis.position

Positions of labels can be:

series.pie.markLine.data.0.label.emphasis.show

Whether show label or not.

series.pie.markLine.data.0.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.pie.markLine.data.0.label.normal.position

Positions of labels can be:

series.pie.markLine.data.0.label.normal.show

Whether show label or not.

series.pie.markLine.data.0.lineStyle

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

series.pie.markLine.data.0.lineStyle.emphasis.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.pie.markLine.data.0.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.pie.markLine.data.0.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.pie.markLine.data.0.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.pie.markLine.data.0.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.pie.markLine.data.0.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markLine.data.0.lineStyle.emphasis.type

line type.

Options are:

series.pie.markLine.data.0.lineStyle.emphasis.width

line width.

series.pie.markLine.data.0.lineStyle.emphasis.color

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.pie.markLine.data.0.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.pie.markLine.data.0.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.pie.markLine.data.0.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.pie.markLine.data.0.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.pie.markLine.data.0.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.pie.markLine.data.0.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markLine.data.0.lineStyle.normal.type

line type.

Options are:

series.pie.markLine.data.0.lineStyle.normal.width

line width.

series.pie.markLine.data.0.lineStyle.normal.color

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.pie.markLine.data.0.symbolOffset

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.

series.pie.markLine.data.0.symbolRotate

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.

series.pie.markLine.data.0.symbolSize

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.

series.pie.markLine.data.0.symbol

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.

series.pie.markLine.data.0.value

Label value, which can be ignored.

series.pie.markLine.data.0.y

Y position according to container, in pixel.

series.pie.markLine.data.0.x

X position according to container, in pixel.

series.pie.markLine.lineStyle

Mark line style.

series.pie.markLine.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.pie.markLine.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.pie.markLine.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.pie.markLine.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.pie.markLine.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markLine.lineStyle.emphasis.type

line type.

Options are:

series.pie.markLine.lineStyle.emphasis.width

line width.

series.pie.markLine.lineStyle.emphasis.color

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.pie.markLine.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.pie.markLine.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.pie.markLine.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.pie.markLine.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.pie.markLine.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.pie.markLine.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markLine.lineStyle.normal.type

line type.

Options are:

series.pie.markLine.lineStyle.normal.width

line width.

series.pie.markLine.lineStyle.normal.color

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.pie.markLine.label

Mark line text.

series.pie.markLine.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.pie.markLine.label.emphasis.position

Positions of labels can be:

series.pie.markLine.label.emphasis.show

Whether show label or not.

series.pie.markLine.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.pie.markLine.label.normal.position

Positions of labels can be:

series.pie.markLine.label.normal.show

Whether show label or not.

series.pie.markLine.precision

Precison of marking line value, which is useful when displaying average value mark line.

series.pie.markLine.symbolSize

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.

series.pie.markLine.symbol

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.

series.pie.markLine.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.pie.markPoint

Mark point in a chart.

series.pie.markPoint.animationDelayUpdate

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

series.pie.markPoint.animationEasingUpdate

Easing method used for animation.

series.pie.markPoint.animationDurationUpdate

Time for animation to complete.

series.pie.markPoint.animationDelay

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.

series.pie.markPoint.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.pie.markPoint.animationDuration

Duration of the first animation.

series.pie.markPoint.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.pie.markPoint.animation

Whether to enable animation.

series.pie.markPoint.data

Data array for mark points, each of which is an object. Here are some ways to assign mark point position.

  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.

When multiple attributes exist, priority is as the above order.

For example:

data: [
    {
        name: 'screen coordinate',
        x: 100,
        y: 100
    }
]

series.pie.markPoint.itemStyle

Mark point style.

series.pie.markPoint.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.pie.markPoint.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.pie.markPoint.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.pie.markPoint.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.pie.markPoint.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markPoint.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.pie.markPoint.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.pie.markPoint.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.pie.markPoint.itemStyle.emphasis.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
)

series.pie.markPoint.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.pie.markPoint.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.pie.markPoint.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.pie.markPoint.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.pie.markPoint.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markPoint.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.pie.markPoint.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.pie.markPoint.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.pie.markPoint.itemStyle.normal.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
)

series.pie.markPoint.label

Label of mark point.

series.pie.markPoint.label.emphasis.textStyle

Label font style.

series.pie.markPoint.label.emphasis.textStyle.fontSize

font size

series.pie.markPoint.label.emphasis.textStyle.fontFamily

font family

series.pie.markPoint.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.pie.markPoint.label.emphasis.textStyle.fontStyle

font style

Options are:

series.pie.markPoint.label.emphasis.textStyle.color

text color.

series.pie.markPoint.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.pie.markPoint.label.emphasis.position

Label position.

Followings are the options:

series.pie.markPoint.label.emphasis.show

Whether to show label.

series.pie.markPoint.label.normal.textStyle

Label font style.

series.pie.markPoint.label.normal.textStyle.fontSize

font size

series.pie.markPoint.label.normal.textStyle.fontFamily

font family

series.pie.markPoint.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.pie.markPoint.label.normal.textStyle.fontStyle

font style

Options are:

series.pie.markPoint.label.normal.textStyle.color

text color.

series.pie.markPoint.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.pie.markPoint.label.normal.position

Label position.

Followings are the options:

series.pie.markPoint.label.normal.show

Whether to show label.

series.pie.markPoint.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.pie.markPoint.symbolOffset

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.

series.pie.markPoint.symbolRotate

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.

series.pie.markPoint.symbolSize

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.

series.pie.markPoint.symbol

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.

series.pie.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:{}
}]

series.pie.radius

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.

series.pie.center

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%']

series.pie.z

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.

series.pie.zlevel

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.

series.pie.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.

series.pie.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.pie.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.pie.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.pie.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.pie.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.pie.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.pie.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.pie.itemStyle.emphasis.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
)

series.pie.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.pie.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.pie.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.pie.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.pie.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.pie.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.pie.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.pie.itemStyle.normal.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.

series.pie.labelLine

The style of visual guide line. Will show when label position is set as 'outside'.

series.pie.labelLine.emphasis

The style of visual guide line in emphasis status.

series.pie.labelLine.emphasis.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.pie.labelLine.emphasis.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.pie.labelLine.emphasis.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.pie.labelLine.emphasis.lineStyle.shadowColor

Shadow color. Support same format as color.

series.pie.labelLine.emphasis.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.labelLine.emphasis.lineStyle.type

line type.

Options are:

series.pie.labelLine.emphasis.lineStyle.width

line width.

series.pie.labelLine.emphasis.lineStyle.color

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.pie.labelLine.emphasis.show

Whether to show the visual guide line in emphasis status.

series.pie.labelLine.normal

The style of visual guide line in normal status.

series.pie.labelLine.normal.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.pie.labelLine.normal.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.pie.labelLine.normal.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.pie.labelLine.normal.lineStyle.shadowColor

Shadow color. Support same format as color.

series.pie.labelLine.normal.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.labelLine.normal.lineStyle.type

line type.

Options are:

series.pie.labelLine.normal.lineStyle.width

line width.

series.pie.labelLine.normal.lineStyle.color

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.pie.labelLine.normal.smooth

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.

series.pie.labelLine.normal.length2

The length of the second segment of visual guide line.

series.pie.labelLine.normal.length

The length of the first segment of visual guide line.

series.pie.labelLine.normal.show

Whether to show the visual guide ine in normal status.

series.pie.label

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, labelis taken to be at the same level with itemStyle, and has two status normal and emphasis as itemStyle does.

series.pie.label.emphasis.textStyle

The text style of labels.

series.pie.label.emphasis.textStyle.fontSize

font size

series.pie.label.emphasis.textStyle.fontFamily

font family

series.pie.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.pie.label.emphasis.textStyle.fontStyle

font style

Options are:

series.pie.label.emphasis.textStyle.color

text color.

series.pie.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.pie.label.normal.textStyle

The text style of labels.

series.pie.label.normal.textStyle.fontSize

font size

series.pie.label.normal.textStyle.fontFamily

font family

series.pie.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.pie.label.normal.textStyle.fontStyle

font style

Options are:

series.pie.label.normal.textStyle.color

text color.

series.pie.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.pie.label.normal.position

The position of label.

Options:

series.pie.stillShowZeroSum

Whether to show sector when all data are zero.

series.pie.avoidLabelOverlap

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

series.pie.roseType

Whether to show as Nightingale chart, which distinguishs data through radius. There are 2 optional modes:

series.pie.minAngle

The minimum angle of sector (0 ~ 360). It prevents some sector from being too small when value is small, which will affect user interaction.

series.pie.startAngle

The start angle, which range is [0, 360].

series.pie.clockwise

Whether the layout of sectors of pie chart is clockwise.

series.pie.selectedOffset

The offset distance of selected sector.

series.pie.selectedMode

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.

series.pie.hoverAnimation

Whether to enable the zoom animation effects when hovering sectors.

series.pie.legendHoverLink

Whether to enable highlighting chart when legend is being hovered.

series.pie.name

Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption.

series.bar

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.

series.bar.animationDelayUpdate

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.

series.bar.animationEasingUpdate

Easing method used for animation.

series.bar.animationDurationUpdate

Time for animation to complete.

series.bar.animationDelay

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.

series.bar.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.bar.animationDuration

Duration of the first animation.

series.bar.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.bar.animation

Whether to enable animation.

series.bar.z

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.

series.bar.zlevel

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.

series.bar.markArea

Used to mark an area in chart. For example, mark a time interval.

series.bar.markArea.animationDelayUpdate

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.

series.bar.markArea.animationEasingUpdate

Easing method used for animation.

series.bar.markArea.animationDurationUpdate

Time for animation to complete.

series.bar.markArea.animationDelay

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.

series.bar.markArea.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.bar.markArea.animationDuration

Duration of the first animation.

series.bar.markArea.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.bar.markArea.animation

Whether to enable animation.

series.bar.markArea.data

The scope of the area is defined by data, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:

  1. Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 5), or percent (e.g., the value is '35%').

  2. 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'])。

  1. Locate the point on the min value or max value of series.data using type, where valueIndex or valueDim can be used to specify the dimension on which the min, max or average are calculated.
  2. If in cartesian, you can only specify xAxis or yAxis to define a mark area based on only X or Y axis, see sample scatter-weight

The 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%'
        }
    ]
]

series.bar.markArea.data.1

Specify the right-bottom point.

series.bar.markArea.data.1.label

Label style of the item. Label style of start point and end point will be merged together.

series.bar.markArea.data.1.label.emphasis.textStyle

Label font style.

series.bar.markArea.data.1.label.emphasis.textStyle.fontSize

font size

series.bar.markArea.data.1.label.emphasis.textStyle.fontFamily

font family

series.bar.markArea.data.1.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.bar.markArea.data.1.label.emphasis.textStyle.fontStyle

font style

Options are:

series.bar.markArea.data.1.label.emphasis.textStyle.color

text color.

series.bar.markArea.data.1.label.emphasis.position

Label position.

Followings are the options:

series.bar.markArea.data.1.label.emphasis.show

Whether to show label.

series.bar.markArea.data.1.label.normal.textStyle

Label font style.

series.bar.markArea.data.1.label.normal.textStyle.fontSize

font size

series.bar.markArea.data.1.label.normal.textStyle.fontFamily

font family

series.bar.markArea.data.1.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.bar.markArea.data.1.label.normal.textStyle.fontStyle

font style

Options are:

series.bar.markArea.data.1.label.normal.textStyle.color

text color.

series.bar.markArea.data.1.label.normal.position

Label position.

Followings are the options:

series.bar.markArea.data.1.label.normal.show

Whether to show label.

series.bar.markArea.data.1.itemStyle

Style of the item. itemStyle of start point and end point will be merged together.

series.bar.markArea.data.1.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.bar.markArea.data.1.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.bar.markArea.data.1.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.bar.markArea.data.1.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.bar.markArea.data.1.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markArea.data.1.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.bar.markArea.data.1.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.bar.markArea.data.1.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.bar.markArea.data.1.itemStyle.emphasis.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
)

series.bar.markArea.data.1.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.bar.markArea.data.1.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.bar.markArea.data.1.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.bar.markArea.data.1.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.bar.markArea.data.1.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markArea.data.1.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.bar.markArea.data.1.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.bar.markArea.data.1.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.bar.markArea.data.1.itemStyle.normal.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
)

series.bar.markArea.data.1.value

value of the item, not necessary.

series.bar.markArea.data.1.y

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.bar.markArea.data.1.x

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.bar.markArea.data.1.coord

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

series.bar.markArea.data.1.valueDim

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).

series.bar.markArea.data.1.valueIndex

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.

series.bar.markArea.data.1.type

Specify this item is on min or max or average value.

Options:

series.bar.markArea.data.0

Specify the left-top point.

series.bar.markArea.data.0.label

Label style of the item. Label style of start point and end point will be merged together.

series.bar.markArea.data.0.label.emphasis.textStyle

Label font style.

series.bar.markArea.data.0.label.emphasis.textStyle.fontSize

font size

series.bar.markArea.data.0.label.emphasis.textStyle.fontFamily

font family

series.bar.markArea.data.0.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.bar.markArea.data.0.label.emphasis.textStyle.fontStyle

font style

Options are:

series.bar.markArea.data.0.label.emphasis.textStyle.color

text color.

series.bar.markArea.data.0.label.emphasis.position

Label position.

Followings are the options:

series.bar.markArea.data.0.label.emphasis.show

Whether to show label.

series.bar.markArea.data.0.label.normal.textStyle

Label font style.

series.bar.markArea.data.0.label.normal.textStyle.fontSize

font size

series.bar.markArea.data.0.label.normal.textStyle.fontFamily

font family

series.bar.markArea.data.0.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.bar.markArea.data.0.label.normal.textStyle.fontStyle

font style

Options are:

series.bar.markArea.data.0.label.normal.textStyle.color

text color.

series.bar.markArea.data.0.label.normal.position

Label position.

Followings are the options:

series.bar.markArea.data.0.label.normal.show

Whether to show label.

series.bar.markArea.data.0.itemStyle

Style of the item. itemStyle of start point and end point will be merged together.

series.bar.markArea.data.0.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.bar.markArea.data.0.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.bar.markArea.data.0.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.bar.markArea.data.0.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.bar.markArea.data.0.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markArea.data.0.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.bar.markArea.data.0.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.bar.markArea.data.0.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.bar.markArea.data.0.itemStyle.emphasis.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
)

series.bar.markArea.data.0.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.bar.markArea.data.0.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.bar.markArea.data.0.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.bar.markArea.data.0.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.bar.markArea.data.0.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markArea.data.0.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.bar.markArea.data.0.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.bar.markArea.data.0.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.bar.markArea.data.0.itemStyle.normal.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
)

series.bar.markArea.data.0.value

value of the item, not necessary.

series.bar.markArea.data.0.y

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.bar.markArea.data.0.x

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.bar.markArea.data.0.coord

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

series.bar.markArea.data.0.valueDim

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).

series.bar.markArea.data.0.valueIndex

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.

series.bar.markArea.data.0.type

Specify this item is on min or max or average value.

Options:

series.bar.markArea.itemStyle

Style of the mark area.

series.bar.markArea.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.bar.markArea.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.bar.markArea.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.bar.markArea.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.bar.markArea.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markArea.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.bar.markArea.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.bar.markArea.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.bar.markArea.itemStyle.emphasis.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
)

series.bar.markArea.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.bar.markArea.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.bar.markArea.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.bar.markArea.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.bar.markArea.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markArea.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.bar.markArea.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.bar.markArea.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.bar.markArea.itemStyle.normal.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
)

series.bar.markArea.label

Label in mark area.

series.bar.markArea.label.emphasis.textStyle

Label font style.

series.bar.markArea.label.emphasis.textStyle.fontSize

font size

series.bar.markArea.label.emphasis.textStyle.fontFamily

font family

series.bar.markArea.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.bar.markArea.label.emphasis.textStyle.fontStyle

font style

Options are:

series.bar.markArea.label.emphasis.textStyle.color

text color.

series.bar.markArea.label.emphasis.position

Label position.

Followings are the options:

series.bar.markArea.label.emphasis.show

Whether to show label.

series.bar.markArea.label.normal.textStyle

Label font style.

series.bar.markArea.label.normal.textStyle.fontSize

font size

series.bar.markArea.label.normal.textStyle.fontFamily

font family

series.bar.markArea.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.bar.markArea.label.normal.textStyle.fontStyle

font style

Options are:

series.bar.markArea.label.normal.textStyle.color

text color.

series.bar.markArea.label.normal.position

Label position.

Followings are the options:

series.bar.markArea.label.normal.show

Whether to show label.

series.bar.markArea.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.bar.markLine

Use a line in the chart to illustrate.

series.bar.markLine.animationDelayUpdate

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.

series.bar.markLine.animationEasingUpdate

Easing method used for animation.

series.bar.markLine.animationDurationUpdate

Time for animation to complete.

series.bar.markLine.animationDelay

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.

series.bar.markLine.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.bar.markLine.animationDuration

Duration of the first animation.

series.bar.markLine.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.bar.markLine.animation

Whether to enable animation.

series.bar.markLine.data

Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.

  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.

  2. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

  3. 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.

  4. You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning xAxis or yAxis. See scatter-weight 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
        }
    ]
]

series.bar.markLine.data.1

Data of the ending point.

series.bar.markLine.data.1.label

Label of this data item, which will be merged with label of starting point and ending point.

series.bar.markLine.data.1.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.bar.markLine.data.1.label.emphasis.position

Positions of labels can be:

series.bar.markLine.data.1.label.emphasis.show

Whether show label or not.

series.bar.markLine.data.1.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.bar.markLine.data.1.label.normal.position

Positions of labels can be:

series.bar.markLine.data.1.label.normal.show

Whether show label or not.

series.bar.markLine.data.1.lineStyle

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

series.bar.markLine.data.1.lineStyle.emphasis.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.bar.markLine.data.1.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.bar.markLine.data.1.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.bar.markLine.data.1.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.bar.markLine.data.1.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.bar.markLine.data.1.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markLine.data.1.lineStyle.emphasis.type

line type.

Options are:

series.bar.markLine.data.1.lineStyle.emphasis.width

line width.

series.bar.markLine.data.1.lineStyle.emphasis.color

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.bar.markLine.data.1.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.bar.markLine.data.1.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.bar.markLine.data.1.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.bar.markLine.data.1.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.bar.markLine.data.1.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.bar.markLine.data.1.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markLine.data.1.lineStyle.normal.type

line type.

Options are:

series.bar.markLine.data.1.lineStyle.normal.width

line width.

series.bar.markLine.data.1.lineStyle.normal.color

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.bar.markLine.data.1.symbolOffset

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.

series.bar.markLine.data.1.symbolRotate

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.

series.bar.markLine.data.1.symbolSize

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.

series.bar.markLine.data.1.symbol

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.

series.bar.markLine.data.1.value

Label value, which can be ignored.

series.bar.markLine.data.1.y

Y position according to container, in pixel.

series.bar.markLine.data.1.x

X position according to container, in pixel.

series.bar.markLine.data.1.coord

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':

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.
            }]
        }
    }
}

series.bar.markLine.data.1.valueDim

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.

series.bar.markLine.data.1.valueIndex

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.

series.bar.markLine.data.1.type

Special label types, are used to label maximum value, minimum value and so on.

Options are:

series.bar.markLine.data.0

Data of the starting point.

series.bar.markLine.data.0.label

Label of this data item, which will be merged with label of starting point and ending point.

series.bar.markLine.data.0.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.bar.markLine.data.0.label.emphasis.position

Positions of labels can be:

series.bar.markLine.data.0.label.emphasis.show

Whether show label or not.

series.bar.markLine.data.0.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.bar.markLine.data.0.label.normal.position

Positions of labels can be:

series.bar.markLine.data.0.label.normal.show

Whether show label or not.

series.bar.markLine.data.0.lineStyle

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

series.bar.markLine.data.0.lineStyle.emphasis.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.bar.markLine.data.0.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.bar.markLine.data.0.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.bar.markLine.data.0.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.bar.markLine.data.0.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.bar.markLine.data.0.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markLine.data.0.lineStyle.emphasis.type

line type.

Options are:

series.bar.markLine.data.0.lineStyle.emphasis.width

line width.

series.bar.markLine.data.0.lineStyle.emphasis.color

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.bar.markLine.data.0.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.bar.markLine.data.0.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.bar.markLine.data.0.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.bar.markLine.data.0.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.bar.markLine.data.0.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.bar.markLine.data.0.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markLine.data.0.lineStyle.normal.type

line type.

Options are:

series.bar.markLine.data.0.lineStyle.normal.width

line width.

series.bar.markLine.data.0.lineStyle.normal.color

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.bar.markLine.data.0.symbolOffset

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.

series.bar.markLine.data.0.symbolRotate

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.

series.bar.markLine.data.0.symbolSize

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.

series.bar.markLine.data.0.symbol

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.

series.bar.markLine.data.0.value

Label value, which can be ignored.

series.bar.markLine.data.0.y

Y position according to container, in pixel.

series.bar.markLine.data.0.x

X position according to container, in pixel.

series.bar.markLine.data.0.coord

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':

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.
            }]
        }
    }
}

series.bar.markLine.data.0.valueDim

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.

series.bar.markLine.data.0.valueIndex

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.

series.bar.markLine.data.0.type

Special label types, are used to label maximum value, minimum value and so on.

Options are:

series.bar.markLine.lineStyle

Mark line style.

series.bar.markLine.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.bar.markLine.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.bar.markLine.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.bar.markLine.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.bar.markLine.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markLine.lineStyle.emphasis.type

line type.

Options are:

series.bar.markLine.lineStyle.emphasis.width

line width.

series.bar.markLine.lineStyle.emphasis.color

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.bar.markLine.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.bar.markLine.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.bar.markLine.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.bar.markLine.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.bar.markLine.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.bar.markLine.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markLine.lineStyle.normal.type

line type.

Options are:

series.bar.markLine.lineStyle.normal.width

line width.

series.bar.markLine.lineStyle.normal.color

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.bar.markLine.label

Mark line text.

series.bar.markLine.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.bar.markLine.label.emphasis.position

Positions of labels can be:

series.bar.markLine.label.emphasis.show

Whether show label or not.

series.bar.markLine.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.bar.markLine.label.normal.position

Positions of labels can be:

series.bar.markLine.label.normal.show

Whether show label or not.

series.bar.markLine.precision

Precison of marking line value, which is useful when displaying average value mark line.

series.bar.markLine.symbolSize

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.

series.bar.markLine.symbol

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.

series.bar.markLine.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.bar.markPoint

Mark point in a chart.

series.bar.markPoint.animationDelayUpdate

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

series.bar.markPoint.animationEasingUpdate

Easing method used for animation.

series.bar.markPoint.animationDurationUpdate

Time for animation to complete.

series.bar.markPoint.animationDelay

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.

series.bar.markPoint.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.bar.markPoint.animationDuration

Duration of the first animation.

series.bar.markPoint.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.bar.markPoint.animation

Whether to enable animation.

series.bar.markPoint.data

Data array for mark points, each of which is an object. Here are some ways to assign mark point position.

  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.

  2. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

  3. 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
    }
]

series.bar.markPoint.itemStyle

Mark point style.

series.bar.markPoint.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.bar.markPoint.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.bar.markPoint.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.bar.markPoint.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.bar.markPoint.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markPoint.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.bar.markPoint.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.bar.markPoint.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.bar.markPoint.itemStyle.emphasis.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
)

series.bar.markPoint.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.bar.markPoint.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.bar.markPoint.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.bar.markPoint.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.bar.markPoint.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markPoint.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.bar.markPoint.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.bar.markPoint.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.bar.markPoint.itemStyle.normal.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
)

series.bar.markPoint.label

Label of mark point.

series.bar.markPoint.label.emphasis.textStyle

Label font style.

series.bar.markPoint.label.emphasis.textStyle.fontSize

font size

series.bar.markPoint.label.emphasis.textStyle.fontFamily

font family

series.bar.markPoint.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.bar.markPoint.label.emphasis.textStyle.fontStyle

font style

Options are:

series.bar.markPoint.label.emphasis.textStyle.color

text color.

series.bar.markPoint.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.bar.markPoint.label.emphasis.position

Label position.

Followings are the options:

series.bar.markPoint.label.emphasis.show

Whether to show label.

series.bar.markPoint.label.normal.textStyle

Label font style.

series.bar.markPoint.label.normal.textStyle.fontSize

font size

series.bar.markPoint.label.normal.textStyle.fontFamily

font family

series.bar.markPoint.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.bar.markPoint.label.normal.textStyle.fontStyle

font style

Options are:

series.bar.markPoint.label.normal.textStyle.color

text color.

series.bar.markPoint.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.bar.markPoint.label.normal.position

Label position.

Followings are the options:

series.bar.markPoint.label.normal.show

Whether to show label.

series.bar.markPoint.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.bar.markPoint.symbolOffset

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.

series.bar.markPoint.symbolRotate

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.

series.bar.markPoint.symbolSize

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.

series.bar.markPoint.symbol

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.

series.bar.data

Data array of series, which can be in the following forms:

  1. 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]
    
  2. 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.

  3. 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.

series.bar.barCategoryGap

The bar gap between each category of bar, defaults to be 20% of the category gap, can be set as a fixed value.

series.bar.barGap

The gap between bars, defaults to be 30% of the bar width, can be set as a fixed value like 20.

series.bar.barMinHeight

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.

series.bar.barMaxWidth

The maximum width of the bar. Adaptive when not specified.

series.bar.barWidth

The width of the bar. Adaptive when not specified.

series.bar.stack

Name of stack. On the same category axis, the series with the same stack name would be put on top of each other.

series.bar.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.bar.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.bar.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.bar.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.bar.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.itemStyle.emphasis.barBorderWidth

The bodrder width of bar. defaults to have no border.

series.bar.itemStyle.emphasis.barBorderColor

The bodrder color of bar.

series.bar.itemStyle.emphasis.color

Bar color..

series.bar.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.bar.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.bar.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.bar.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.bar.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.itemStyle.normal.barBorderRadius

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)

series.bar.itemStyle.normal.barBorderWidth

The bodrder width of bar. defaults to have no border.

series.bar.itemStyle.normal.barBorderColor

The bodrder color of bar.

series.bar.itemStyle.normal.color

Bar color. defaults to acquire colors from global palette option.color .

series.bar.label

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, labelis taken to be at the same level with itemStyle, and has two status normal and emphasis as itemStyle does.

series.bar.label.emphasis.textStyle

Label font style.

series.bar.label.emphasis.textStyle.fontSize

font size

series.bar.label.emphasis.textStyle.fontFamily

font family

series.bar.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.bar.label.emphasis.textStyle.fontStyle

font style

Options are:

series.bar.label.emphasis.textStyle.color

text color.

series.bar.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.bar.label.emphasis.position

Label position.

Followings are the options:

series.bar.label.emphasis.show

Whether to show label.

series.bar.label.normal.textStyle

Label font style.

series.bar.label.normal.textStyle.fontSize

font size

series.bar.label.normal.textStyle.fontFamily

font family

series.bar.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.bar.label.normal.textStyle.fontStyle

font style

Options are:

series.bar.label.normal.textStyle.color

text color.

series.bar.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.bar.label.normal.position

Label position.

Followings are the options:

series.bar.label.normal.show

Whether to show label.

series.bar.yAxisIndex

Index of y axis to combine with, which is useful for multiple y axes in one chart.

series.bar.xAxisIndex

Index of x axis to combine with, which is useful for multiple x axes in one chart.

series.bar.coordinateSystem

The coordinate used in the series, whose options are:

series.bar.legendHoverLink

Whether to enable highlighting chart when legend is being hovered.

series.bar.name

Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption.

series.line

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:

series.line.animationDelayUpdate

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.

series.line.animationEasingUpdate

Easing method used for animation.

series.line.animationDurationUpdate

Time for animation to complete.

series.line.animationDelay

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.

series.line.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.line.animationDuration

Duration of the first animation.

series.line.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.line.animation

Whether to enable animation.

series.line.z

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.

series.line.zlevel

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.

series.line.markArea

Used to mark an area in chart. For example, mark a time interval.

series.line.markArea.animationDelayUpdate

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.

series.line.markArea.animationEasingUpdate

Easing method used for animation.

series.line.markArea.animationDurationUpdate

Time for animation to complete.

series.line.markArea.animationDelay

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.

series.line.markArea.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.line.markArea.animationDuration

Duration of the first animation.

series.line.markArea.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.line.markArea.animation

Whether to enable animation.

series.line.markArea.data

The scope of the area is defined by data, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:

  1. Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 5), or percent (e.g., the value is '35%').

  2. 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'])。

  1. Locate the point on the min value or max value of series.data using type, where valueIndex or valueDim can be used to specify the dimension on which the min, max or average are calculated.
  2. If in cartesian, you can only specify xAxis or yAxis to define a mark area based on only X or Y axis, see sample scatter-weight

The 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%'
        }
    ]
]

series.line.markArea.data.1

Specify the right-bottom point.

series.line.markArea.data.1.label

Label style of the item. Label style of start point and end point will be merged together.

series.line.markArea.data.1.label.emphasis.textStyle

Label font style.

series.line.markArea.data.1.label.emphasis.textStyle.fontSize

font size

series.line.markArea.data.1.label.emphasis.textStyle.fontFamily

font family

series.line.markArea.data.1.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.line.markArea.data.1.label.emphasis.textStyle.fontStyle

font style

Options are:

series.line.markArea.data.1.label.emphasis.textStyle.color

text color.

series.line.markArea.data.1.label.emphasis.position

Label position.

Followings are the options:

series.line.markArea.data.1.label.emphasis.show

Whether to show label.

series.line.markArea.data.1.label.normal.textStyle

Label font style.

series.line.markArea.data.1.label.normal.textStyle.fontSize

font size

series.line.markArea.data.1.label.normal.textStyle.fontFamily

font family

series.line.markArea.data.1.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.line.markArea.data.1.label.normal.textStyle.fontStyle

font style

Options are:

series.line.markArea.data.1.label.normal.textStyle.color

text color.

series.line.markArea.data.1.label.normal.position

Label position.

Followings are the options:

series.line.markArea.data.1.label.normal.show

Whether to show label.

series.line.markArea.data.1.itemStyle

Style of the item. itemStyle of start point and end point will be merged together.

series.line.markArea.data.1.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.line.markArea.data.1.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.line.markArea.data.1.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.line.markArea.data.1.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.line.markArea.data.1.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markArea.data.1.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.line.markArea.data.1.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.line.markArea.data.1.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.line.markArea.data.1.itemStyle.emphasis.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
)

series.line.markArea.data.1.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.line.markArea.data.1.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.line.markArea.data.1.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.line.markArea.data.1.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.line.markArea.data.1.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markArea.data.1.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.line.markArea.data.1.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.line.markArea.data.1.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.line.markArea.data.1.itemStyle.normal.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
)

series.line.markArea.data.1.value

value of the item, not necessary.

series.line.markArea.data.1.y

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.line.markArea.data.1.x

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.line.markArea.data.1.coord

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

series.line.markArea.data.1.valueDim

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).

series.line.markArea.data.1.valueIndex

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.

series.line.markArea.data.1.type

Specify this item is on min or max or average value.

Options:

series.line.markArea.data.0

Specify the left-top point.

series.line.markArea.data.0.label

Label style of the item. Label style of start point and end point will be merged together.

series.line.markArea.data.0.label.emphasis.textStyle

Label font style.

series.line.markArea.data.0.label.emphasis.textStyle.fontSize

font size

series.line.markArea.data.0.label.emphasis.textStyle.fontFamily

font family

series.line.markArea.data.0.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.line.markArea.data.0.label.emphasis.textStyle.fontStyle

font style

Options are:

series.line.markArea.data.0.label.emphasis.textStyle.color

text color.

series.line.markArea.data.0.label.emphasis.position

Label position.

Followings are the options:

series.line.markArea.data.0.label.emphasis.show

Whether to show label.

series.line.markArea.data.0.label.normal.textStyle

Label font style.

series.line.markArea.data.0.label.normal.textStyle.fontSize

font size

series.line.markArea.data.0.label.normal.textStyle.fontFamily

font family

series.line.markArea.data.0.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.line.markArea.data.0.label.normal.textStyle.fontStyle

font style

Options are:

series.line.markArea.data.0.label.normal.textStyle.color

text color.

series.line.markArea.data.0.label.normal.position

Label position.

Followings are the options:

series.line.markArea.data.0.label.normal.show

Whether to show label.

series.line.markArea.data.0.itemStyle

Style of the item. itemStyle of start point and end point will be merged together.

series.line.markArea.data.0.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.line.markArea.data.0.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.line.markArea.data.0.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.line.markArea.data.0.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.line.markArea.data.0.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markArea.data.0.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.line.markArea.data.0.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.line.markArea.data.0.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.line.markArea.data.0.itemStyle.emphasis.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
)

series.line.markArea.data.0.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.line.markArea.data.0.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.line.markArea.data.0.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.line.markArea.data.0.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.line.markArea.data.0.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markArea.data.0.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.line.markArea.data.0.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.line.markArea.data.0.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.line.markArea.data.0.itemStyle.normal.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
)

series.line.markArea.data.0.value

value of the item, not necessary.

series.line.markArea.data.0.y

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.line.markArea.data.0.x

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

series.line.markArea.data.0.coord

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

series.line.markArea.data.0.valueDim

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).

series.line.markArea.data.0.valueIndex

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.

series.line.markArea.data.0.type

Specify this item is on min or max or average value.

Options:

series.line.markArea.itemStyle

Style of the mark area.

series.line.markArea.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.line.markArea.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.line.markArea.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.line.markArea.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.line.markArea.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markArea.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.line.markArea.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.line.markArea.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.line.markArea.itemStyle.emphasis.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
)

series.line.markArea.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.line.markArea.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.line.markArea.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.line.markArea.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.line.markArea.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markArea.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.line.markArea.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.line.markArea.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.line.markArea.itemStyle.normal.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
)

series.line.markArea.label

Label in mark area.

series.line.markArea.label.emphasis.textStyle

Label font style.

series.line.markArea.label.emphasis.textStyle.fontSize

font size

series.line.markArea.label.emphasis.textStyle.fontFamily

font family

series.line.markArea.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.line.markArea.label.emphasis.textStyle.fontStyle

font style

Options are:

series.line.markArea.label.emphasis.textStyle.color

text color.

series.line.markArea.label.emphasis.position

Label position.

Followings are the options:

series.line.markArea.label.emphasis.show

Whether to show label.

series.line.markArea.label.normal.textStyle

Label font style.

series.line.markArea.label.normal.textStyle.fontSize

font size

series.line.markArea.label.normal.textStyle.fontFamily

font family

series.line.markArea.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.line.markArea.label.normal.textStyle.fontStyle

font style

Options are:

series.line.markArea.label.normal.textStyle.color

text color.

series.line.markArea.label.normal.position

Label position.

Followings are the options:

series.line.markArea.label.normal.show

Whether to show label.

series.line.markArea.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.line.markLine

Use a line in the chart to illustrate.

series.line.markLine.animationDelayUpdate

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.

series.line.markLine.animationEasingUpdate

Easing method used for animation.

series.line.markLine.animationDurationUpdate

Time for animation to complete.

series.line.markLine.animationDelay

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.

series.line.markLine.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.line.markLine.animationDuration

Duration of the first animation.

series.line.markLine.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.line.markLine.animation

Whether to enable animation.

series.line.markLine.data

Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.

  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.

  2. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

  3. 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.

  4. You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning xAxis or yAxis. See scatter-weight 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
        }
    ]
]

series.line.markLine.data.1

Data of the ending point.

series.line.markLine.data.1.label

Label of this data item, which will be merged with label of starting point and ending point.

series.line.markLine.data.1.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.line.markLine.data.1.label.emphasis.position

Positions of labels can be:

series.line.markLine.data.1.label.emphasis.show

Whether show label or not.

series.line.markLine.data.1.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.line.markLine.data.1.label.normal.position

Positions of labels can be:

series.line.markLine.data.1.label.normal.show

Whether show label or not.

series.line.markLine.data.1.lineStyle

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

series.line.markLine.data.1.lineStyle.emphasis.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.line.markLine.data.1.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.line.markLine.data.1.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.line.markLine.data.1.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.line.markLine.data.1.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.line.markLine.data.1.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markLine.data.1.lineStyle.emphasis.type

line type.

Options are:

series.line.markLine.data.1.lineStyle.emphasis.width

line width.

series.line.markLine.data.1.lineStyle.emphasis.color

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.line.markLine.data.1.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.line.markLine.data.1.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.line.markLine.data.1.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.line.markLine.data.1.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.line.markLine.data.1.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.line.markLine.data.1.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markLine.data.1.lineStyle.normal.type

line type.

Options are:

series.line.markLine.data.1.lineStyle.normal.width

line width.

series.line.markLine.data.1.lineStyle.normal.color

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.line.markLine.data.1.symbolOffset

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.

series.line.markLine.data.1.symbolRotate

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.

series.line.markLine.data.1.symbolSize

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.

series.line.markLine.data.1.symbol

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.

series.line.markLine.data.1.value

Label value, which can be ignored.

series.line.markLine.data.1.y

Y position according to container, in pixel.

series.line.markLine.data.1.x

X position according to container, in pixel.

series.line.markLine.data.1.coord

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':

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.
            }]
        }
    }
}

series.line.markLine.data.1.valueDim

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.

series.line.markLine.data.1.valueIndex

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.

series.line.markLine.data.1.type

Special label types, are used to label maximum value, minimum value and so on.

Options are:

series.line.markLine.data.0

Data of the starting point.

series.line.markLine.data.0.label

Label of this data item, which will be merged with label of starting point and ending point.

series.line.markLine.data.0.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.line.markLine.data.0.label.emphasis.position

Positions of labels can be:

series.line.markLine.data.0.label.emphasis.show

Whether show label or not.

series.line.markLine.data.0.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.line.markLine.data.0.label.normal.position

Positions of labels can be:

series.line.markLine.data.0.label.normal.show

Whether show label or not.

series.line.markLine.data.0.lineStyle

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

series.line.markLine.data.0.lineStyle.emphasis.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.line.markLine.data.0.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.line.markLine.data.0.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.line.markLine.data.0.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.line.markLine.data.0.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.line.markLine.data.0.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markLine.data.0.lineStyle.emphasis.type

line type.

Options are:

series.line.markLine.data.0.lineStyle.emphasis.width

line width.

series.line.markLine.data.0.lineStyle.emphasis.color

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.line.markLine.data.0.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.line.markLine.data.0.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.line.markLine.data.0.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.line.markLine.data.0.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.line.markLine.data.0.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.line.markLine.data.0.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markLine.data.0.lineStyle.normal.type

line type.

Options are:

series.line.markLine.data.0.lineStyle.normal.width

line width.

series.line.markLine.data.0.lineStyle.normal.color

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.line.markLine.data.0.symbolOffset

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.

series.line.markLine.data.0.symbolRotate

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.

series.line.markLine.data.0.symbolSize

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.

series.line.markLine.data.0.symbol

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.

series.line.markLine.data.0.value

Label value, which can be ignored.

series.line.markLine.data.0.y

Y position according to container, in pixel.

series.line.markLine.data.0.x

X position according to container, in pixel.

series.line.markLine.data.0.coord

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':

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.
            }]
        }
    }
}

series.line.markLine.data.0.valueDim

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.

series.line.markLine.data.0.valueIndex

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.

series.line.markLine.data.0.type

Special label types, are used to label maximum value, minimum value and so on.

Options are:

series.line.markLine.lineStyle

Mark line style.

series.line.markLine.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.line.markLine.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.line.markLine.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.line.markLine.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.line.markLine.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markLine.lineStyle.emphasis.type

line type.

Options are:

series.line.markLine.lineStyle.emphasis.width

line width.

series.line.markLine.lineStyle.emphasis.color

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.line.markLine.lineStyle.normal.curveness

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

series.line.markLine.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.line.markLine.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.line.markLine.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.line.markLine.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.line.markLine.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markLine.lineStyle.normal.type

line type.

Options are:

series.line.markLine.lineStyle.normal.width

line width.

series.line.markLine.lineStyle.normal.color

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.line.markLine.label

Mark line text.

series.line.markLine.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.line.markLine.label.emphasis.position

Positions of labels can be:

series.line.markLine.label.emphasis.show

Whether show label or not.

series.line.markLine.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.line.markLine.label.normal.position

Positions of labels can be:

series.line.markLine.label.normal.show

Whether show label or not.

series.line.markLine.precision

Precison of marking line value, which is useful when displaying average value mark line.

series.line.markLine.symbolSize

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.

series.line.markLine.symbol

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.

series.line.markLine.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.line.markPoint

Mark point in a chart.

series.line.markPoint.animationDelayUpdate

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

series.line.markPoint.animationEasingUpdate

Easing method used for animation.

series.line.markPoint.animationDurationUpdate

Time for animation to complete.

series.line.markPoint.animationDelay

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.

series.line.markPoint.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

series.line.markPoint.animationDuration

Duration of the first animation.

series.line.markPoint.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

series.line.markPoint.animation

Whether to enable animation.

series.line.markPoint.data

Data array for mark points, each of which is an object. Here are some ways to assign mark point position.

  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.

  2. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

  3. 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
    }
]

series.line.markPoint.itemStyle

Mark point style.

series.line.markPoint.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.line.markPoint.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.line.markPoint.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.line.markPoint.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.line.markPoint.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markPoint.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.line.markPoint.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.line.markPoint.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.line.markPoint.itemStyle.emphasis.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
)

series.line.markPoint.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.line.markPoint.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.line.markPoint.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.line.markPoint.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.line.markPoint.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markPoint.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.line.markPoint.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.line.markPoint.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.line.markPoint.itemStyle.normal.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
)

series.line.markPoint.label

Label of mark point.

series.line.markPoint.label.emphasis.textStyle

Label font style.

series.line.markPoint.label.emphasis.textStyle.fontSize

font size

series.line.markPoint.label.emphasis.textStyle.fontFamily

font family

series.line.markPoint.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.line.markPoint.label.emphasis.textStyle.fontStyle

font style

Options are:

series.line.markPoint.label.emphasis.textStyle.color

text color.

series.line.markPoint.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.line.markPoint.label.emphasis.position

Label position.

Followings are the options:

series.line.markPoint.label.emphasis.show

Whether to show label.

series.line.markPoint.label.normal.textStyle

Label font style.

series.line.markPoint.label.normal.textStyle.fontSize

font size

series.line.markPoint.label.normal.textStyle.fontFamily

font family

series.line.markPoint.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.line.markPoint.label.normal.textStyle.fontStyle

font style

Options are:

series.line.markPoint.label.normal.textStyle.color

text color.

series.line.markPoint.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.line.markPoint.label.normal.position

Label position.

Followings are the options:

series.line.markPoint.label.normal.show

Whether to show label.

series.line.markPoint.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

series.line.markPoint.symbolOffset

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.

series.line.markPoint.symbolRotate

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.

series.line.markPoint.symbolSize

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.

series.line.markPoint.symbol

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.

series.line.data

Data array of series, which can be in the following forms:

  1. 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]
    
  2. 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.

  3. 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.

series.line.sampling

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:

series.line.smoothMonotone

Whether the broken line keep the monotonicity when it is smoothed. It can be set as 'x', 'y' to keep the monotonicity on x axis or y axis.

It is usually used on dual value axis.

Here are 2 examples of broken line chart with dual value axis, showing the differences when smoothMonotone is without any setting, and smoothMonotone is set as 'x'.

series.line.smooth

Whether to show as smooth curve.

series.line.areaStyle

The style of area.

series.line.areaStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.line.areaStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.line.areaStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.line.areaStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.line.areaStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.areaStyle.emphasis.color

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
)

series.line.areaStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.line.areaStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.line.areaStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.line.areaStyle.normal.shadowColor

Shadow color. Support same format as color.

series.line.areaStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.areaStyle.normal.color

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
)

series.line.lineStyle

Line style.

series.line.lineStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.line.lineStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.line.lineStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.line.lineStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.line.lineStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.lineStyle.emphasis.type

line type.

Options are:

series.line.lineStyle.emphasis.width

line width.

series.line.lineStyle.emphasis.color

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.line.lineStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.line.lineStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.line.lineStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.line.lineStyle.normal.shadowColor

Shadow color. Support same format as color.

series.line.lineStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.lineStyle.normal.type

line type.

Options are:

series.line.lineStyle.normal.width

line width.

series.line.lineStyle.normal.color

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.line.itemStyle

The style of the symbol point of broken line.

series.line.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.line.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.line.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.line.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

series.line.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.line.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

series.line.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

series.line.itemStyle.emphasis.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
)

series.line.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

series.line.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

series.line.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

series.line.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

series.line.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

series.line.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

series.line.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

series.line.itemStyle.normal.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.

series.line.label

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, labelis taken to be at the same level with itemStyle, and has two status normal and emphasis as itemStyle does.

series.line.label.emphasis.textStyle

Label font style.

series.line.label.emphasis.textStyle.fontSize

font size

series.line.label.emphasis.textStyle.fontFamily

font family

series.line.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

series.line.label.emphasis.textStyle.fontStyle

font style

Options are:

series.line.label.emphasis.textStyle.color

text color.

series.line.label.emphasis.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.line.label.emphasis.position

Label position.

Followings are the options:

series.line.label.emphasis.show

Whether to show label.

series.line.label.normal.textStyle

Label font style.

series.line.label.normal.textStyle.fontSize

font size

series.line.label.normal.textStyle.fontFamily

font family

series.line.label.normal.textStyle.fontWeight

font thick weight

Options are:

series.line.label.normal.textStyle.fontStyle

font style

Options are:

series.line.label.normal.textStyle.color

text color.

series.line.label.normal.formatter

Data label formatter, which supoports string template and callback function. In either form, \n is supported to represent a new line.

series.line.label.normal.position

Label position.

Followings are the options:

series.line.label.normal.show

Whether to show label.

series.line.step

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:

series.line.connectNulls

Whether to connect the line across null points.

series.line.clipOverflow

Whether to clip the overflowing part, which defaults to clip.

series.line.stack

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:

series.line.legendHoverLink

Whether to enable highlighting chart when legend is being hovered.

series.line.hoverAnimation

Whether to enable the animation effect when mouse is on the symbol.

series.line.showAllSymbol

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.

series.line.showSymbol

Whether to show symbol. It would be shown during tooltip hover.

series.line.symbolOffset

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.

series.line.symbolRotate

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.

series.line.symbolSize

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.

series.line.symbol

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.

series.line.polarIndex

Index of polar coordinate to combine with, which is useful for multiple polar axes in one chart.

series.line.yAxisIndex

Index of y axis to combine with, which is useful for multiple y axes in one chart.

series.line.xAxisIndex

Index of x axis to combine with, which is useful for multiple x axes in one chart.

series.line.coordinateSystem

The coordinate used in the series, whose options are:

series.line.name

Series name used for displaying in tooltip and filtering with legend, or updaing data and configuration with setOption.

graphic

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: {
        // ...
    }
}



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.

graphic.elements

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', ...}, ...
    ]
}

graphic.elements.bezierCurve

Quadratic bezier curve or cubic bezier curve.

graphic.elements.bezierCurve.style.shadowColor

color of shadow.

graphic.elements.bezierCurve.style.shadowOffsetY

Y offset of shadow.

graphic.elements.bezierCurve.style.shadowOffsetX

X offset of shadow.

graphic.elements.bezierCurve.style.shadowBlur

Width of shadow.

graphic.elements.bezierCurve.style.lineWidth

Width of stroke.

graphic.elements.bezierCurve.style.stroke

Color of stroke.

graphic.elements.bezierCurve.style.fill

Color filled in this element.

graphic.elements.bezierCurve.shape.percent

Specify the percentage of drawing, useful in animation.

Value range: [0, 1].

graphic.elements.bezierCurve.shape.cpy2

y of the second control point. If specified, cubic bezier is used.

If both cpx2 and cpy2 are not set, quatratic bezier is used.

graphic.elements.bezierCurve.shape.cpx2

x of the second control point. If specified, cubic bezier is used.

If both cpx2 and cpy2 are not set, quatratic bezier is used.

graphic.elements.bezierCurve.shape.cpy1

y of control point.

graphic.elements.bezierCurve.shape.cpx1

x of control point.

graphic.elements.bezierCurve.shape.y2

y value of the end point.

graphic.elements.bezierCurve.shape.x2

x value of the end point.

graphic.elements.bezierCurve.shape.y1

y value of the start point.

graphic.elements.bezierCurve.shape.x1

x value of the start point.

graphic.elements.bezierCurve.progressive

Whether use progressive render to improve performance. Usually used when number of element is too large.

graphic.elements.bezierCurve.draggable

Can be dragged or not.

graphic.elements.bezierCurve.cursor

The mouse style when mouse hover on this element, the same as cursor property in CSS.

graphic.elements.bezierCurve.invisible

Whether the element is visible.

graphic.elements.bezierCurve.silent

Whether response to mouse events / touch events.

graphic.elements.bezierCurve.zlevel

Determine which canvas layer this element should be in.

Notice: Multiple canvas layer may affect performance.

graphic.elements.bezierCurve.z

z value of the elements, determine the overlap order.

graphic.elements.bezierCurve.bounding

Used to specify whether the entire transformed element (containing children if is group) is confined in its container.

See sample:

Optional values:

graphic.elements.bezierCurve.bottom

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:

Only one between top and bottom can work.

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

graphic.elements.bezierCurve.top

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:

Only one between top and bottom can work.

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

graphic.elements.bezierCurve.right

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:

Only one between left and right can work.

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

graphic.elements.bezierCurve.left

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:

Only one between left and right can work.

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

graphic.elements.bezierCurve.$action

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:

graphic.elements.bezierCurve.id

id is used to specifying element when willing to update it. id can be ignored if you do not need it.

graphic.elements.bezierCurve.type

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,

graphic.elements.line

Line element.

graphic.elements.line.style.shadowColor

color of shadow.

graphic.elements.line.style.shadowOffsetY

Y offset of shadow.

graphic.elements.line.style.shadowOffsetX

X offset of shadow.

graphic.elements.line.style.shadowBlur

Width of shadow.

graphic.elements.line.style.lineWidth

Width of stroke.

graphic.elements.line.style.stroke

Color of stroke.

graphic.elements.line.style.fill

Color filled in this element.

graphic.elements.line.shape.percent

Specify the percentage of drawing, useful in animation.

Value range: [0, 1].

graphic.elements.line.shape.y2

y value of the end point.

graphic.elements.line.shape.x2

x value of the end point.

graphic.elements.line.shape.y1

y value of the start point.

graphic.elements.line.shape.x1

x value of the start point.

graphic.elements.line.progressive

Whether use progressive render to improve performance. Usually used when number of element is too large.

graphic.elements.line.draggable

Can be dragged or not.

graphic.elements.line.cursor

The mouse style when mouse hover on this element, the same as cursor property in CSS.

graphic.elements.line.invisible

Whether the element is visible.

graphic.elements.line.silent

Whether response to mouse events / touch events.

graphic.elements.line.zlevel

Determine which canvas layer this element should be in.

Notice: Multiple canvas layer may affect performance.

graphic.elements.line.z

z value of the elements, determine the overlap order.

graphic.elements.line.bounding

Used to specify whether the entire transformed element (containing children if is group) is confined in its container.

See sample:

Optional values:

graphic.elements.line.bottom

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:

Only one between top and bottom can work.

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

graphic.elements.line.top

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:

Only one between top and bottom can work.

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

graphic.elements.line.right

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:

Only one between left and right can work.

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

graphic.elements.line.left

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:

Only one between left and right can work.

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

graphic.elements.line.$action

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:

graphic.elements.line.id

id is used to specifying element when willing to update it. id can be ignored if you do not need it.

graphic.elements.line.type

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,

graphic.elements.polyline

Polyline element.

graphic.elements.polyline.style.shadowColor

color of shadow.

graphic.elements.polyline.style.shadowOffsetY

Y offset of shadow.

graphic.elements.polyline.style.shadowOffsetX

X offset of shadow.

graphic.elements.polyline.style.shadowBlur

Width of shadow.

graphic.elements.polyline.style.lineWidth

Width of stroke.

graphic.elements.polyline.style.stroke

Color of stroke.

graphic.elements.polyline.style.fill

Color filled in this element.

graphic.elements.polyline.shape.smoothConstraint

Whether prevent the smooth process cause the line out of the bounding box.

Only works when smooth is number (bezier smooth).

graphic.elements.polyline.shape.smooth

Whether smooth the line.

graphic.elements.polyline.shape.points

A list of points, which defines the shape, like [[22, 44], [44, 55], [11, 44], ...].

graphic.elements.polyline.progressive

Whether use progressive render to improve performance. Usually used when number of element is too large.

graphic.elements.polyline.draggable

Can be dragged or not.

graphic.elements.polyline.cursor

The mouse style when mouse hover on this element, the same as cursor property in CSS.

graphic.elements.polyline.invisible

Whether the element is visible.

graphic.elements.polyline.silent

Whether response to mouse events / touch events.

graphic.elements.polyline.zlevel

Determine which canvas layer this element should be in.

Notice: Multiple canvas layer may affect performance.

graphic.elements.polyline.z

z value of the elements, determine the overlap order.

graphic.elements.polyline.bounding

Used to specify whether the entire transformed element (containing children if is group) is confined in its container.

See sample:

Optional values:

graphic.elements.polyline.bottom

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:

Only one between top and bottom can work.

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

graphic.elements.polyline.top

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:

Only one between top and bottom can work.

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

graphic.elements.polyline.right

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:

Only one between left and right can work.

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

graphic.elements.polyline.left

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:

Only one between left and right can work.

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

graphic.elements.polyline.$action

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:

graphic.elements.polyline.id

id is used to specifying element when willing to update it. id can be ignored if you do not need it.

graphic.elements.polyline.type

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,

graphic.elements.polygon

Polygon element.

graphic.elements.polygon.style.shadowColor

color of shadow.

graphic.elements.polygon.style.shadowOffsetY

Y offset of shadow.

graphic.elements.polygon.style.shadowOffsetX

X offset of shadow.

graphic.elements.polygon.style.shadowBlur

Width of shadow.

graphic.elements.polygon.style.lineWidth

Width of stroke.

graphic.elements.polygon.style.stroke

Color of stroke.

graphic.elements.polygon.style.fill

Color filled in this element.

graphic.elements.polygon.shape.smoothConstraint

Whether prevent the smooth process cause the line out of the bounding box.

Only works when smooth is number (bezier smooth).

graphic.elements.polygon.shape.smooth

Whether smooth the line.

graphic.elements.polygon.shape.points

A list of points, which defines the shape, like [[22, 44], [44, 55], [11, 44], ...].

graphic.elements.polygon.progressive

Whether use progressive render to improve performance. Usually used when number of element is too large.

graphic.elements.polygon.draggable

Can be dragged or not.

graphic.elements.polygon.cursor

The mouse style when mouse hover on this element, the same as cursor property in CSS.

graphic.elements.polygon.invisible

Whether the element is visible.

graphic.elements.polygon.silent

Whether response to mouse events / touch events.

graphic.elements.polygon.zlevel

Determine which canvas layer this element should be in.

Notice: Multiple canvas layer may affect performance.

graphic.elements.polygon.z

z value of the elements, determine the overlap order.

graphic.elements.polygon.bounding

Used to specify whether the entire transformed element (containing children if is group) is confined in its container.

See sample:

Optional values:

graphic.elements.polygon.bottom

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:

Only one between top and bottom can work.

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

graphic.elements.polygon.top

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:

Only one between top and bottom can work.

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

graphic.elements.polygon.right

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:

Only one between left and right can work.

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

graphic.elements.polygon.left

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:

Only one between left and right can work.

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

graphic.elements.polygon.$action

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:

graphic.elements.polygon.id

id is used to specifying element when willing to update it. id can be ignored if you do not need it.

graphic.elements.polygon.type

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,

graphic.elements.arc

Arc element.

graphic.elements.arc.style.shadowColor

color of shadow.

graphic.elements.arc.style.shadowOffsetY

Y offset of shadow.

graphic.elements.arc.style.shadowOffsetX

X offset of shadow.

graphic.elements.arc.style.shadowBlur

Width of shadow.

graphic.elements.arc.style.lineWidth

Width of stroke.

graphic.elements.arc.style.stroke

Color of stroke.

graphic.elements.arc.style.fill

Color filled in this element.

graphic.elements.arc.shape.clockwise

Whether draw clockwise.

graphic.elements.arc.shape.endAngle

end anble, in radian.

graphic.elements.arc.shape.startAngle

start angle, in radian.

graphic.elements.arc.shape.r0

Inside radius.

graphic.elements.arc.shape.r

Outside radius.

graphic.elements.arc.shape.cy

The y value of the center of the element in the coordinate system of its parent.

graphic.elements.arc.shape.cx

The x value of the center of the element in the coordinate system of its parent.

graphic.elements.arc.progressive

Whether use progressive render to improve performance. Usually used when number of element is too large.

graphic.elements.arc.draggable

Can be dragged or not.

graphic.elements.arc.cursor

The mouse style when mouse hover on this element, the same as cursor property in CSS.

graphic.elements.arc.invisible

Whether the element is visible.

graphic.elements.arc.silent

Whether response to mouse events / touch events.

graphic.elements.arc.zlevel

Determine which canvas layer this element should be in.

Notice: Multiple canvas layer may affect performance.

graphic.elements.arc.z

z value of the elements, determine the overlap order.

graphic.elements.arc.bounding

Used to specify whether the entire transformed element (containing children if is group) is confined in its container.

See sample:

Optional values:

graphic.elements.arc.bottom

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:

Only one between top and bottom can work.

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

graphic.elements.arc.top

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:

Only one between top and bottom can work.

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

graphic.elements.arc.right

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:

Only one between left and right can work.

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

graphic.elements.arc.left

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:

Only one between left and right can work.

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

graphic.elements.arc.$action

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:

graphic.elements.arc.id

id is used to specifying element when willing to update it. id can be ignored if you do not need it.

graphic.elements.arc.type

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,

graphic.elements.sector

Sector element.

graphic.elements.sector.style.shadowColor

color of shadow.

graphic.elements.sector.style.shadowOffsetY

Y offset of shadow.

graphic.elements.sector.style.shadowOffsetX

X offset of shadow.

graphic.elements.sector.style.shadowBlur

Width of shadow.

graphic.elements.sector.style.lineWidth

Width of stroke.

graphic.elements.sector.style.stroke

Color of stroke.

graphic.elements.sector.style.fill

Color filled in this element.

graphic.elements.sector.shape.clockwise

Whether draw clockwise.

graphic.elements.sector.shape.endAngle

end anble, in radian.

graphic.elements.sector.shape.startAngle

start angle, in radian.

graphic.elements.sector.shape.r0

Inside radius.

graphic.elements.sector.shape.r

Outside radius.

graphic.elements.sector.shape.cy

The y value of the center of the element in the coordinate system of its parent.

graphic.elements.sector.shape.cx

The x value of the center of the element in the coordinate system of its parent.

graphic.elements.sector.progressive

Whether use progressive render to improve performance. Usually used when number of element is too large.

graphic.elements.sector.draggable

Can be dragged or not.

graphic.elements.sector.cursor

The mouse style when mouse hover on this element, the same as cursor property in CSS.

graphic.elements.sector.invisible

Whether the element is visible.

graphic.elements.sector.silent

Whether response to mouse events / touch events.

graphic.elements.sector.zlevel

Determine which canvas layer this element should be in.

Notice: Multiple canvas layer may affect performance.

graphic.elements.sector.z

z value of the elements, determine the overlap order.

graphic.elements.sector.bounding

Used to specify whether the entire transformed element (containing children if is group) is confined in its container.

See sample:

Optional values:

graphic.elements.sector.bottom

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:

Only one between top and bottom can work.

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

graphic.elements.sector.top

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:

Only one between top and bottom can work.

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

graphic.elements.sector.right

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:

Only one between left and right can work.

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

graphic.elements.sector.left

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:

Only one between left and right can work.

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

graphic.elements.sector.$action

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:

graphic.elements.sector.id

id is used to specifying element when willing to update it. id can be ignored if you do not need it.

graphic.elements.sector.type

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,

graphic.elements.ring

Ring element.

graphic.elements.ring.style.shadowColor

color of shadow.

graphic.elements.ring.style.shadowOffsetY

Y offset of shadow.

graphic.elements.ring.style.shadowOffsetX

X offset of shadow.

graphic.elements.ring.style.shadowBlur

Width of shadow.

graphic.elements.ring.style.lineWidth

Width of stroke.

graphic.elements.ring.style.stroke

Color of stroke.

graphic.elements.ring.style.fill

Color filled in this element.

graphic.elements.ring.shape.r0

Inside radius.

graphic.elements.ring.shape.r

Outside radius.

graphic.elements.ring.shape.cy

The y value of the center of the element in the coordinate system of its parent.

graphic.elements.ring.shape.cx

The x value of the center of the element in the coordinate system of its parent.

graphic.elements.ring.progressive

Whether use progressive render to improve performance. Usually used when number of element is too large.

graphic.elements.ring.draggable

Can be dragged or not.

graphic.elements.ring.cursor

The mouse style when mouse hover on this element, the same as cursor property in CSS.

graphic.elements.ring.invisible

Whether the element is visible.

graphic.elements.ring.silent

Whether response to mouse events / touch events.

graphic.elements.ring.zlevel

Determine which canvas layer this element should be in.

Notice: Multiple canvas layer may affect performance.

graphic.elements.ring.z

z value of the elements, determine the overlap order.

graphic.elements.ring.bounding

Used to specify whether the entire transformed element (containing children if is group) is confined in its container.

See sample:

Optional values:

graphic.elements.ring.bottom

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:

Only one between top and bottom can work.

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

graphic.elements.ring.top

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:

Only one between top and bottom can work.

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

graphic.elements.ring.right

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:

Only one between left and right can work.

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

graphic.elements.ring.left

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:

Only one between left and right can work.

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

graphic.elements.ring.$action

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:

graphic.elements.ring.id

id is used to specifying element when willing to update it. id can be ignored if you do not need it.

graphic.elements.ring.type

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,

graphic.elements.circle

Circle element.

graphic.elements.circle.style.shadowColor

color of shadow.

graphic.elements.circle.style.shadowOffsetY

Y offset of shadow.

graphic.elements.circle.style.shadowOffsetX

X offset of shadow.

graphic.elements.circle.style.shadowBlur

Width of shadow.

graphic.elements.circle.style.lineWidth

Width of stroke.

graphic.elements.circle.style.stroke

Color of stroke.

graphic.elements.circle.style.fill

Color filled in this element.

graphic.elements.circle.shape.r

Outside radius.

graphic.elements.circle.shape.cy

The y value of the center of the element in the coordinate system of its parent.

graphic.elements.circle.shape.cx

The x value of the center of the element in the coordinate system of its parent.

graphic.elements.circle.progressive

Whether use progressive render to improve performance. Usually used when number of element is too large.

graphic.elements.circle.draggable

Can be dragged or not.

graphic.elements.circle.cursor

The mouse style when mouse hover on this element, the same as cursor property in CSS.

graphic.elements.circle.invisible

Whether the element is visible.

graphic.elements.circle.silent

Whether response to mouse events / touch events.

graphic.elements.circle.zlevel

Determine which canvas layer this element should be in.

Notice: Multiple canvas layer may affect performance.

graphic.elements.circle.z

z value of the elements, determine the overlap order.

graphic.elements.circle.bounding

Used to specify whether the entire transformed element (containing children if is group) is confined in its container.

See sample:

Optional values:

graphic.elements.circle.bottom

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:

Only one between top and bottom can work.

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

graphic.elements.circle.top

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:

Only one between top and bottom can work.

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

graphic.elements.circle.right

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:

Only one between left and right can work.

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

graphic.elements.circle.left

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:

Only one between left and right can work.

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

graphic.elements.circle.$action

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:

graphic.elements.circle.id

id is used to specifying element when willing to update it. id can be ignored if you do not need it.

graphic.elements.circle.type

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,

graphic.elements.rect

Rectangle element.

graphic.elements.rect.style.shadowColor

color of shadow.

graphic.elements.rect.style.shadowOffsetY

Y offset of shadow.

graphic.elements.rect.style.shadowOffsetX

X offset of shadow.

graphic.elements.rect.style.shadowBlur

Width of shadow.

graphic.elements.rect.style.lineWidth

Width of stroke.

graphic.elements.rect.style.stroke

Color of stroke.

graphic.elements.rect.style.fill

Color filled in this element.

graphic.elements.rect.shape.height

The height of the shape of the element.

graphic.elements.rect.shape.width

The width of the shape of the element.

graphic.elements.rect.shape.y

The y value of the left-top corner of the element in the coordinate system of its parent.

graphic.elements.rect.shape.x

The x value of the left-top corner of the element in the coordinate system of its parent.

graphic.elements.rect.progressive

Whether use progressive render to improve performance. Usually used when number of element is too large.

graphic.elements.rect.draggable

Can be dragged or not.

graphic.elements.rect.cursor

The mouse style when mouse hover on this element, the same as cursor property in CSS.

graphic.elements.rect.invisible

Whether the element is visible.

graphic.elements.rect.silent

Whether response to mouse events / touch events.

graphic.elements.rect.zlevel

Determine which canvas layer this element should be in.

Notice: Multiple canvas layer may affect performance.

graphic.elements.rect.z

z value of the elements, determine the overlap order.

graphic.elements.rect.bounding

Used to specify whether the entire transformed element (containing children if is group) is confined in its container.

See sample:

Optional values:

graphic.elements.rect.bottom

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:

Only one between top and bottom can work.

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

graphic.elements.rect.top

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:

Only one between top and bottom can work.

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

graphic.elements.rect.right

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:

Only one between left and right can work.

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

graphic.elements.rect.left

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:

Only one between left and right can work.

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

graphic.elements.rect.$action

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:

graphic.elements.rect.id

id is used to specifying element when willing to update it. id can be ignored if you do not need it.

graphic.elements.rect.type

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,

graphic.elements.text

Text block.

graphic.elements.text.style.shadowColor

color of shadow.

graphic.elements.text.style.shadowOffsetY

Y offset of shadow.

graphic.elements.text.style.shadowOffsetX

X offset of shadow.

graphic.elements.text.style.shadowBlur

Width of shadow.

graphic.elements.text.style.lineWidth

Width of stroke.

graphic.elements.text.style.stroke

Color of stroke.

graphic.elements.text.style.fill

Color filled in this element.

graphic.elements.text.style.textVeticalAlign

Text vertical alignment. Optional values: 'top', 'middle', 'bottom'.

graphic.elements.text.style.textAlign

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.

graphic.elements.text.style.font

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'

graphic.elements.text.style.y

The y value of the left-top corner of the element in the coordinate system of its parent.

graphic.elements.text.style.x

The x value of the left-top corner of the element in the coordinate system of its parent.

graphic.elements.text.style.text

Text content. \n can be used as a line break.

graphic.elements.text.progressive

Whether use progressive render to improve performance. Usually used when number of element is too large.

graphic.elements.text.draggable

Can be dragged or not.

graphic.elements.text.cursor

The mouse style when mouse hover on this element, the same as cursor property in CSS.

graphic.elements.text.invisible

Whether the element is visible.

graphic.elements.text.silent

Whether response to mouse events / touch events.

graphic.elements.text.zlevel

Determine which canvas layer this element should be in.

Notice: Multiple canvas layer may affect performance.

graphic.elements.text.z

z value of the elements, determine the overlap order.

graphic.elements.text.bounding

Used to specify whether the entire transformed element (containing children if is group) is confined in its container.

See sample:

Optional values:

graphic.elements.text.bottom

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:

Only one between top and bottom can work.

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

graphic.elements.text.top

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:

Only one between top and bottom can work.

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

graphic.elements.text.right

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:

Only one between left and right can work.

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

graphic.elements.text.left

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:

Only one between left and right can work.

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

graphic.elements.text.$action

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:

graphic.elements.text.id

id is used to specifying element when willing to update it. id can be ignored if you do not need it.

graphic.elements.text.type

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,

graphic.elements.image.style.shadowColor

color of shadow.

graphic.elements.image.style.shadowOffsetY

Y offset of shadow.

graphic.elements.image.style.shadowOffsetX

X offset of shadow.

graphic.elements.image.style.shadowBlur

Width of shadow.

graphic.elements.image.style.lineWidth

Width of stroke.

graphic.elements.image.style.stroke

Color of stroke.

graphic.elements.image.style.fill

Color filled in this element.

graphic.elements.image.style.height

The height of the shape of the element.

graphic.elements.image.style.width

The width of the shape of the element.

graphic.elements.image.style.y

The y value of the left-top corner of the element in the coordinate system of its parent.

graphic.elements.image.style.x

The x value of the left-top corner of the element in the coordinate system of its parent.

graphic.elements.image.style.image

Specify contant of the image, can be a URL, or dataURI.

graphic.elements.image.progressive

Whether use progressive render to improve performance. Usually used when number of element is too large.

graphic.elements.image.draggable

Can be dragged or not.

graphic.elements.image.cursor

The mouse style when mouse hover on this element, the same as cursor property in CSS.

graphic.elements.image.invisible

Whether the element is visible.

graphic.elements.image.silent

Whether response to mouse events / touch events.

graphic.elements.image.zlevel

Determine which canvas layer this element should be in.

Notice: Multiple canvas layer may affect performance.

graphic.elements.image.z

z value of the elements, determine the overlap order.

graphic.elements.image.bounding

Used to specify whether the entire transformed element (containing children if is group) is confined in its container.

See sample:

Optional values:

graphic.elements.image.bottom

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:

Only one between top and bottom can work.

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

graphic.elements.image.top

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:

Only one between top and bottom can work.

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

graphic.elements.image.right

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:

Only one between left and right can work.

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

graphic.elements.image.left

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:

Only one between left and right can work.

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

graphic.elements.image.$action

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:

graphic.elements.image.id

id is used to specifying element when willing to update it. id can be ignored if you do not need it.

graphic.elements.image.type

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,

graphic.elements.group

group is the only type that can contain children, so that a group of elements can be positioned and transformed together.

graphic.elements.group.children

A list of children, each item is a declaration of an element.

graphic.elements.group.height

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'.

graphic.elements.group.width

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'.

graphic.elements.group.progressive

Whether use progressive render to improve performance. Usually used when number of element is too large.

graphic.elements.group.draggable

Can be dragged or not.

graphic.elements.group.cursor

The mouse style when mouse hover on this element, the same as cursor property in CSS.

graphic.elements.group.invisible

Whether the element is visible.

graphic.elements.group.silent

Whether response to mouse events / touch events.

graphic.elements.group.zlevel

Determine which canvas layer this element should be in.

Notice: Multiple canvas layer may affect performance.

graphic.elements.group.z

z value of the elements, determine the overlap order.

graphic.elements.group.bounding

Used to specify whether the entire transformed element (containing children if is group) is confined in its container.

See sample:

Optional values:

graphic.elements.group.bottom

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:

Only one between top and bottom can work.

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

graphic.elements.group.top

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:

Only one between top and bottom can work.

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

graphic.elements.group.right

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:

Only one between left and right can work.

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

graphic.elements.group.left

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:

Only one between left and right can work.

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

graphic.elements.group.$action

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:

graphic.elements.group.id

id is used to specifying element when willing to update it. id can be ignored if you do not need it.

graphic.elements.group.type

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

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:


Compatibility with ECharts 2:

timeline.data

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
    },
]

timeline.controlStyle

The style of control button, which includes: play button, previous button, and next button.

timeline.controlStyle.emphasis

Button style in highlighted state (when it's hovered by mouse).

timeline.controlStyle.emphasis.borderWidth

Width of button border.

timeline.controlStyle.emphasis.borderColor

Color of button border.

timeline.controlStyle.emphasis.color

Button color.

timeline.controlStyle.normal

Style of normal state for control button.

timeline.controlStyle.normal.borderWidth

Border width of button.

timeline.controlStyle.normal.borderColor

Color of button border.

timeline.controlStyle.normal.color

Button color.

timeline.controlStyle.nextIcon

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.

timeline.controlStyle.prevIcon

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.

timeline.controlStyle.stopIcon

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.

timeline.controlStyle.playIcon

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.

timeline.controlStyle.position

the location of control button.

timeline.controlStyle.itemGap

Interval between control button, in pixels (px).

timeline.controlStyle.itemSize

Size of control button, in pixels (px).

timeline.controlStyle.showNextBtn

Whether to show next button.

timeline.controlStyle.showPrevBtn

Whether to show previous button.

timeline.controlStyle.showPlayBtn

Whether to show play button.

timeline.controlStyle.show

Whether to show control button. false for hide all.

timeline.checkpointStyle

Style of the selected item (checkpoint).

timeline.checkpointStyle.animationEasing

The easing effect of animation of checkpoint in timeline component. Refers to easing sample for different easing effects.

timeline.checkpointStyle.animationDuration

The animation duration of checkpoint in timeline component.

timeline.checkpointStyle.animation

In timeline component, whether there is animation in checkpoint moving during the process of timeline playing and switching.

timeline.checkpointStyle.borderColor

The border-color of checkpoint in timeline component.

timeline.checkpointStyle.borderWidth

The border-width of checkpoint in timeline component.

timeline.checkpointStyle.color

Color of checkpoint in timeline component.

timeline.checkpointStyle.symbolOffset

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.

timeline.checkpointStyle.symbolRotate

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.symbolSize

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.

timeline.checkpointStyle.symbol

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.

timeline.itemStyle

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.

timeline.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

timeline.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

timeline.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

timeline.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

timeline.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute 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.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

timeline.itemStyle.emphasis.borderWidth

timeline border width. No border when it is set to be 0.

timeline.itemStyle.emphasis.borderColor

timeline border color, whose format is similar to that of color.

timeline.itemStyle.emphasis.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
)

timeline.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

timeline.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

timeline.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

timeline.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

timeline.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute 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.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

timeline.itemStyle.normal.borderWidth

timeline border width. No border when it is set to be 0.

timeline.itemStyle.normal.borderColor

timeline border color, whose format is similar to that of color.

timeline.itemStyle.normal.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
)

timeline.label

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.label.emphasis.textStyle.fontSize

timeline.lable.emphasis font size

timeline.label.emphasis.textStyle.fontFamily

timeline.lable.emphasis font family

timeline.label.emphasis.textStyle.fontWeight

timeline.lable.emphasis font thick weight

Options are:

timeline.label.emphasis.textStyle.fontStyle

timeline.lable.emphasis font style

Options are:

timeline.label.emphasis.textStyle.color

timeline.lable.emphasis text color.

timeline.label.emphasis.formatter

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('/');
}

timeline.label.emphasis.rotate

Rotation angle of label, in which positive values refer to counter clockwise rotation.

timeline.label.emphasis.interval

Interval of label. When it is assigned with a numerical value, such as 2, a label would show every 2 items.

timeline.label.emphasis.show

Whether to show the label.

timeline.label.normal.textStyle.fontSize

timeline.lable.normal font size

timeline.label.normal.textStyle.fontFamily

timeline.lable.normal font family

timeline.label.normal.textStyle.fontWeight

timeline.lable.normal font thick weight

Options are:

timeline.label.normal.textStyle.fontStyle

timeline.lable.normal font style

Options are:

timeline.label.normal.textStyle.color

timeline.lable.normal text color.

timeline.label.normal.formatter

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('/');
}

timeline.label.normal.rotate

Rotation angle of label, in which positive values refer to counter clockwise rotation.

timeline.label.normal.interval

Interval of label. When it is assigned with a numerical value, such as 2, a label would show every 2 items.

timeline.label.normal.show

Whether to show the label.

timeline.label.position

Configurations:

timeline.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

timeline.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

timeline.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

timeline.lineStyle.shadowColor

Shadow color. Support same format as color.

timeline.lineStyle.shadowBlur

Size of shadow blur. This attribute 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.lineStyle.type

timeline line type.

Options are:

timeline.lineStyle.width

timeline line width.

timeline.lineStyle.color

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
)

timeline.lineStyle.show

Whether to show the axis. It can be set to be false to hide the axis line to make a different style.

timeline.symbolOffset

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.

timeline.symbolRotate

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.symbolSize

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.

timeline.symbol

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.inverse

timeline.orient

Orientation of the component, whose valid values are:

timeline.padding

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
]

timeline.bottom

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.

timeline.right

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.

timeline.top

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.

timeline.left

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.

timeline.z

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.

timeline.zlevel

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.

timeline.controlPosition

Position of the play button, whose valid values are 'left' and 'right'.

timeline.realtime

Whether the view updates in real time during dragging the control dot.

timeline.playInterval

Indicates play speed (gap time between two state), whose unit is millisecond.

timeline.loop

Whether to loop playing.

timeline.rewind

Whether supports playing reversely.

timeline.autoPlay

Whether to play automatically.

timeline.currentIndex

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]).

timeline.axisType

Type of axis, whose values may be:

timeline.type

This attribute has only one valid value as slider by now. You don't have to change it.

timeline.show

Whether to show the timeline component. It would not show with a setting of false, but its functions still remain.

singleAxis

An axis with a single dimension. It can be used to display data in one dimension. For example:

singleAxis.data

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']

singleAxis.splitArea

Split area of axis in grid area, not shown by default.

singleAxis.splitArea.areaStyle

Split area style.

singleAxis.splitArea.areaStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

singleAxis.splitArea.areaStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

singleAxis.splitArea.areaStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

singleAxis.splitArea.areaStyle.shadowColor

Shadow color. Support same format as color.

singleAxis.splitArea.areaStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

singleAxis.splitArea.areaStyle.color

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.

singleAxis.splitArea.show

Whether to show the splitArea.

singleAxis.splitLine

SplitLine of axis in grid area.

singleAxis.splitLine.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

singleAxis.splitLine.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

singleAxis.splitLine.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

singleAxis.splitLine.lineStyle.shadowColor

Shadow color. Support same format as color.

singleAxis.splitLine.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

singleAxis.splitLine.lineStyle.type

splitLine line type.

Options are:

singleAxis.splitLine.lineStyle.width

splitLine line width.

singleAxis.splitLine.lineStyle.color

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']
    }
}

singleAxis.splitLine.show

Whether to show the splitLine. Value axes are shown by default, while category axes are not.

singleAxis.axisLabel

Settings related to axis label.

singleAxis.axisLabel.textStyle.fontSize

font size

singleAxis.axisLabel.textStyle.fontFamily

font family

singleAxis.axisLabel.textStyle.fontWeight

font thick weight

Options are:

singleAxis.axisLabel.textStyle.fontStyle

font style

Options are:

singleAxis.axisLabel.textStyle.color

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';
    }
}

singleAxis.axisLabel.formatter

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('/');
}

singleAxis.axisLabel.margin

The margin between the axis label and the axis line.

singleAxis.axisLabel.rotate

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.

singleAxis.axisLabel.inside

Specifies whether the axis label faces Inside. False by default.

singleAxis.axisLabel.show

Whether to show the label of axis label or not.

singleAxis.axisTick

Settings related to axis tick.

singleAxis.axisTick.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

singleAxis.axisTick.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

singleAxis.axisTick.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

singleAxis.axisTick.lineStyle.shadowColor

Shadow color. Support same format as color.

singleAxis.axisTick.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

singleAxis.axisTick.lineStyle.type

axisTick line type.

Options are:

singleAxis.axisTick.lineStyle.width

axisTick line width.

singleAxis.axisTick.lineStyle.color

Color of axis label is set to be axisLine.lineStyle.color by default.

singleAxis.axisTick.length

The length of the axis tick.

singleAxis.axisTick.inside

Specifies whether the axis label faces Inside. False by default.

singleAxis.axisTick.alignWithLabel

Align axis tick with label, which is available only when boundaryGap is set to be true in category axis. See the following picture:

singleAxis.axisTick.show

Whether to show the axis tick.

singleAxis.axisLine

Settings related to axis line.

singleAxis.axisLine.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

singleAxis.axisLine.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

singleAxis.axisLine.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

singleAxis.axisLine.lineStyle.shadowColor

Shadow color. Support same format as color.

singleAxis.axisLine.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

singleAxis.axisLine.lineStyle.type

line style line type.

Options are:

singleAxis.axisLine.lineStyle.width

line style line width.

singleAxis.axisLine.lineStyle.color

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
)

singleAxis.axisLine.show

Whether to show the axis line or not.

singleAxis.triggerEvent

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: ''
}

singleAxis.silent

True for axis that cannot be interacted with.

singleAxis.logBase

Base of logarithm, which is valid only for numeric axes with type: 'log'.

singleAxis.interval

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.

singleAxis.minInterval

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'.

singleAxis.splitNumber

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.

singleAxis.scale

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.

singleAxis.max

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.

singleAxis.min

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.

singleAxis.boundaryGap

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%']

singleAxis.inverse

Whether axis is inversed. New option from ECharts 3.

singleAxis.nameRotate

Rotation of axis name.

singleAxis.nameGap

Gap between axis name and axis line.

singleAxis.nameTextStyle

Text style of axis name.

singleAxis.nameTextStyle.fontSize

axis name font size

singleAxis.nameTextStyle.fontFamily

axis name font family

singleAxis.nameTextStyle.fontWeight

axis name font thick weight

Options are:

singleAxis.nameTextStyle.fontStyle

axis name font style

Options are:

singleAxis.nameTextStyle.color

Color of axis name uses axisLine.lineStyle.color by default.

singleAxis.nameLocation

Location of axis name.

Options:

singleAxis.name

Name of axis.

singleAxis.type

Type of axis

Option:

singleAxis.orient

Orientation of the axis. By default, it's 'horizontal'. You can set it to be 'vertical' to make a vertical axis.

singleAxis.height

Height of grid component. Adaptive by default.

singleAxis.width

Width of grid component. Adaptive by default.

singleAxis.bottom

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%'.

singleAxis.right

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%'.

singleAxis.top

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.

singleAxis.left

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.

singleAxis.z

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.

singleAxis.zlevel

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.

parallelAxis

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



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:



parallelAxis.data

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']

parallelAxis.axisLabel

Settings related to axis label.

parallelAxis.axisLabel.textStyle.fontSize

font size

parallelAxis.axisLabel.textStyle.fontFamily

font family

parallelAxis.axisLabel.textStyle.fontWeight

font thick weight

Options are:

parallelAxis.axisLabel.textStyle.fontStyle

font style

Options are:

parallelAxis.axisLabel.textStyle.color

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';
    }
}

parallelAxis.axisLabel.formatter

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('/');
}

parallelAxis.axisLabel.margin

The margin between the axis label and the axis line.

parallelAxis.axisLabel.rotate

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.

parallelAxis.axisLabel.inside

Specifies whether the axis label faces Inside. False by default.

parallelAxis.axisLabel.show

Whether to show the label of axis label or not.

parallelAxis.axisTick

Settings related to axis tick.

parallelAxis.axisTick.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

parallelAxis.axisTick.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

parallelAxis.axisTick.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

parallelAxis.axisTick.lineStyle.shadowColor

Shadow color. Support same format as color.

parallelAxis.axisTick.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

parallelAxis.axisTick.lineStyle.type

axisTick line type.

Options are:

parallelAxis.axisTick.lineStyle.width

axisTick line width.

parallelAxis.axisTick.lineStyle.color

Color of axis label is set to be axisLine.lineStyle.color by default.

parallelAxis.axisTick.length

The length of the axis tick.

parallelAxis.axisTick.inside

Specifies whether the axis label faces Inside. False by default.

parallelAxis.axisTick.alignWithLabel

Align axis tick with label, which is available only when boundaryGap is set to be true in category axis. See the following picture:

parallelAxis.axisTick.show

Whether to show the axis tick.

parallelAxis.axisLine

Settings related to axis line.

parallelAxis.axisLine.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

parallelAxis.axisLine.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

parallelAxis.axisLine.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

parallelAxis.axisLine.lineStyle.shadowColor

Shadow color. Support same format as color.

parallelAxis.axisLine.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

parallelAxis.axisLine.lineStyle.type

line style line type.

Options are:

parallelAxis.axisLine.lineStyle.width

line style line width.

parallelAxis.axisLine.lineStyle.color

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
)

parallelAxis.axisLine.show

Whether to show the axis line or not.

parallelAxis.triggerEvent

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: ''
}

parallelAxis.silent

True for axis that cannot be interacted with.

parallelAxis.logBase

Base of logarithm, which is valid only for numeric axes with type: 'log'.

parallelAxis.interval

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.

parallelAxis.minInterval

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'.

parallelAxis.splitNumber

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.

parallelAxis.scale

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.

parallelAxis.max

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.

parallelAxis.min

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.

parallelAxis.boundaryGap

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%']

parallelAxis.inverse

Whether axis is inversed. New option from ECharts 3.

parallelAxis.nameRotate

Rotation of axis name.

parallelAxis.nameGap

Gap between axis name and axis line.

parallelAxis.nameTextStyle

Text style of axis name.

parallelAxis.nameTextStyle.fontSize

axis name font size

parallelAxis.nameTextStyle.fontFamily

axis name font family

parallelAxis.nameTextStyle.fontWeight

axis name font thick weight

Options are:

parallelAxis.nameTextStyle.fontStyle

axis name font style

Options are:

parallelAxis.nameTextStyle.color

Color of axis name uses axisLine.lineStyle.color by default.

parallelAxis.nameLocation

Location of axis name.

Options:

parallelAxis.name

Name of axis.

parallelAxis.type

Type of axis

Option:

parallelAxis.areaSelectStyle

Area selecting is available on axes. Here is some configurations.


parallelAxis.areaSelectStyle.opacity

Opacity of the select box.

parallelAxis.areaSelectStyle.color

Border fill color of the select box.

parallelAxis.areaSelectStyle.borderColor

Border color of the select box.

parallelAxis.areaSelectStyle.borderWidth

Border width of the select box.

parallelAxis.areaSelectStyle.width

Width of selecting box.

parallelAxis.realtime

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.

parallelAxis.parallelIndex

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.

parallelAxis.dim

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.

parallel



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



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:



parallel.parallelAxisDefault

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.

See the sample.


parallel.parallelAxisDefault.data

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']

parallel.parallelAxisDefault.axisLabel

Settings related to axis label.

parallel.parallelAxisDefault.axisLabel.textStyle.fontSize

font size

parallel.parallelAxisDefault.axisLabel.textStyle.fontFamily

font family

parallel.parallelAxisDefault.axisLabel.textStyle.fontWeight

font thick weight

Options are:

parallel.parallelAxisDefault.axisLabel.textStyle.fontStyle

font style

Options are:

parallel.parallelAxisDefault.axisLabel.textStyle.color

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';
    }
}

parallel.parallelAxisDefault.axisLabel.formatter

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('/');
}

parallel.parallelAxisDefault.axisLabel.margin

The margin between the axis label and the axis line.

parallel.parallelAxisDefault.axisLabel.rotate

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.

parallel.parallelAxisDefault.axisLabel.inside

Specifies whether the axis label faces Inside. False by default.

parallel.parallelAxisDefault.axisLabel.show

Whether to show the label of axis label or not.

parallel.parallelAxisDefault.axisTick

Settings related to axis tick.

parallel.parallelAxisDefault.axisTick.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

parallel.parallelAxisDefault.axisTick.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

parallel.parallelAxisDefault.axisTick.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

parallel.parallelAxisDefault.axisTick.lineStyle.shadowColor

Shadow color. Support same format as color.

parallel.parallelAxisDefault.axisTick.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

parallel.parallelAxisDefault.axisTick.lineStyle.type

axisTick line type.

Options are:

parallel.parallelAxisDefault.axisTick.lineStyle.width

axisTick line width.

parallel.parallelAxisDefault.axisTick.lineStyle.color

Color of axis label is set to be axisLine.lineStyle.color by default.

parallel.parallelAxisDefault.axisTick.length

The length of the axis tick.

parallel.parallelAxisDefault.axisTick.inside

Specifies whether the axis label faces Inside. False by default.

parallel.parallelAxisDefault.axisTick.alignWithLabel

Align axis tick with label, which is available only when boundaryGap is set to be true in category axis. See the following picture:

parallel.parallelAxisDefault.axisTick.show

Whether to show the axis tick.

parallel.parallelAxisDefault.axisLine

Settings related to axis line.

parallel.parallelAxisDefault.axisLine.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

parallel.parallelAxisDefault.axisLine.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

parallel.parallelAxisDefault.axisLine.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

parallel.parallelAxisDefault.axisLine.lineStyle.shadowColor

Shadow color. Support same format as color.

parallel.parallelAxisDefault.axisLine.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

parallel.parallelAxisDefault.axisLine.lineStyle.type

line style line type.

Options are:

parallel.parallelAxisDefault.axisLine.lineStyle.width

line style line width.

parallel.parallelAxisDefault.axisLine.lineStyle.color

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
)

parallel.parallelAxisDefault.axisLine.show

Whether to show the axis line or not.

parallel.parallelAxisDefault.triggerEvent

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: ''
}

parallel.parallelAxisDefault.silent

True for axis that cannot be interacted with.

parallel.parallelAxisDefault.logBase

Base of logarithm, which is valid only for numeric axes with type: 'log'.

parallel.parallelAxisDefault.interval

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.

parallel.parallelAxisDefault.minInterval

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'.

parallel.parallelAxisDefault.splitNumber

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.

parallel.parallelAxisDefault.scale

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.

parallel.parallelAxisDefault.max

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.

parallel.parallelAxisDefault.min

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.

parallel.parallelAxisDefault.boundaryGap

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%']

parallel.parallelAxisDefault.inverse

Whether axis is inversed. New option from ECharts 3.

parallel.parallelAxisDefault.nameRotate

Rotation of axis name.

parallel.parallelAxisDefault.nameGap

Gap between axis name and axis line.

parallel.parallelAxisDefault.nameTextStyle

Text style of axis name.

parallel.parallelAxisDefault.nameTextStyle.fontSize

axis name font size

parallel.parallelAxisDefault.nameTextStyle.fontFamily

axis name font family

parallel.parallelAxisDefault.nameTextStyle.fontWeight

axis name font thick weight

Options are:

parallel.parallelAxisDefault.nameTextStyle.fontStyle

axis name font style

Options are:

parallel.parallelAxisDefault.nameTextStyle.color

Color of axis name uses axisLine.lineStyle.color by default.

parallel.parallelAxisDefault.nameLocation

Location of axis name.

Options:

parallel.parallelAxisDefault.name

Name of axis.

parallel.parallelAxisDefault.type

Type of axis

Option:

parallel.axisExpandWidth

Distance between two axes when at expanding state, in pixels.

Please refer to parallel.axisExpandable for more information.

parallel.axisExpandCount

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.

parallel.axisExpandCenter

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.

parallel.axisExpandable

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.

parallel.layout

Layout modes, whose optional values are:

parallel.height

Height of parallel component. Adaptive by default.

parallel.width

Width of parallel component. Adaptive by default.

parallel.bottom

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%'.

parallel.right

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%'.

parallel.top

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.

parallel.left

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.

parallel.z

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.

parallel.zlevel

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.

geo

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
}

geo.silent

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

geo.regions

Configure style for specified regions. For example:

regions: [{
    name: 'Guangdong',
    itemStyle: {
        normal: {
            color: 'red'
        }
    }
}]

geo.layoutSize

Size of map, see layoutCenter for more information. Percentage relative to screen width, and absolute pixel values are supported.

geo.layoutCenter

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.

geo.bottom

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.

geo.right

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.

geo.top

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.

geo.left

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.

geo.z

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.

geo.zlevel

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.

geo.itemStyle

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.

geo.itemStyle.emphasis

Map area style in highlighted state.

geo.itemStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

geo.itemStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

geo.itemStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

geo.itemStyle.emphasis.shadowColor

Shadow color. Support same format as color.

geo.itemStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

geo.itemStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

geo.itemStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

geo.itemStyle.emphasis.borderColor

border color, whose format is similar to that of color.

geo.itemStyle.emphasis.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
)

geo.itemStyle.normal

Map area style in normal state.

geo.itemStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

geo.itemStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

geo.itemStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

geo.itemStyle.normal.shadowColor

Shadow color. Support same format as color.

geo.itemStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

geo.itemStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

geo.itemStyle.normal.borderWidth

border width. No border when it is set to be 0.

geo.itemStyle.normal.borderColor

border color, whose format is similar to that of color.

geo.itemStyle.normal.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
)

geo.label

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, labelis taken to be at the same level with itemStyle, and has two status normal and emphasis as itemStyle does.

geo.label.emphasis.textStyle

Style of text in highlighted state.

geo.label.emphasis.textStyle.fontSize

font size

geo.label.emphasis.textStyle.fontFamily

font family

geo.label.emphasis.textStyle.fontWeight

font thick weight

Options are:

geo.label.emphasis.textStyle.fontStyle

font style

Options are:

geo.label.emphasis.textStyle.color

text color.

geo.label.emphasis.show

Whether to show label in highlighted state.

geo.label.normal.textStyle

Style of text in normal state.

geo.label.normal.textStyle.fontSize

font size

geo.label.normal.textStyle.fontFamily

font family

geo.label.normal.textStyle.fontWeight

font thick weight

Options are:

geo.label.normal.textStyle.fontStyle

font style

Options are:

geo.label.normal.textStyle.color

text color.

geo.label.normal.show

Whether to show label in normal state.

geo.selectedMode

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.

geo.nameMap

Name mapping for customized areas. For example:

{
    'China' : '中国'
}

geo.scaleLimit

Limit of scaling, with min and max. 1 by default.

geo.scaleLimit.max

Maximum scaling

geo.scaleLimit.min

Minimum scaling

geo.zoom

Zoom rate of current view-port.

geo.aspectScale

Used to scale aspect of geo.

The final aspect is calculated by: geoBoundingRect.width / geoBoundingRect.height * aspectScale.

geo.center

Center of current view-port, in longitude and latitude.

Example:

center: [115.97, 29.71]

geo.roam

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.

geo.map

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.

geo.show

Whether to show the geo component.

brush

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:

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 seriesIndexes, which assignes the series that can be interacted. For example, it can be:

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:

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.

brush.outOfBrush

Defines visual effects of items out of selection.

Available visual effects include:

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
    }
}

brush.inBrush

Defines visual effects of items in selection.

Available visual effects include:

In most cases, inBrush can be left unassigned, in which case default visual configuration is remained.

brush.removeOnClick

Defined whether clearing all select-boxes on click is enabled when brush.brushMode is 'single'.

brush.throttleDelay

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:

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.

brush.throttleType

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:

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.

brush.brushStyle

Defailt brush style, whose value is:

{
    borderWidth: 1,
    color: 'rgba(120,140,180,0.3)',
    borderColor: 'rgba(120,140,180,0.8)',
    width: null
},

brush.transformable

Determines whether a selected box can be changed in shape or translated.

brush.brushMode

Default brush mode, whose value can be:

brush.brushType

Default type of brush.

brush.yAxisIndex

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:

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`
        ...
    }
};

brush.xAxisIndex

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:

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`
        ...
    }
};

brush.geoIndex

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:

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`
        ...
    }
};

brush.seriesIndex

Assigns which of the series can use brush selecting, whose value can be:

brush.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 seriesIndexes, which assignes the series that can be interacted. For example, it can be:

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
        }
    ]
};

brush.toolbox

Use the buttons in toolbox.

Buttons in toolbox that is related to brush includes:

toolbox

A group of utility tools, which includes export, data view, dynamic type switching, data area zooming, and reset.

Example:

toolbox.height

Height of toolbox component. Adaptive by default.

toolbox.width

Width of toolbox component. Adaptive by default.

toolbox.bottom

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.

toolbox.right

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.

toolbox.top

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.

toolbox.left

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.

toolbox.z

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.

toolbox.zlevel

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.

toolbox.iconStyle

The style setting of Shared icon.

toolbox.iconStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

toolbox.iconStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

toolbox.iconStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

toolbox.iconStyle.emphasis.shadowColor

Shadow color. Support same format as color.

toolbox.iconStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

toolbox.iconStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

toolbox.iconStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

toolbox.iconStyle.emphasis.borderColor

border color, whose format is similar to that of color.

toolbox.iconStyle.emphasis.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
)

toolbox.iconStyle.normal.textAlign

Align of label text: 'left' / 'right'.

toolbox.iconStyle.normal.textPosition

Position of label: 'left' / 'right' / 'top' / 'bottom'.

toolbox.iconStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

toolbox.iconStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

toolbox.iconStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

toolbox.iconStyle.normal.shadowColor

Shadow color. Support same format as color.

toolbox.iconStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

toolbox.iconStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

toolbox.iconStyle.normal.borderWidth

border width. No border when it is set to be 0.

toolbox.iconStyle.normal.borderColor

border color, whose format is similar to that of color.

toolbox.iconStyle.normal.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
)

toolbox.feature

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')
                }
            }
        }
    }
}

toolbox.feature.brush

Brush-selecting icon.

It can also be configured at brush.toolbox.

toolbox.feature.brush.title

Title.

toolbox.feature.brush.icon

Icon path for each icon.

toolbox.feature.brush.icon.clear

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.

toolbox.feature.brush.icon.keep

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.

toolbox.feature.brush.icon.lineY

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.

toolbox.feature.brush.icon.lineX

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.

toolbox.feature.brush.icon.polygon

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.

toolbox.feature.brush.icon.rect

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.

toolbox.feature.brush.type

Icons used, whose values are:

toolbox.feature.magicType

Magic type switching. 示例:

feature: {
    magicType: {
        type: ['line', 'bar', 'stack', 'tiled']
    }
}

toolbox.feature.magicType.seriesIndex

Series list for each type.

toolbox.feature.magicType.option

Configuration item for each type, which will be used when switching to certain type.

toolbox.feature.magicType.iconStyle

The style setting of magic type switching icon.

toolbox.feature.magicType.iconStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

toolbox.feature.magicType.iconStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

toolbox.feature.magicType.iconStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

toolbox.feature.magicType.iconStyle.emphasis.shadowColor

Shadow color. Support same format as color.

toolbox.feature.magicType.iconStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

toolbox.feature.magicType.iconStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

toolbox.feature.magicType.iconStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

toolbox.feature.magicType.iconStyle.emphasis.borderColor

border color, whose format is similar to that of color.

toolbox.feature.magicType.iconStyle.emphasis.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
)

toolbox.feature.magicType.iconStyle.normal.textAlign

Align of label text: 'left' / 'right'.

toolbox.feature.magicType.iconStyle.normal.textPosition

Position of label: 'left' / 'right' / 'top' / 'bottom'.

toolbox.feature.magicType.iconStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

toolbox.feature.magicType.iconStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

toolbox.feature.magicType.iconStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

toolbox.feature.magicType.iconStyle.normal.shadowColor

Shadow color. Support same format as color.

toolbox.feature.magicType.iconStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

toolbox.feature.magicType.iconStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

toolbox.feature.magicType.iconStyle.normal.borderWidth

border width. No border when it is set to be 0.

toolbox.feature.magicType.iconStyle.normal.borderColor

border color, whose format is similar to that of color.

toolbox.feature.magicType.iconStyle.normal.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
)

toolbox.feature.magicType.icon

the different types of icon path , which could be configurated individually.

toolbox.feature.magicType.icon.tiled

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.

toolbox.feature.magicType.icon.stack

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.

toolbox.feature.magicType.icon.bar

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.

toolbox.feature.magicType.icon.line

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.

toolbox.feature.magicType.title

Title for different types, can be configured seperately.

toolbox.feature.magicType.type

Enabled magic types, including 'line' (for line charts), 'bar' (for bar charts), 'stack' (for stacked charts), and 'tiled' (for tiled charts).

toolbox.feature.magicType.show

Whether to show the tool.

toolbox.feature.dataZoom

Data area zooming, which only supports rectangular coordinate by now.

toolbox.feature.dataZoom.yAxisIndex

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.

toolbox.feature.dataZoom.xAxisIndex

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.

toolbox.feature.dataZoom.iconStyle

The style setting of data area zooming icon.

toolbox.feature.dataZoom.iconStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

toolbox.feature.dataZoom.iconStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

toolbox.feature.dataZoom.iconStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

toolbox.feature.dataZoom.iconStyle.emphasis.shadowColor

Shadow color. Support same format as color.

toolbox.feature.dataZoom.iconStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

toolbox.feature.dataZoom.iconStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

toolbox.feature.dataZoom.iconStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

toolbox.feature.dataZoom.iconStyle.emphasis.borderColor

border color, whose format is similar to that of color.

toolbox.feature.dataZoom.iconStyle.emphasis.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
)

toolbox.feature.dataZoom.iconStyle.normal.textAlign

Align of label text: 'left' / 'right'.

toolbox.feature.dataZoom.iconStyle.normal.textPosition

Position of label: 'left' / 'right' / 'top' / 'bottom'.

toolbox.feature.dataZoom.iconStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

toolbox.feature.dataZoom.iconStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

toolbox.feature.dataZoom.iconStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

toolbox.feature.dataZoom.iconStyle.normal.shadowColor

Shadow color. Support same format as color.

toolbox.feature.dataZoom.iconStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

toolbox.feature.dataZoom.iconStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

toolbox.feature.dataZoom.iconStyle.normal.borderWidth

border width. No border when it is set to be 0.

toolbox.feature.dataZoom.iconStyle.normal.borderColor

border color, whose format is similar to that of color.

toolbox.feature.dataZoom.iconStyle.normal.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
)

toolbox.feature.dataZoom.icon

Zooming and restore icon path.

toolbox.feature.dataZoom.icon.back

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.

toolbox.feature.dataZoom.icon.zoom

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.

toolbox.feature.dataZoom.title

Restored and zoomed title text.

toolbox.feature.dataZoom.show

Whether to show the tool.

toolbox.feature.dataView

Data view tool, which could display data in current chart and updates chart after being edited.

toolbox.feature.dataView.buttonTextColor

Color of button text.

toolbox.feature.dataView.buttonColor

Button color.

toolbox.feature.dataView.textColor

Text color.

toolbox.feature.dataView.textareaBorderColor

Border color of input area of the floating layer in data view.

toolbox.feature.dataView.textareaColor

Background color of input area of the floating layer in data view.

toolbox.feature.dataView.backgroundColor

Background color of the floating layer in data view.

toolbox.feature.dataView.lang

There are 3 names in data view, which are ['data view', 'turn off' and 'refresh'].

toolbox.feature.dataView.contentToOption

(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.

toolbox.feature.dataView.optionToContent

(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;
}

toolbox.feature.dataView.readOnly

Whether it is read-only.

toolbox.feature.dataView.iconStyle

The style setting of data view icon.

toolbox.feature.dataView.iconStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

toolbox.feature.dataView.iconStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

toolbox.feature.dataView.iconStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

toolbox.feature.dataView.iconStyle.emphasis.shadowColor

Shadow color. Support same format as color.

toolbox.feature.dataView.iconStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

toolbox.feature.dataView.iconStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

toolbox.feature.dataView.iconStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

toolbox.feature.dataView.iconStyle.emphasis.borderColor

border color, whose format is similar to that of color.

toolbox.feature.dataView.iconStyle.emphasis.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
)

toolbox.feature.dataView.iconStyle.normal.textAlign

Align of label text: 'left' / 'right'.

toolbox.feature.dataView.iconStyle.normal.textPosition

Position of label: 'left' / 'right' / 'top' / 'bottom'.

toolbox.feature.dataView.iconStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

toolbox.feature.dataView.iconStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

toolbox.feature.dataView.iconStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

toolbox.feature.dataView.iconStyle.normal.shadowColor

Shadow color. Support same format as color.

toolbox.feature.dataView.iconStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

toolbox.feature.dataView.iconStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

toolbox.feature.dataView.iconStyle.normal.borderWidth

border width. No border when it is set to be 0.

toolbox.feature.dataView.iconStyle.normal.borderColor

border color, whose format is similar to that of color.

toolbox.feature.dataView.iconStyle.normal.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
)

toolbox.feature.dataView.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.

toolbox.feature.dataView.show

Whether to show the tool.

toolbox.feature.restore

Restore configuration item.

toolbox.feature.restore.iconStyle

The style setting of restore icon.

toolbox.feature.restore.iconStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

toolbox.feature.restore.iconStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

toolbox.feature.restore.iconStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

toolbox.feature.restore.iconStyle.emphasis.shadowColor

Shadow color. Support same format as color.

toolbox.feature.restore.iconStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

toolbox.feature.restore.iconStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

toolbox.feature.restore.iconStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

toolbox.feature.restore.iconStyle.emphasis.borderColor

border color, whose format is similar to that of color.

toolbox.feature.restore.iconStyle.emphasis.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
)

toolbox.feature.restore.iconStyle.normal.textAlign

Align of label text: 'left' / 'right'.

toolbox.feature.restore.iconStyle.normal.textPosition

Position of label: 'left' / 'right' / 'top' / 'bottom'.

toolbox.feature.restore.iconStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

toolbox.feature.restore.iconStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

toolbox.feature.restore.iconStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

toolbox.feature.restore.iconStyle.normal.shadowColor

Shadow color. Support same format as color.

toolbox.feature.restore.iconStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

toolbox.feature.restore.iconStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

toolbox.feature.restore.iconStyle.normal.borderWidth

border width. No border when it is set to be 0.

toolbox.feature.restore.iconStyle.normal.borderColor

border color, whose format is similar to that of color.

toolbox.feature.restore.iconStyle.normal.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
)

toolbox.feature.restore.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.

toolbox.feature.restore.show

Whether to show the tool.

toolbox.feature.saveAsImage

Save as image.

toolbox.feature.saveAsImage.pixelRatio

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.

toolbox.feature.saveAsImage.iconStyle

The style setting of save as image icon.

toolbox.feature.saveAsImage.iconStyle.emphasis.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

toolbox.feature.saveAsImage.iconStyle.emphasis.shadowOffsetY

Offset distance on the vertical direction of shadow.

toolbox.feature.saveAsImage.iconStyle.emphasis.shadowOffsetX

Offset distance on the horizontal direction of shadow.

toolbox.feature.saveAsImage.iconStyle.emphasis.shadowColor

Shadow color. Support same format as color.

toolbox.feature.saveAsImage.iconStyle.emphasis.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

toolbox.feature.saveAsImage.iconStyle.emphasis.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

toolbox.feature.saveAsImage.iconStyle.emphasis.borderWidth

border width. No border when it is set to be 0.

toolbox.feature.saveAsImage.iconStyle.emphasis.borderColor

border color, whose format is similar to that of color.

toolbox.feature.saveAsImage.iconStyle.emphasis.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
)

toolbox.feature.saveAsImage.iconStyle.normal.textAlign

Align of label text: 'left' / 'right'.

toolbox.feature.saveAsImage.iconStyle.normal.textPosition

Position of label: 'left' / 'right' / 'top' / 'bottom'.

toolbox.feature.saveAsImage.iconStyle.normal.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

toolbox.feature.saveAsImage.iconStyle.normal.shadowOffsetY

Offset distance on the vertical direction of shadow.

toolbox.feature.saveAsImage.iconStyle.normal.shadowOffsetX

Offset distance on the horizontal direction of shadow.

toolbox.feature.saveAsImage.iconStyle.normal.shadowColor

Shadow color. Support same format as color.

toolbox.feature.saveAsImage.iconStyle.normal.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

toolbox.feature.saveAsImage.iconStyle.normal.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

toolbox.feature.saveAsImage.iconStyle.normal.borderWidth

border width. No border when it is set to be 0.

toolbox.feature.saveAsImage.iconStyle.normal.borderColor

border color, whose format is similar to that of color.

toolbox.feature.saveAsImage.iconStyle.normal.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
)

toolbox.feature.saveAsImage.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.

toolbox.feature.saveAsImage.show

Whether to show the tool.

toolbox.feature.saveAsImage.excludeComponents

Components to be excluded when export. By default, toolbox is excluded.

toolbox.feature.saveAsImage.backgroundColor

Background color to save the image, whose default value is backgroundColor. If backgroundColor is not set, white color is used.

toolbox.feature.saveAsImage.name

Name to save the image, whose default value is title.text.

toolbox.feature.saveAsImage.type

Format to save the image in, which supports'png' and 'jpeg'.

toolbox.showTitle

Whether to show the title of each tool icon when mouse hovers.

toolbox.itemGap

The gap between each icon of toolbox. It is horizontal gap in horizontal layout, while vertical gap in vertical layout.

toolbox.itemSize

The size of toolbox's icon.

toolbox.orient

The layout orientation of toolbox's icon.

Options:

toolbox.show

Whether to show toolbox component.

visualMap

visualMap is a type of component for visual encoding, which maps the data to visual channels, including:

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. ✦



visualMap.piecewise

Piecewise visualMap component (visualMapPiecewise)

(Reference to the introduction of visual Map component (visualMap))

Sample:

Piecewise visualMap component works in one of the three modes:



visualMap.piecewise.formatter

the formatter tool for label.

formatter: function (value, value2) {
    return 'aaaa' + value + 'bbbb' + value2;
}

visualMap.piecewise.textStyle.fontSize

visualMap font size

visualMap.piecewise.textStyle.fontFamily

visualMap font family

visualMap.piecewise.textStyle.fontWeight

visualMap font thick weight

Options are:

visualMap.piecewise.textStyle.fontStyle

visualMap font style

Options are:

visualMap.piecewise.textStyle.color

visualMap text color.

visualMap.piecewise.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.

visualMap.piecewise.borderWidth

border width of visualMap component, with unit: px.

visualMap.piecewise.borderColor

border color of visualMap component.

visualMap.piecewise.backgroundColor

background color of visualMap component.

visualMap.piecewise.padding

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
]

visualMap.piecewise.orient

How to layout the visualMap component, 'horizontal' or 'vertical'.

visualMap.piecewise.bottom

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%'.

visualMap.piecewise.right

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%'.

visualMap.piecewise.top

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.

visualMap.piecewise.left

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.

visualMap.piecewise.z

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.

visualMap.piecewise.zlevel

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.

visualMap.piecewise.controller

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.

visualMap.piecewise.controller.outOfRange

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:

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 ✦



✦ 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?

About the value of visual channel (visual value):

About the possible value range of visual value:

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']
    }
}

Example


✦ How to modity configurations of vsiual encoding? ✦

If you want to modify the configurations of visual encoding after chart been rendered (by invoke setOption to set the initial option), setOption can be used again to modify configurations of visual encoding. For instance:

chart.setOption({
    visualMap: {
        inRange: {color: ['red', 'blue']}
    }
});

Notice:

// 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.

visualMap.piecewise.controller.inRange

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:


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 ✦



✦ 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?

About the value of visual channel (visual value):

About the possible value range of visual value:

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']
    }
}

Example


✦ How to modity configurations of vsiual encoding? ✦

If you want to modify the configurations of visual encoding after chart been rendered (by invoke setOption to set the initial option), setOption can be used again to modify configurations of visual encoding. For instance:

chart.setOption({
    visualMap: {
        inRange: {color: ['red', 'blue']}
    }
});

Notice:

// 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.

visualMap.piecewise.outOfRange

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:

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 ✦



✦ 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?

About the value of visual channel (visual value):

About the possible value range of visual value:

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']
    }
}

Example


✦ How to modity configurations of vsiual encoding? ✦

If you want to modify the configurations of visual encoding after chart been rendered (by invoke setOption to set the initial option), setOption can be used again to modify configurations of visual encoding. For instance:

chart.setOption({
    visualMap: {
        inRange: {color: ['red', 'blue']}
    }
});

Notice:

// 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.

visualMap.piecewise.inRange

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:


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 ✦



✦ 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?

About the value of visual channel (visual value):

About the possible value range of visual value:

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']
    }
}

Example


✦ How to modity configurations of vsiual encoding? ✦

If you want to modify the configurations of visual encoding after chart been rendered (by invoke setOption to set the initial option), setOption can be used again to modify configurations of visual encoding. For instance:

chart.setOption({
    visualMap: {
        inRange: {color: ['red', 'blue']}
    }
});

Notice:

// 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.

visualMap.piecewise.hoverLink

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.

visualMap.piecewise.seriesIndex(number|Array.)

Specify visual mapping should be performed on which series, from which series.data is fetched.

All series are used by defualt.

visualMap.piecewise.dimension

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.

visualMap.piecewise.show

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.

visualMap.piecewise.itemSymbol

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).

visualMap.piecewise.itemGap = 10

Its the distance between each two graphical elements for pieces. The unit is px.

visualMap.piecewise.textGap

The distance between the ends of the graphical elements for pieces and the labels, with unit px. See visualMap-piecewise.text

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.

visualMap.piecewise.align

The layout relationship between the graphical elements for pieces and their labels. Possible values are:

visualMap.piecewise.itemHeight

The height of each graphical element that represents a piece.

visualMap.piecewise.itemWidth

The width of each graphical element that represents a piece.

visualMap.piecewise.precision

The decimal precision of label, defaults to be 0 (no decimals).

visualMap.piecewise.inverse

Whether to inverse the layout of visualMap component.

If you just have a try, you'll know it is not so complicated.

visualMap.piecewise.selectedMode

Selected Mode could be:

visualMap.piecewise.maxOpen

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.

visualMap.piecewise.minOpen

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.

visualMap.piecewise.max

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.

visualMap.piecewise.min

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.

visualMap.piecewise.categories

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'
],

Sample

You would realize the sequence in categories by a simple trial. See more detailed rules in visualMap.inverse.

visualMap.piecewise.pieces

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:

Sample

(Notes: In ECharts2, pieces is called splitList, which is retained in ECharts3 for compatibility. But pieces is recommended.)

You would realize the sequence in pieces by a simple trial. See more detailed rules in visualMap.inverse.

visualMap.piecewise.splitNumber

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.

visualMap.piecewise.type

Used to determine it is a piecewise visualMap component.

visualMap.continuous

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.



visualMap.continuous.formatter

the formatter tool for label.

formatter: function (value) {
    return 'aaaa' + value + 'bbbb';
}

visualMap.continuous.textStyle.fontSize

visualMap font size

visualMap.continuous.textStyle.fontFamily

visualMap font family

visualMap.continuous.textStyle.fontWeight

visualMap font thick weight

Options are:

visualMap.continuous.textStyle.fontStyle

visualMap font style

Options are:

visualMap.continuous.textStyle.color

visualMap text color.

visualMap.continuous.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.

visualMap.continuous.borderWidth

border width of visualMap component, with unit: px.

visualMap.continuous.borderColor

border color of visualMap component.

visualMap.continuous.backgroundColor

background color of visualMap component.

visualMap.continuous.padding

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
]

visualMap.continuous.orient

How to layout the visualMap component, 'horizontal' or 'vertical'.

visualMap.continuous.bottom

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%'.

visualMap.continuous.right

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%'.

visualMap.continuous.top

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.

visualMap.continuous.left

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.

visualMap.continuous.z

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.

visualMap.continuous.zlevel

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.

visualMap.continuous.controller

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.

visualMap.continuous.controller.outOfRange

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:

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 ✦



✦ 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?

About the value of visual channel (visual value):

About the possible value range of visual value:

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']
    }
}

Example


✦ How to modity configurations of vsiual encoding? ✦

If you want to modify the configurations of visual encoding after chart been rendered (by invoke setOption to set the initial option), setOption can be used again to modify configurations of visual encoding. For instance:

chart.setOption({
    visualMap: {
        inRange: {color: ['red', 'blue']}
    }
});

Notice:

// 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.

visualMap.continuous.controller.inRange

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:


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 ✦



✦ 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?

About the value of visual channel (visual value):

About the possible value range of visual value:

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']
    }
}

Example


✦ How to modity configurations of vsiual encoding? ✦

If you want to modify the configurations of visual encoding after chart been rendered (by invoke setOption to set the initial option), setOption can be used again to modify configurations of visual encoding. For instance:

chart.setOption({
    visualMap: {
        inRange: {color: ['red', 'blue']}
    }
});

Notice:

// 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.

visualMap.continuous.outOfRange

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:

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 ✦



✦ 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?

About the value of visual channel (visual value):

About the possible value range of visual value:

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']
    }
}

Example


✦ How to modity configurations of vsiual encoding? ✦

If you want to modify the configurations of visual encoding after chart been rendered (by invoke setOption to set the initial option), setOption can be used again to modify configurations of visual encoding. For instance:

chart.setOption({
    visualMap: {
        inRange: {color: ['red', 'blue']}
    }
});

Notice:

// 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.

visualMap.continuous.inRange

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:


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 ✦



✦ 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?

About the value of visual channel (visual value):

About the possible value range of visual value:

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']
    }
}

Example


✦ How to modity configurations of vsiual encoding? ✦

If you want to modify the configurations of visual encoding after chart been rendered (by invoke setOption to set the initial option), setOption can be used again to modify configurations of visual encoding. For instance:

chart.setOption({
    visualMap: {
        inRange: {color: ['red', 'blue']}
    }
});

Notice:

// 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.

visualMap.continuous.hoverLink

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.

visualMap.continuous.seriesIndex(number|Array.)

Specify visual mapping should be performed on which series, from which series.data is fetched.

All series are used by defualt.

visualMap.continuous.dimension

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.

visualMap.continuous.show

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.

visualMap.continuous.textGap

The distance between the ends of the main bar and the label, with unit px. See visualMap-continuous.text

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.

visualMap.continuous.align

Specify the position of handles and labels, against the main bar. The possible values are:

visualMap.continuous.itemHeight

The height of the main bar of visualMap component.

visualMap.continuous.itemWidth

The width of the main bar of visualMap component.

visualMap.continuous.precision

The decimal precision of label, defaults to be 0 (no decimals).

visualMap.continuous.inverse

Whether to inverse the layout of visualMap component.

As inverse is false, the layout direction is the same as catesian coordinate. That is:

As inverse is true, the result is opposite.

visualMap.continuous.realtime

Whether to update view in real time when dragging a handle.

visualMap.continuous.calculable

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.

visualMap.continuous.range

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

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].
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.

visualMap.continuous.max

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.

visualMap.continuous.min

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.

visualMap.continuous.type

Used to determine that it is a continuous visualMap component.

dataZoom

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:

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:

How to set filterMode is up to users, depending on the requirments and scenarios. Expirically:

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:

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?



Detailed configurations are listed as follows.

dataZoom.slider

dataZoomSlider

(Please refer to the introduction of dataZoom.)



dataZoom.slider.bottom

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.

dataZoom.slider.right

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.

dataZoom.slider.top

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.

dataZoom.slider.left

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.

dataZoom.slider.z

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.

dataZoom.slider.zlevel

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.

dataZoom.slider.throttle

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.

dataZoom.slider.zoomLock

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.

dataZoom.slider.orient

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:

dataZoom.slider.endValue

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.

dataZoom.slider.startValue

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.

dataZoom.slider.end

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.

dataZoom.slider.start

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.

dataZoom.slider.filterMode

Generally dataZoom component zoom or roam coordinate system through data filtering and set the windows of axes internally.

Its behaviours vary according to filtering mode settings (dataZoom.filterMode).

Possible values:

How to set filterMode is up to users, depending on the requirments and scenarios. Expirically:

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:

dataZoom.slider.angleAxisIndex

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
        }
    ]
}

dataZoom.slider.radiusAxisIndex

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
        }
    ]
}

dataZoom.slider.yAxisIndex

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
        }
    ]
}

dataZoom.slider.xAxisIndex

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.slider.textStyle.fontSize

dataZoom font size

dataZoom.slider.textStyle.fontFamily

dataZoom font family

dataZoom.slider.textStyle.fontWeight

dataZoom font thick weight

Options are:

dataZoom.slider.textStyle.fontStyle

dataZoom font style

Options are:

dataZoom.slider.textStyle.color

dataZoom text color.

dataZoom.slider.realtime

Whether to update view while dragging. If it is set as false, the view will be updated only at the end of dragging.

dataZoom.slider.showDataShadow

Whether to show data shadow in dataZoom-silder component, to indicate the data tendency in brief.

dataZoom.slider.showDetail

Whether to show detail, that is, show the detailed data information when dragging.

dataZoom.slider.labelFormatter

The formatter tool for the label.

/**
 * @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';
}

dataZoom.slider.labelPrecision

Precision of label if in number form. By default, it is decided based on the number of data.

dataZoom.slider.handleStyle

Style of handle. Please refer to area-simple example.

dataZoom.slider.handleStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

dataZoom.slider.handleStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

dataZoom.slider.handleStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

dataZoom.slider.handleStyle.shadowColor

Shadow color. Support same format as color.

dataZoom.slider.handleStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

dataZoom.slider.handleStyle.borderType

Border type, which can be 'solid', 'dashed', or 'dotted'. 'solid' by default.

dataZoom.slider.handleStyle.borderWidth

border width. No border when it is set to be 0.

dataZoom.slider.handleStyle.borderColor

border color, whose format is similar to that of color.

dataZoom.slider.handleStyle.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
)

dataZoom.slider.handleSize

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.

dataZoom.slider.handleIcon

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.

dataZoom.slider.borderColor

The color of border.

dataZoom.slider.fillerColor

The color to fill selected area.

dataZoom.slider.dataBackground

The style of data shadow.

dataZoom.slider.dataBackground.areaStyle

Area style of shadow

dataZoom.slider.dataBackground.areaStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

dataZoom.slider.dataBackground.areaStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

dataZoom.slider.dataBackground.areaStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

dataZoom.slider.dataBackground.areaStyle.shadowColor

Shadow color. Support same format as color.

dataZoom.slider.dataBackground.areaStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

dataZoom.slider.dataBackground.areaStyle.color

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
)

dataZoom.slider.dataBackground.lineStyle

Line style of shadow

dataZoom.slider.dataBackground.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

dataZoom.slider.dataBackground.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

dataZoom.slider.dataBackground.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

dataZoom.slider.dataBackground.lineStyle.shadowColor

Shadow color. Support same format as color.

dataZoom.slider.dataBackground.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

dataZoom.slider.dataBackground.lineStyle.type

line type.

Options are:

dataZoom.slider.dataBackground.lineStyle.width

line width.

dataZoom.slider.dataBackground.lineStyle.color

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
)

dataZoom.slider.backgroundColor

The background color of the component.

dataZoom.slider.show

Whether to show the component. If is set to be false, it will not show, but its data filtering function still works.

dataZoom.inside

dataZoomInside

Data zoom component of inside type.

Refer to dataZoom for more information.

The inside means it's inside the coordinates.



dataZoom.inside.throttle

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.

dataZoom.inside.zoomLock

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.

dataZoom.inside.orient

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:

dataZoom.inside.endValue

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.

dataZoom.inside.startValue

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.

dataZoom.inside.end

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.

dataZoom.inside.start

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.

dataZoom.inside.filterMode

Generally dataZoom component zoom or roam coordinate system through data filtering and set the windows of axes internally.

Its behaviours vary according to filtering mode settings (dataZoom.filterMode).

Possible values:

How to set filterMode is up to users, depending on the requirments and scenarios. Expirically:

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:

dataZoom.inside.angleAxisIndex

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
        }
    ]
}

dataZoom.inside.radiusAxisIndex

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
        }
    ]
}

dataZoom.inside.yAxisIndex

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
        }
    ]
}

dataZoom.inside.xAxisIndex

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
        }
    ]
}

dataZoom.inside.disabled

Whether disable inside zoom.

radar

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.

radar.indicator

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}
]

radar.splitArea

Split area of axis in grid area, not shown by default.

radar.splitArea.areaStyle

Split area style.

radar.splitArea.areaStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

radar.splitArea.areaStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

radar.splitArea.areaStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

radar.splitArea.areaStyle.shadowColor

Shadow color. Support same format as color.

radar.splitArea.areaStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

radar.splitArea.areaStyle.color

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.

radar.splitArea.show

Whether to show the splitArea.

radar.splitLine

SplitLine of axis in grid area.

radar.splitLine.show

Whether to show the splitLine. Value axes are shown by default, while category axes are not.

radar.splitLine.show.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

radar.splitLine.show.shadowOffsetY

Offset distance on the vertical direction of shadow.

radar.splitLine.show.shadowOffsetX

Offset distance on the horizontal direction of shadow.

radar.splitLine.show.shadowColor

Shadow color. Support same format as color.

radar.splitLine.show.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

radar.splitLine.show.type

splitLine line type.

Options are:

radar.splitLine.show.width

splitLine line width.

radar.splitLine.show.color

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']
    }
}

radar.axisLabel

Settings related to axis label.

radar.axisLabel.textStyle.fontSize

font size

radar.axisLabel.textStyle.fontFamily

font family

radar.axisLabel.textStyle.fontWeight

font thick weight

Options are:

radar.axisLabel.textStyle.fontStyle

font style

Options are:

radar.axisLabel.textStyle.color

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';
    }
}

radar.axisLabel.formatter

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('/');
}

radar.axisLabel.margin

The margin between the axis label and the axis line.

radar.axisLabel.rotate

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.

radar.axisLabel.inside

Specifies whether the axis label faces Inside. False by default.

radar.axisLabel.show

Whether to show the label of axis label or not.

radar.axisTick

Settings related to axis tick.

radar.axisTick.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

radar.axisTick.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

radar.axisTick.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

radar.axisTick.lineStyle.shadowColor

Shadow color. Support same format as color.

radar.axisTick.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

radar.axisTick.lineStyle.type

axisTick line type.

Options are:

radar.axisTick.lineStyle.width

axisTick line width.

radar.axisTick.lineStyle.color

Color of axis label is set to be axisLine.lineStyle.color by default.

radar.axisTick.length

The length of the axis tick.

radar.axisTick.inside

Specifies whether the axis label faces Inside. False by default.

radar.axisTick.alignWithLabel

Align axis tick with label, which is available only when boundaryGap is set to be true in category axis. See the following picture:

radar.axisTick.show

Whether to show the axis tick.

radar.axisLine

Settings related to axis line.

radar.axisLine.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

radar.axisLine.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

radar.axisLine.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

radar.axisLine.lineStyle.shadowColor

Shadow color. Support same format as color.

radar.axisLine.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

radar.axisLine.lineStyle.type

line style line type.

Options are:

radar.axisLine.lineStyle.width

line style line width.

radar.axisLine.lineStyle.color

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
)

radar.axisLine.show

Whether to show the axis line or not.

radar.triggerEvent

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: ''
}

radar.silent

True for axis that cannot be interacted with.

radar.scale

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.shape

Radar render type, in which 'polygon' and 'circle' are supported.

radar.splitNumber

Segments of indicator axis.

radar.nameGap

Distance between the indicator's name and axis.

radar.name

Name of radar chart.

radar.name.textStyle.fontSize

font size

radar.name.textStyle.fontFamily

font family

radar.name.textStyle.fontWeight

font thick weight

Options are:

radar.name.textStyle.fontStyle

font style

Options are:

radar.name.textStyle.color

text color.

radar.name.formatter

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 + '】';
}

radar.name.show

Whether to display the indicator's name.

radar.startAngle

The start angle of coordinate, which is the angle of the first indicator axis.

radar.radius

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.

radar.center

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%']

radar.z

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.

radar.zlevel

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.

angleAxis

The angle axis in Polar Coordinate.

angleAxis.z

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.

angleAxis.zlevel

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.

angleAxis.data

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']

angleAxis.splitArea

Split area of axis in grid area, not shown by default.

angleAxis.splitArea.areaStyle

Split area style.

angleAxis.splitArea.areaStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

angleAxis.splitArea.areaStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

angleAxis.splitArea.areaStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

angleAxis.splitArea.areaStyle.shadowColor

Shadow color. Support same format as color.

angleAxis.splitArea.areaStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

angleAxis.splitArea.areaStyle.color

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.

angleAxis.splitArea.show

Whether to show the splitArea.

angleAxis.splitLine

SplitLine of axis in grid area.

angleAxis.splitLine.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

angleAxis.splitLine.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

angleAxis.splitLine.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

angleAxis.splitLine.lineStyle.shadowColor

Shadow color. Support same format as color.

angleAxis.splitLine.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

angleAxis.splitLine.lineStyle.type

splitLine line type.

Options are:

angleAxis.splitLine.lineStyle.width

splitLine line width.

angleAxis.splitLine.lineStyle.color

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']
    }
}

angleAxis.splitLine.show

Whether to show the splitLine. Value axes are shown by default, while category axes are not.

angleAxis.axisLabel

Settings related to axis label.

angleAxis.axisLabel.textStyle.fontSize

font size

angleAxis.axisLabel.textStyle.fontFamily

font family

angleAxis.axisLabel.textStyle.fontWeight

font thick weight

Options are:

angleAxis.axisLabel.textStyle.fontStyle

font style

Options are:

angleAxis.axisLabel.textStyle.color

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';
    }
}

angleAxis.axisLabel.formatter

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('/');
}

angleAxis.axisLabel.margin

The margin between the axis label and the axis line.

angleAxis.axisLabel.inside

Specifies whether the axis label faces Inside. False by default.

angleAxis.axisLabel.show

Whether to show the label of axis label or not.

angleAxis.axisTick

Settings related to axis tick.

angleAxis.axisTick.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

angleAxis.axisTick.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

angleAxis.axisTick.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

angleAxis.axisTick.lineStyle.shadowColor

Shadow color. Support same format as color.

angleAxis.axisTick.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

angleAxis.axisTick.lineStyle.type

axisTick line type.

Options are:

angleAxis.axisTick.lineStyle.width

axisTick line width.

angleAxis.axisTick.lineStyle.color

Color of axis label is set to be axisLine.lineStyle.color by default.

angleAxis.axisTick.length

The length of the axis tick.

angleAxis.axisTick.inside

Specifies whether the axis label faces Inside. False by default.

angleAxis.axisTick.alignWithLabel

Align axis tick with label, which is available only when boundaryGap is set to be true in category axis. See the following picture:

angleAxis.axisTick.show

Whether to show the axis tick.

angleAxis.axisLine

Settings related to axis line.

angleAxis.axisLine.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

angleAxis.axisLine.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

angleAxis.axisLine.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

angleAxis.axisLine.lineStyle.shadowColor

Shadow color. Support same format as color.

angleAxis.axisLine.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

angleAxis.axisLine.lineStyle.type

line style line type.

Options are:

angleAxis.axisLine.lineStyle.width

line style line width.

angleAxis.axisLine.lineStyle.color

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
)

angleAxis.axisLine.show

Whether to show the axis line or not.

angleAxis.triggerEvent

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: ''
}

angleAxis.silent

True for axis that cannot be interacted with.

angleAxis.logBase

Base of logarithm, which is valid only for numeric axes with type: 'log'.

angleAxis.interval

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.

angleAxis.minInterval

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'.

angleAxis.splitNumber

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.

angleAxis.scale

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.

angleAxis.max

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.

angleAxis.min

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.

angleAxis.boundaryGap

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%']

angleAxis.type

Type of axis

Option:

angleAxis.clockwise

Whether the positive position of axis is in clockwise. True for clockwise by default.

The following shows an example with clockwise as false.

angleAxis.startAngle

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.

angleAxis.polarIndex

The index of angle axis in Polar Coordinate. The first axis is used by default.

radiusAxis

Radial axis of polar coordinate.

radiusAxis.z

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.

radiusAxis.zlevel

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.

radiusAxis.data

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']

radiusAxis.splitArea

Split area of axis in grid area, not shown by default.

radiusAxis.splitArea.areaStyle

Split area style.

radiusAxis.splitArea.areaStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

radiusAxis.splitArea.areaStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

radiusAxis.splitArea.areaStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

radiusAxis.splitArea.areaStyle.shadowColor

Shadow color. Support same format as color.

radiusAxis.splitArea.areaStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

radiusAxis.splitArea.areaStyle.color

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.

radiusAxis.splitArea.show

Whether to show the splitArea.

radiusAxis.splitLine

SplitLine of axis in grid area.

radiusAxis.splitLine.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

radiusAxis.splitLine.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

radiusAxis.splitLine.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

radiusAxis.splitLine.lineStyle.shadowColor

Shadow color. Support same format as color.

radiusAxis.splitLine.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

radiusAxis.splitLine.lineStyle.type

splitLine line type.

Options are:

radiusAxis.splitLine.lineStyle.width

splitLine line width.

radiusAxis.splitLine.lineStyle.color

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']
    }
}

radiusAxis.splitLine.show

Whether to show the splitLine. Value axes are shown by default, while category axes are not.

radiusAxis.axisLabel

Settings related to axis label.

radiusAxis.axisLabel.textStyle.fontSize

font size

radiusAxis.axisLabel.textStyle.fontFamily

font family

radiusAxis.axisLabel.textStyle.fontWeight

font thick weight

Options are:

radiusAxis.axisLabel.textStyle.fontStyle

font style

Options are:

radiusAxis.axisLabel.textStyle.color

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';
    }
}

radiusAxis.axisLabel.formatter

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('/');
}

radiusAxis.axisLabel.margin

The margin between the axis label and the axis line.

radiusAxis.axisLabel.rotate

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.

radiusAxis.axisLabel.inside

Specifies whether the axis label faces Inside. False by default.

radiusAxis.axisLabel.show

Whether to show the label of axis label or not.

radiusAxis.axisTick

Settings related to axis tick.

radiusAxis.axisTick.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

radiusAxis.axisTick.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

radiusAxis.axisTick.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

radiusAxis.axisTick.lineStyle.shadowColor

Shadow color. Support same format as color.

radiusAxis.axisTick.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

radiusAxis.axisTick.lineStyle.type

axisTick line type.

Options are:

radiusAxis.axisTick.lineStyle.width

axisTick line width.

radiusAxis.axisTick.lineStyle.color

Color of axis label is set to be axisLine.lineStyle.color by default.

radiusAxis.axisTick.length

The length of the axis tick.

radiusAxis.axisTick.inside

Specifies whether the axis label faces Inside. False by default.

radiusAxis.axisTick.alignWithLabel

Align axis tick with label, which is available only when boundaryGap is set to be true in category axis. See the following picture:

radiusAxis.axisTick.show

Whether to show the axis tick.

radiusAxis.axisLine

Settings related to axis line.

radiusAxis.axisLine.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

radiusAxis.axisLine.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

radiusAxis.axisLine.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

radiusAxis.axisLine.lineStyle.shadowColor

Shadow color. Support same format as color.

radiusAxis.axisLine.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

radiusAxis.axisLine.lineStyle.type

line style line type.

Options are:

radiusAxis.axisLine.lineStyle.width

line style line width.

radiusAxis.axisLine.lineStyle.color

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
)

radiusAxis.axisLine.show

Whether to show the axis line or not.

radiusAxis.triggerEvent

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: ''
}

radiusAxis.silent

True for axis that cannot be interacted with.

radiusAxis.logBase

Base of logarithm, which is valid only for numeric axes with type: 'log'.

radiusAxis.interval

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.

radiusAxis.minInterval

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'.

radiusAxis.splitNumber

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.

radiusAxis.scale

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.

radiusAxis.max

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.

radiusAxis.min

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.

radiusAxis.boundaryGap

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%']

radiusAxis.inverse

Whether axis is inversed. New option from ECharts 3.

radiusAxis.nameRotate

Rotation of axis name.

radiusAxis.nameGap

Gap between axis name and axis line.

radiusAxis.nameTextStyle

Text style of axis name.

radiusAxis.nameTextStyle.fontSize

axis name font size

radiusAxis.nameTextStyle.fontFamily

axis name font family

radiusAxis.nameTextStyle.fontWeight

axis name font thick weight

Options are:

radiusAxis.nameTextStyle.fontStyle

axis name font style

Options are:

radiusAxis.nameTextStyle.color

Color of axis name uses axisLine.lineStyle.color by default.

radiusAxis.nameLocation

Location of axis name.

Options:

radiusAxis.name

Name of axis.

radiusAxis.type

Type of axis

Option:

radiusAxis.polarIndex

Index of radial axis in polor coordinate. It's the first axis by default.

polar

Polar coordinate can be used in scatter and line chart. Every polar coordinate has an angleAxis and a radiusAxis.

For example:

polar.radius

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.

polar.center

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%']

polar.z

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.

polar.zlevel

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.

yAxis

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.

yAxis.z

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.

yAxis.zlevel

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.

yAxis.data

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']

yAxis.splitArea

Split area of axis in grid area, not shown by default.

yAxis.splitArea.areaStyle

Split area style.

yAxis.splitArea.areaStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

yAxis.splitArea.areaStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

yAxis.splitArea.areaStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

yAxis.splitArea.areaStyle.shadowColor

Shadow color. Support same format as color.

yAxis.splitArea.areaStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

yAxis.splitArea.areaStyle.color

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.

yAxis.splitArea.show

Whether to show the splitArea.

yAxis.splitLine

SplitLine of axis in grid area.

yAxis.splitLine.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

yAxis.splitLine.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

yAxis.splitLine.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

yAxis.splitLine.lineStyle.shadowColor

Shadow color. Support same format as color.

yAxis.splitLine.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

yAxis.splitLine.lineStyle.type

splitLine line type.

Options are:

yAxis.splitLine.lineStyle.width

splitLine line width.

yAxis.splitLine.lineStyle.color

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']
    }
}

yAxis.splitLine.show

Whether to show the splitLine. Value axes are shown by default, while category axes are not.

yAxis.axisLabel

Settings related to axis label.

yAxis.axisLabel.textStyle.fontSize

font size

yAxis.axisLabel.textStyle.fontFamily

font family

yAxis.axisLabel.textStyle.fontWeight

font thick weight

Options are:

yAxis.axisLabel.textStyle.fontStyle

font style

Options are:

yAxis.axisLabel.textStyle.color

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';
    }
}

yAxis.axisLabel.formatter

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('/');
}

yAxis.axisLabel.margin

The margin between the axis label and the axis line.

yAxis.axisLabel.rotate

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.

yAxis.axisLabel.inside

Specifies whether the axis label faces Inside. False by default.

yAxis.axisLabel.show

Whether to show the label of axis label or not.

yAxis.axisTick

Settings related to axis tick.

yAxis.axisTick.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

yAxis.axisTick.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

yAxis.axisTick.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

yAxis.axisTick.lineStyle.shadowColor

Shadow color. Support same format as color.

yAxis.axisTick.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

yAxis.axisTick.lineStyle.type

axisTick line type.

Options are:

yAxis.axisTick.lineStyle.width

axisTick line width.

yAxis.axisTick.lineStyle.color

Color of axis label is set to be axisLine.lineStyle.color by default.

yAxis.axisTick.length

The length of the axis tick.

yAxis.axisTick.inside

Specifies whether the axis label faces Inside. False by default.

yAxis.axisTick.alignWithLabel

Align axis tick with label, which is available only when boundaryGap is set to be true in category axis. See the following picture:

yAxis.axisTick.show

Whether to show the axis tick.

yAxis.axisLine

Settings related to axis line.

yAxis.axisLine.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

yAxis.axisLine.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

yAxis.axisLine.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

yAxis.axisLine.lineStyle.shadowColor

Shadow color. Support same format as color.

yAxis.axisLine.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

yAxis.axisLine.lineStyle.type

line style line type.

Options are:

yAxis.axisLine.lineStyle.width

line style line width.

yAxis.axisLine.lineStyle.color

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
)

yAxis.axisLine.onZero

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.

yAxis.axisLine.show

Whether to show the axis line or not.

yAxis.triggerEvent

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: ''
}

yAxis.silent

True for axis that cannot be interacted with.

yAxis.logBase

Base of logarithm, which is valid only for numeric axes with type: 'log'.

yAxis.interval

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.

yAxis.minInterval

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'.

yAxis.splitNumber

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.

yAxis.scale

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.

yAxis.max

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.

yAxis.min

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.

yAxis.boundaryGap

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%']

yAxis.inverse

Whether axis is inversed. New option from ECharts 3.

yAxis.nameRotate

Rotation of axis name.

yAxis.nameGap

Gap between axis name and axis line.

yAxis.nameTextStyle

Text style of axis name.

yAxis.nameTextStyle.fontSize

axis name font size

yAxis.nameTextStyle.fontFamily

axis name font family

yAxis.nameTextStyle.fontWeight

axis name font thick weight

Options are:

yAxis.nameTextStyle.fontStyle

axis name font style

Options are:

yAxis.nameTextStyle.color

Color of axis name uses axisLine.lineStyle.color by default.

yAxis.nameLocation

Location of axis name.

Options:

yAxis.name

Name of axis.

yAxis.type

Type of axis

Option:

yAxis.offset

Offset of y axis relative to default position. Useful when multiple y axis has same position value.

yAxis.position

the position of y axis.

options:

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.

yAxis.gridIndex

The index of grid which the y axis belongs to. Defaults to be in the first grid.

xAxis

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.

xAxis.z

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.

xAxis.zlevel

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.

xAxis.data

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']

xAxis.splitArea

Split area of axis in grid area, not shown by default.

xAxis.splitArea.areaStyle

Split area style.

xAxis.splitArea.areaStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

xAxis.splitArea.areaStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

xAxis.splitArea.areaStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

xAxis.splitArea.areaStyle.shadowColor

Shadow color. Support same format as color.

xAxis.splitArea.areaStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

xAxis.splitArea.areaStyle.color

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.

xAxis.splitArea.show

Whether to show the splitArea.

xAxis.splitLine

SplitLine of axis in grid area.

xAxis.splitLine.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

xAxis.splitLine.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

xAxis.splitLine.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

xAxis.splitLine.lineStyle.shadowColor

Shadow color. Support same format as color.

xAxis.splitLine.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

xAxis.splitLine.lineStyle.type

splitLine line type.

Options are:

xAxis.splitLine.lineStyle.width

splitLine line width.

xAxis.splitLine.lineStyle.color

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']
    }
}

xAxis.splitLine.show

Whether to show the splitLine. Value axes are shown by default, while category axes are not.

xAxis.axisLabel

Settings related to axis label.

xAxis.axisLabel.textStyle.fontSize

font size

xAxis.axisLabel.textStyle.fontFamily

font family

xAxis.axisLabel.textStyle.fontWeight

font thick weight

Options are:

xAxis.axisLabel.textStyle.fontStyle

font style

Options are:

xAxis.axisLabel.textStyle.color

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';
    }
}

xAxis.axisLabel.formatter

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('/');
}

xAxis.axisLabel.margin

The margin between the axis label and the axis line.

xAxis.axisLabel.rotate

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.

xAxis.axisLabel.inside

Specifies whether the axis label faces Inside. False by default.

xAxis.axisLabel.show

Whether to show the label of axis label or not.

xAxis.axisTick

Settings related to axis tick.

xAxis.axisTick.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

xAxis.axisTick.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

xAxis.axisTick.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

xAxis.axisTick.lineStyle.shadowColor

Shadow color. Support same format as color.

xAxis.axisTick.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

xAxis.axisTick.lineStyle.type

axisTick line type.

Options are:

xAxis.axisTick.lineStyle.width

axisTick line width.

xAxis.axisTick.lineStyle.color

Color of axis label is set to be axisLine.lineStyle.color by default.

xAxis.axisTick.length

The length of the axis tick.

xAxis.axisTick.inside

Specifies whether the axis label faces Inside. False by default.

xAxis.axisTick.alignWithLabel

Align axis tick with label, which is available only when boundaryGap is set to be true in category axis. See the following picture:

xAxis.axisTick.show

Whether to show the axis tick.

xAxis.axisLine

Settings related to axis line.

xAxis.axisLine.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

xAxis.axisLine.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

xAxis.axisLine.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

xAxis.axisLine.lineStyle.shadowColor

Shadow color. Support same format as color.

xAxis.axisLine.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

xAxis.axisLine.lineStyle.type

line style line type.

Options are:

xAxis.axisLine.lineStyle.width

line style line width.

xAxis.axisLine.lineStyle.color

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
)

xAxis.axisLine.onZero

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.

xAxis.axisLine.show

Whether to show the axis line or not.

xAxis.triggerEvent

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: ''
}

xAxis.silent

True for axis that cannot be interacted with.

xAxis.logBase

Base of logarithm, which is valid only for numeric axes with type: 'log'.

xAxis.interval

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.

xAxis.minInterval

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'.

xAxis.splitNumber

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.

xAxis.scale

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.

xAxis.max

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.

xAxis.min

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.

xAxis.boundaryGap

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%']

xAxis.inverse

Whether axis is inversed. New option from ECharts 3.

xAxis.nameRotate

Rotation of axis name.

xAxis.nameGap

Gap between axis name and axis line.

xAxis.nameTextStyle

Text style of axis name.

xAxis.nameTextStyle.fontSize

axis name font size

xAxis.nameTextStyle.fontFamily

axis name font family

xAxis.nameTextStyle.fontWeight

axis name font thick weight

Options are:

xAxis.nameTextStyle.fontStyle

axis name font style

Options are:

xAxis.nameTextStyle.color

Color of axis name uses axisLine.lineStyle.color by default.

xAxis.nameLocation

Location of axis name.

Options:

xAxis.name

Name of axis.

xAxis.type

Type of axis

Option:

xAxis.offset

Offset of x axis relative to default position. Useful when multiple x axis has same position value.

xAxis.position

The position of x axis.

options:

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.

xAxis.gridIndex

The index of grid which the x axis belongs to. Defaults to be in the first grid.

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:

grid.shadowOffsetY

Offset distance on the vertical direction of shadow.

Attention: This property works only if show: true configured.

grid.shadowOffsetX

Offset distance on the horizontal direction of shadow.

Attention: This property works only if show: true configured.

grid.shadowColor

Shadow color. Support same format as color.

Attention: This property works only if show: true configured.

grid.shadowBlur

Size of shadow blur. This attribute 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.

grid.borderWidth

Border width of grid.

Attention: Works only if show: true is set.

grid.borderColor

Border color of grid. Support the same color format as backgroundColor.

Attention: Works only if show: true is set.

grid.backgroundColor

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.

grid.containLabel

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.

grid.height

Height of grid component. Adaptive by default.

grid.width

Width of grid component. Adaptive by default.

grid.bottom

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%'.

grid.right

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%'.

grid.top

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.

grid.left

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.

grid.z

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.

grid.zlevel

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.

grid.show

Whether to show the grid in rectangular coordinate.

tooltip

Tooltip component.

tooltip.axisPointer

Configuration item for axis indicator, which is valid when trigger is 'axis'.

tooltip.axisPointer.shadowStyle

It is valid when axisPointer.type is 'shadow'.

tooltip.axisPointer.shadowStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

tooltip.axisPointer.shadowStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

tooltip.axisPointer.shadowStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

tooltip.axisPointer.shadowStyle.shadowColor

Shadow color. Support same format as color.

tooltip.axisPointer.shadowStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

tooltip.axisPointer.shadowStyle.color

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
)

tooltip.axisPointer.crossStyle

It is valid when axisPointer.type is 'cross'.

tooltip.axisPointer.crossStyle.textStyle

The text style of crosshair.

tooltip.axisPointer.crossStyle.textStyle.fontSize

font size

tooltip.axisPointer.crossStyle.textStyle.fontFamily

font family

tooltip.axisPointer.crossStyle.textStyle.fontWeight

font thick weight

Options are:

tooltip.axisPointer.crossStyle.textStyle.fontStyle

font style

Options are:

tooltip.axisPointer.crossStyle.textStyle.color

text color.

tooltip.axisPointer.crossStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

tooltip.axisPointer.crossStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

tooltip.axisPointer.crossStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

tooltip.axisPointer.crossStyle.shadowColor

Shadow color. Support same format as color.

tooltip.axisPointer.crossStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

tooltip.axisPointer.crossStyle.type

line type.

Options are:

tooltip.axisPointer.crossStyle.width

line width.

tooltip.axisPointer.crossStyle.color

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
)

tooltip.axisPointer.lineStyle

It is valid when axisPointer.type is 'line'.

tooltip.axisPointer.lineStyle.opacity

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

tooltip.axisPointer.lineStyle.shadowOffsetY

Offset distance on the vertical direction of shadow.

tooltip.axisPointer.lineStyle.shadowOffsetX

Offset distance on the horizontal direction of shadow.

tooltip.axisPointer.lineStyle.shadowColor

Shadow color. Support same format as color.

tooltip.axisPointer.lineStyle.shadowBlur

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

For example:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

tooltip.axisPointer.lineStyle.type

line type.

Options are:

tooltip.axisPointer.lineStyle.width

line width.

tooltip.axisPointer.lineStyle.color

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
)

tooltip.axisPointer.animationDelayUpdate

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.

tooltip.axisPointer.animationEasingUpdate

Easing method used for animation.

tooltip.axisPointer.animationDurationUpdate

Time for animation to complete.

tooltip.axisPointer.animationDelay

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.

tooltip.axisPointer.animationEasing

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

tooltip.axisPointer.animationDuration

Duration of the first animation.

tooltip.axisPointer.animationThreshold

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

tooltip.axisPointer.animation

Whether to enable animation.

tooltip.axisPointer.axis

The coordinate axis, which could be 'x', 'y', 'radius', or 'angle'. By default, category axis or time axis is used.

tooltip.axisPointer.type

Indicator type.

Options:

tooltip.extraCssText

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);'

tooltip.textStyle

The text syle of tooltip's floating layer.

tooltip.textStyle.fontSize

font size

tooltip.textStyle.fontFamily

font family

tooltip.textStyle.fontWeight

font thick weight

Options are:

tooltip.textStyle.fontStyle

font style

Options are:

tooltip.textStyle.color

text color.

tooltip.padding

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
]

tooltip.borderWidth

The border width of tooltip's floating layer.

tooltip.borderColor

The border color of tooltip's floating layer.

tooltip.backgroundColor

The background color of tooltip's floating layer.

tooltip.formatter

The content formatter of tooltip's floating layer which supports string template and callback function.

  1. 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}'
      
  2. 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';
     }
    

tooltip.transitionDuration

The transition duration of tooltip's animation, in seconds. When it is set to be 0, it would move closely with the mouse.

tooltip.confine

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.

tooltip.position

The position of the tooltip's floating layer, which would follow the position of mouse by default.

Options:

tooltip.enterable

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.

tooltip.hideDelay

Delay time for hiding tooltip, in ms. It will be invalid when alwaysShowContent is true.

tooltip.showDelay

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'.

tooltip.alwaysShowContent

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.

tooltip.triggerOn

Conditions to trigger tooltip. Options:

This attribute is new to ECharts 3.0.

tooltip.trigger

Type of triggering.

Options:

tooltip.showContent

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.

tooltip.show

Whether to show the tooltip component, including tooltip floating layer and axisPointer.

legend

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.textStyle

Legend text style.

legend.textStyle.fontSize

font size

legend.textStyle.fontFamily

font family

legend.textStyle.fontWeight

font thick weight

Options are:

legend.textStyle.fontStyle

font style

Options are:

legend.textStyle.color

text color.

legend.selected

State table of selected legend.

example:

selected: {
    // selected'series 1'
    'series 1': true,
    // unselected'series 2'
    'series 2': false
}

legend.inactiveColor

Legend color when not selected.

legend.selectedMode

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.

legend.formatter

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;
}

legend.itemHeight

Image height of legend symbol.

legend.itemWidth

Image width of legend symbol.

legend.itemGap

The distance between each legend, horizontal distance in horizontal layout, and vertical distance in vertical layout.

legend.padding

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.align

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:

legend.orient

The layout orientation of legend.

Options:

legend.height

Height of legend component. Adaptive by default.

legend.width

Width of legend component. Adaptive by default.

legend.bottom

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.

legend.right

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.

legend.top

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.

legend.left

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.

legend.z

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.

legend.zlevel

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

Title component, including main title and subtitle.

In ECharts 2.x, a single instance of ECharts could contains one title component at most. However, in ECharts 3, there could be one or more than one title components. It is more useful when multiple diagrams in one instance all need titles.

Here are some instances of different animation easing functions, among which every instance has a title component:

title.shadowOffsetY

Offset distance on the vertical direction of shadow.

Attention: This property works only if show: true configured.

title.shadowOffsetX

Offset distance on the horizontal direction of shadow.

Attention: This property works only if show: true configured.

title.shadowColor

Shadow color. Support same format as color.

Attention: This property works only if show: true configured.

title.shadowBlur

Size of shadow blur. This attribute 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.

title.borderWidth

Border width of title.

title.borderColor

Border color of title. Support the same color format as backgroundColor.

title.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'.

title.bottom

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.

title.right

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.

title.top

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.

title.left

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.

title.z

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.

title.zlevel

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.itemGap

The gap between the main title and subtitle.

title.padding

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
]

title.subtextStyle.fontSize

subtitle font size

title.subtextStyle.fontFamily

subtitle font family

title.subtextStyle.fontWeight

subtitle font thick weight

Options are:

title.subtextStyle.fontStyle

subtitle font style

Options are:

title.subtextStyle.color

subtitle text color.

title.subtarget

Open the hyper link of subtitle in specified tab, options:

title.sublink

The hyper link of subtitle text.

title.subtext

Subtitle text, supporting for \n for newlines.

title.textBaseline

Setting the title text align vertically, supporting 'top','middle','bottom', the default value is based on the title position.

title.textAlign

Setting the title text align horizontally, supporting 'left','center','right', the default value is based on the title position.

title.textStyle.fontSize

main title font size

title.textStyle.fontFamily

main title font family

title.textStyle.fontWeight

main title font thick weight

Options are:

title.textStyle.fontStyle

main title font style

Options are:

title.textStyle.color

main title text color.

title.target

Open the hyper link of main title in specified tab.

options:

title.link

The hyper link of main title text.

title.text

The main title text, supporting for \n for newlines.

title.show

It specifies whether to show the title component.