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.