ECharts Document

events

Event-handling functions are mainly added through on in ECharts. This document describes all event list in ECharts.

Event in ECharts can be divided in two kinds. One is mouse event, which is triggered when mouse clicks on certain component, the other is triggered after dispatches dispatchAction.

events.axisareaselected

Selecting event of range of parallel axis.

When selecting axis range, the following method can be used to get data indices of currently highlight lines, which is the list of indices in data of series.

chart.on('axisareaselected', function () {
    var series1 = chart.getModel().getSeries()[0];
    var series2 = chart.getModel().getSeries()[0];
    var indices1 = series1.getRawIndicesByActiveState('active');
    var indices2 = series2.getRawIndicesByActiveState('active');
    console.log(indices1);
    console.log(indices2);
});

events.mapunselected

ACTION: mapUnSelect

map region cancels selected event.

Use dispatchAction will trigger this event, but user clicking won't trigger it. (For user clicking event, please refer to mapselectchanged).

{
    type: 'mapunselected',
    // series ID, can incoming in option
    seriesId: string
    // data name
    name: name,
    // table of all legend selecting states
    selected: Object
}

events.mapselected

ACTION: mapSelect

map regionEvent after selecting.

Use dispatchAction can trigger this event, but user clicking this event won't trigger this (User clicking event please use mapselectchanged).

{
    type: 'mapselected',
    // series ID, can incoming in option
    seriesId: string
    // data name
    name: name,
    // table of all legend selecting states
    selected: Object
}

Attention: Event triggered by user switching legend in ECharts 2.x is changed from mapselected to mapselectchanged.

events.mapselectchanged

ACTION: mapToggleSelect

Event emitted after map region selecting state changes.

It will be triggered when user clicks to select.

{
    type: 'mapselectchanged',
    // series ID, can be passed in option
    seriesId: string
    // data name
    name: name,
    // table of all selected data.
    selected: Object
}

Attention: This event is the same as event mapSelected in ECharts 2.

events.pieunselected

ACTION: pieUnSelect

pie chart cancels selected event.

Use dispatchAction will trigger this event, but user clicking won't trigger it. (For user clicking event, please refer to pieselectchanged).

{
    type: 'pieunselected',
    // series ID, can incoming in option
    seriesId: string
    // data name
    name: name,
    // table of all legend selecting states
    selected: Object
}

events.pieselected

ACTION: pieSelect

pie chartEvent after selecting.

Use dispatchAction can trigger this event, but user clicking this event won't trigger this (User clicking event please use pieselectchanged).

{
    type: 'pieselected',
    // series ID, can incoming in option
    seriesId: string
    // data name
    name: name,
    // table of all legend selecting states
    selected: Object
}

Attention: Event triggered by user switching legend in ECharts 2.x is changed from pieselected to pieselectchanged.

events.pieselectchanged

ACTION: pieToggleSelect

Event emitted after pie chart selecting state changes.

It will be triggered when user clicks to select.

{
    type: 'pieselectchanged',
    // series ID, can be passed in option
    seriesId: string
    // data name
    name: name,
    // table of all selected data.
    selected: Object
}

Attention: This event is the same as event pieSelected in ECharts 2.

events.magictypechanged

Switching event of magic type tool in toolbox.

{
    type: 'magictypechanged',
    // click to change current type; same as type attribute in echarts 2.x
    currentType: string
}

events.dataviewchanged

Changing event of data view tool in toolbox.

{
    type: 'dataviewchanged'
}

events.restore

ACTION: restore Resets option event.

{
    type: 'restore'
}

events.timelineplaychanged

ACTION: timelinePlayChange Switching event of play state in timeline.

{
    type: 'timelineplaychanged',
    // play state, true for auto play
    playState: boolean
}

events.timelinechanged

ACTION: timelineChange Event emitted after time point in timeline is changed.

{
    type: 'timelinechanged',
    // index of time point
    currentIndex: number
}

events.datarangeselected

ACTION: selectDataRange Event emitted after range is changed in visualMap.

{
    type: 'datarangeselected',
    // continuous visualMap is different from discrete one
    // continuous visualMap is an array representing range of data values.
    // discrete visualMap is an object, whose key is category or piece index; value is `true` or `false`
    selected: Object|Array
}

events.datazoom

ACTION: dataZoom

Event emitted after zooming data area.

{
    type: 'datazoom',
    // percentage of zoom start position, 0 - 100
    start: number
    // percentage of zoom finish position, 0 - 100
    end: number
    // data value of zoom start position; only exists in zoom event of triggered by toolbar
    startValue?: number
    // data value of zoom finish position; only exists in zoom event of triggered by toolbar
    endValue?: number
}

events.legendunselected

ACTION: legendUnSelect Event emitted after unselecting legend.

{
    type: 'legendunselected',
    // name of unselected legend
    name: string
    // table of all legend selecting states
    selected: Object
}

events.legendselected

ACTION: legendSelect Event emitted after legend is selected.

{
    type: 'legendselected',
    // name of selected legend
    name: string
    // table of all legend selecting states
    selected: Object
}

Attention: In ECharts 2.x, event related to user switching lengend is now changed from legendselected to legendselectchanged.

events.legendselectchanged

ACTION: legendToggleSelect Event emitted after legend selecting state changes.

Attention: This event will be emitted when users toggle legend button in legend component.

{
    type: 'legendselectchanged',
    // change legend name
    name: string
    // table of all legend selecting states
    selected: Object
}

events.Mouse events

Event parameters of mouse events are attributes of event object. The following shows basic parameters for chart click events. Other charts, like pie charts, may have additional parameters like percent. Please refer to callback params of each chart's label formatter.

{
    // type of the component to which the clicked glyph belongs
    // i.e., 'series', 'markLine', 'markPoint', 'timeLine'
    componentType: string,
    // series type (make sense when componentType is 'series')
    // i.e., 'line', 'bar', 'pie'
    seriesType: string,
    // series index in incoming option.series (make sense when componentType is 'series')
    seriesIndex: number,
    // series name (make sense when componentType is 'series')
    seriesName: string,
    // data name, category name
    name: string,
    // data index in incoming data array
    dataIndex: number,
    // incoming rwa data item
    data: Object,
    // Some series, such as sankey or graph, maintains more than
    // one types of data (nodeData and edgeData), which can be
    // distinguished from each other by dataType with its value
    // 'node' and 'edge'.
    // On the other hand, most series has only one type of data,
    // where dataType is not needed.
    dataType: string,
    // incoming data value
    value: number|Array
    // color of component (make sense when componentType is 'series')
    color: string
}

Mouse events contain 'click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mouseout', 'globalout', 'contextmenu'.

See Events and actions in ECharts

action

Chart actions supported by ECharts are triggered through dispatchAction.

Attention: The ?: note in the code shows that this attribute is optional. EVENT: stands for the event that triggers action.

action.map

Actions related to map, which should include map before use.

action.map.mapToggleSelect

Toggles selecting status of specified map area.

dispatchAction({
    type: 'mapToggleSelect',
    // optional; series index; could be an array of multiple series
    seriesIndex?: number|Array,
    // optional; series name; could be an array of multiple series
    seriesName?: string|Array,
    // data index; could assign by name attribute when not defined
    dataIndex?: number,
    // optional; data name; ignored when dataIndex is defined
    name?: string
})

EVENT: mapselectchanged

action.map.mapUnSelect

Cancels selecting specified map area.

dispatchAction({
    type: 'mapUnSelect',
    // optional; series index; could be an array of multiple series
    seriesIndex?: number|Array,
    // optional; series name; could be an array of multiple series
    seriesName?: string|Array,
    // data index; could assign by name attribute when not defined
    dataIndex?: number,
    // optional; data name; ignored when dataIndex is defined
    name?: string
})

EVENT: mapunselected

action.map.mapSelect

Selects the specified map area.

dispatchAction({
    type: 'mapSelect',
    // optional; series index; could be an array of multiple series
    seriesIndex?: number|Array,
    // optional; series name; could be an array of multiple series
    seriesName?: string|Array,
    // data index; could assign by name attribute when not defined
    dataIndex?: number,
    // optional; data name; ignored when dataIndex is defined
    name?: string
})

EVENT: mapselected

action.pie

Actions related to pie chart, which should include pie chart before use.

action.pie.pieToggleSelect

Toggles selecting status of specified pie chart.

dispatchAction({
    type: 'pieToggleSelect',
    // optional; series index; could be an array of multiple series
    seriesIndex?: number|Array,
    // optional; series name; could be an array of multiple series
    seriesName?: string|Array,
    // data index; could assign by name attribute when not defined
    dataIndex?: number,
    // optional; data name; ignored when dataIndex is defined
    name?: string
})

EVENT: pieselectchanged

action.pie.pieUnSelect

Cancels selecting specified pie chart.

dispatchAction({
    type: 'pieUnSelect',
    // optional; series index; could be an array of multiple series
    seriesIndex?: number|Array,
    // optional; series name; could be an array of multiple series
    seriesName?: string|Array,
    // data index; could assign by name attribute when not defined
    dataIndex?: number,
    // optional; data name; ignored when dataIndex is defined
    name?: string
})

EVENT: pieunselected

action.pie.pieSelect

Selects the specified pie chart.

dispatchAction({
    type: 'pieSelect',
    // optional; series index; could be an array of multiple series
    seriesIndex?: number|Array,
    // optional; series name; could be an array of multiple series
    seriesName?: string|Array,
    // data index; could assign by name attribute when not defined
    dataIndex?: number,
    // optional; data name; ignored when dataIndex is defined
    name?: string
})

EVENT: pieselected

action.toolbox

Actions related to toolbox component, which should include toolbox component before use.

action.toolbox.restore

Resets option.

dispatchAction({
    type: 'restore'
})

EVENT: restore

action.timeline

Actions related to timeline component, which should include timeline component before use.

action.timeline.timelinePlayChange

Toggles playing status of timeline.

dispatchAction({
    type: 'timelinePlayChange',
    // laying status; true for auto-play
    playState: boolean
})

EVENT: timelineplaychanged

action.timeline.timelineChange

Sets the current time point.

dispatchAction({
    type: 'timelineChange',
    // index of time point
    currentIndex: number
})

EVENT: timelinechanged

action.visualMap

Actions related to visual mapping component, which should include visual mapping component before use.

action.visualMap.selectDataRange

Selects data range of visual mapping.

dispatchAction({
    type: 'selectDataRange',
    // optional; index of visualMap component; useful for are multiple visualMap components; 0 by default
    visualMapIndex: number,
    // continuous visualMap is different from discrete one
    // continuous visualMap is an array representing range of data values.
    // discrete visualMap is an object, whose key is category or piece index; value is `true` or `false`
    selected: Object|Array
})

? For example: 

myChart.dispatchAction({
    type: 'selectDataRange',
    // select a value range between 20 and 40
    selected: [20, 40],
    // cancel selecting the second range
    selected: { 1: false },
    // cancel selecting `excellent` category
    selected: { 'excellent': false }
});

EVENT: datarangeselected

action.dataZoom

Actions related to data region zoom component, which should include data region zoom component before use.

action.dataZoom.dataZoom

Zoom data region.

dispatchAction({
    type: 'dataZoom',
    // optional; index of dataZoom component; useful for are multiple dataZoom components; 0 by default
    dataZoomIndex: number,
    // percentage of starting position; 0 - 100
    start: number,
    // percentage of ending position; 0 - 100
    end: number,
    // data value at starting location
    startValue: number,
    // data value at ending location
    endValue: number
})

EVENT: datazoom

action.tooltip

Actions related to tooltip component, which should include tooltip component before use.

action.tooltip.hideTip

Hides tooltip.

dispatchAction({
    type: 'hideTip'
})

action.tooltip.showTip

Shows tooltip.

There are two usages as followed.

1 Display tooltip at certain position relative to container. If it cannot be displayed at the specified location, then it is invalid.

dispatchAction({
    type: 'showTip',
    // x coordinate on screen
    x: number,
    // y coordinate on screen
    y: number,
    // Position of tooltip. Only works in this action.
    // Use tooltip.position in option by default.
    position: Array.<number>|string|Function
})

2 Specify graphic element, and display tooltip according to the tooltip configuration item.

dispatchAction({
    type: 'showTip',
    // index of series, which is optional when trigger of tooltip is axis
    seriesIndex?: number,
    // data index; could assign by name attribute when not defined
    dataIndex?: number,
    // optional; data name; ignored when dataIndex is defined
    name?: string,
    // Position of tooltip. Only works in this action.
    // Use tooltip.position in option by default.
    position: Array.<number>|string|Function
})

Parameter position is the same as tooltip.position.

action.legend

Actions related to legend component, which should include legend component before use.

action.legend.legendToggleSelect

Toggles legend selecting state.

dispatchAction({
    type: 'legendToggleSelect',
    // legend name
    name: string
})

EVENT: legendselectchanged

action.legend.legendUnSelect

Unselects the legend.

dispatchAction({
    type: 'legendUnSelect',
    // legend name
    name: string
})

EVENT: legendunselected

action.legend.legendSelect

Selects legend.

dispatchAction({
    type: 'legendSelect',
    // legend name
    name: string
})

EVENT: legendselected

action.downplay

Cancels highlighting graphic element.

Series is specified through seriesName or seriesIndex. If another data needs to be specified, then use dataIndex or name.

dispatchAction({
    type: 'downplay',
    // optional; series index; could be an array of multiple series
    seriesIndex?: number|Array,
    // optional; series name; could be an array of multiple series
    seriesName?: string|Array,
    // options are index of data
    dataIndex?: number,
    // options are data name
    name?: string
})

action.highlight

Highlights the given graphic element.

Series is specified through seriesName or seriesIndex. If another data needs to be specified, then use dataIndex or name.

dispatchAction({
    type: 'highlight',
    // optional; series index; could be an array of multiple series
    seriesIndex?: number|Array,
    // optional; series name; could be an array of multiple series
    seriesName?: string|Array,
    // options are index of data
    dataIndex?: number,
    // options are data name
    name?: string
})

echartsInstance

Instance created through echarts.init.

echartsInstance.dispose

Disposes instance. Once disposed, the instance can not be used again.

echartsInstance.isDisposed

() => boolean

Returns whether current instance has been disposed.

echartsInstance.clear

Clears current instance; removes all components and charts in current instance. After clearing, getOption returns an empty object {}.

echartsInstance.getConnectedDataURL

(opts: {
    // Exporting format, can be either png, or jpeg
    type?: string,
    // Resolution ratio of exporting image, 1 by default.
    pixelRatio?: number,
    // Background color of exporting image, use backgroundColor in option by default.
    backgroundColor?: string,
    // Excluded components list. e.g. ['toolbox']
    excludeComponents?: Array.<string>
}) => string

Exports connected chart image; returns a base64 url; can be set to src of Image. Position of charts in exported image are related to that of the container.

echartsInstance.getDataURL

(opts: {
    // Exporting format, can be either png, or jpeg
    type?: string,
    // Resolution ratio of exporting image, 1 by default.
    pixelRatio?: number,
    // Background color of exporting image, use backgroundColor in option by default.
    backgroundColor?: string,
    // Excluded components list. e.g. ['toolbox']
    excludeComponents?: Array.<string>
}) => string

Exports chart image; returns a base64 URL; can be set to src of Image.

For example: 

var img = new Image();
img.src = myChart.getDataURL({
    pixelRatio: 2,
    backgroundColor: '#fff'
});

echartsInstance.hideLoading

Hides animation loading effect.

echartsInstance.showLoading

(type?: string, opts?: Object)

Shows loading animation. You can call this interface manually before data is loaded, and call hideLoading to hide loading animation after data is loaded.

parameter:

echartsInstance.containPixel

(
    // finder is used to specify coordinate systems or series on which the judgement performed.
    // Generally
    // 通常地，可以使用 index 或者 id 或者 name 来定位。
    finder: {
        seriesIndex?: number,
        seriesId?: string,
        seriesName?: string,
        geoIndex?: number,
        geoId?: string,
        geoName?: string,
        xAxisIndex?: number,
        xAxisId?: string,
        xAxisName?: string,
        yAxisIndex?: number,
        yAxisId?: string,
        yAxisName?: string,
        gridIndex?: number,
        gridId?: string
        gridName?: string
    },
    // The value to be judged, in pixel coordinate system, where the origin ([0, 0])
    // is on the left-top of the main dom of echarts instance.
    value: Array
) => boolean

Determine whether the given point is in the given coordinate systems or series.

These coordinate systems or series are supported currently: grid, polar, geo, series-map, series-graph, series-pie.

For example:

// Determine whether point [23, 44] is in the geo whose geoIndex 0.
chart.containPixel('geo', [23, 44]); // Parameter 'geo' means {geoIndex: 0}
// Determine whether point [23, 44] is in the grid whose gridId is 'z'.
chart.containPixel({gridId: 'z'}, [23, 44]);
// Determine whether point [23, 44] is in series whose index are 1, 4 or 5.
chart.containPixel({seriesIndex: [1, 4, 5]}, [23, 44]);
// Determine whether point [23, 44] is in series whose index are 1, 4 or 5,
// or is in grid whose name is 'a'.
chart.containPixel({seriesIndex: [1, 4, 5], gridName: 'a'}, [23, 44]);

echartsInstance.convertFromPixel

(
    // finder is used to indicate in which coordinate system conversion is performed.
    // Generally, index or id or name can be used to specify coordinate system.
    finder: {
        seriesIndex?: number,
        seriesId?: string,
        seriesName?: string,
        geoIndex?: number,
        geoId?: string,
        geoName?: string,
        xAxisIndex?: number,
        xAxisId?: string,
        xAxisName?: string,
        yAxisIndex?: number,
        yAxisId?: string,
        yAxisName?: string,
        gridIndex?: number,
        gridId?: string
        gridName?: string
    },
    // The value to be converted, in pixel coordinate system, where the origin ([0, 0])
    // is on the left-top of the main dom of echarts instance.
    value: Array|string
    // Conversion result
) => Array|string

Convert a point from pixel coordinate to logical coordinate (e.g., in geo, cartesian, graph, ...). This method is the inverse operation of convertToPixel, where the examples can be referred.

echartsInstance.convertToPixel

(
    // finder is used to indicate in which coordinate system conversion is performed.
    // Generally, index or id or name can be used to specify coordinate system.
    finder: {
        seriesIndex?: number,
        seriesId?: string,
        seriesName?: string,
        geoIndex?: number,
        geoId?: string,
        geoName?: string,
        xAxisIndex?: number,
        xAxisId?: string,
        xAxisName?: string,
        yAxisIndex?: number,
        yAxisId?: string,
        yAxisName?: string,
        gridIndex?: number,
        gridId?: string
        gridName?: string
    },
    // The value to be converted.
    value: Array|string
    // Conversion result, in pixel coordinate system, where the origin ([0, 0])
    // is on the left-top of the main dom of echarts instance.
) => Array|string

Convert a point from logical coordinate (e.g., in geo, cartesian, graph, ...) to pixel coordinate.

For example:

In geo coordinate system, convert a point from latlong to pixel coordinate:

// [128.3324, 89.5344] represents [longitude, latitude].
// Perform conversion in the first geo coordinate system:
chart.convertToPixel('geo', [128.3324, 89.5344]); // The parameter 'geo' means {geoIndex: 0}.
// Perform conversion in the second geo coordinate system:
chart.convertToPixel({geoIndex: 1}, [128.3324, 89.5344]);
// Perform conversion in the geo coordinate system with id 'bb':
chart.convertToPixel({geoId: 'bb'}, [128.3324, 89.5344]);

In cartesian (see grid), convert a point to pixel coordinate:

// [300, 900] means [value on xAxis, value on yAxis].
// Notice, there might be more than one xAxis or yAxis in a grid, and each a pair of
// xAxis-yAxis constitudes a cartesian.
// Perform conversion in the cartesian consist of the third xAxis and the yAxis with id 'y1'.
chart.convertToPixel({xAxisIndex: 2, yAxisId: 'y1'}, [300, 900]);
// 使用 id 为 'g1' 的 grid 的第一个 cartesian 进行转换：
// Perform conversion in the first cartesian of the grid with id 'g1'.
chart.convertToPixel({gridId: 'g1'}, [300, 900]);

Convert a axis value to pixel value:

// In the xAxis with id 'x0', convert value 3000 to the horizontal pixel coordinate:
chart.convertToPixel({xAxisId: 'x0'}, 3000); // A number will be returned.
// In the second yAxis, convert value 600 to the vertical pixel coordinate:
chart.convertToPixel({yAxisIndex: 1}, 600); // A number will be returned.

In graph, convert a point to pixel coordinate:

// Since every graph series maintains a coordinate system for itself, we
// specify the graph series in finder.
chart.convertToPixel({seriesIndex: 0}, [2000, 3500]);
chart.convertToPixel({seriesId: 'k2'}, [100, 500]);

In a cooridinate system (cartesian, geo, graph, ...) that contains the given series, convert a point to pixel coordinate:

// Perform convert in the coordinate system that contains the first series.
chart.convertToPixel({seriesIndex: 0}, [128.3324, 89.5344]);
// Perform convert in the coordinate system that contains the series with id 'k2'.
chart.convertToPixel({seriesId: 'k2'}, [128.3324, 89.5344]);

echartsInstance.off

(eventName: string, handler?: Function)

Unbind event-handler function.

parameter:

echartsInstance.on

(eventName: string, handler: Function, context?: Object)

Binds event-handling function.

There are two kinds of events in ECharts, one of which is mouse events, which will be triggered when the mouse clicks certain element in the chart, the other kind will be triggered after dispatchAction is called. Every action has a corresponding event. Please refer to action and events for more information.

If event is triggered externally by dispatchAction, and there is batch attribute in action to trigger batch action, then the corresponding response event parameters be in batch.

Parameters

echartsInstance.dispatchAction

(payload: Object)

Triggers chart action, like chart switch legendToggleSelect,zoom data area dataZoom, show tooltip showTip and so on. See more action and events for more information.

payload parameter can trigger multiple actions through batch attribute.

Attention: In ECharts 2.x, triggering chart actions has a long operation path like myChart.component.tooltip.showTip, which may also involve with internal component organization. So, dispatchAction is used in this case in ECharts 3.

For example

myChart.dispatchAction({
    type: 'dataZoom',
    start: 20,
    end: 30
});
// Multiply actions can be dispatched through batch parameter
myChart.dispatchAction({
    type: 'dataZoom',
    batch: [{
        // first dataZoom component
        start: 20,
        end: 30
    }, {
        // second dataZoom component
        dataZoomIndex: 1,
        start: 10,
        end: 20
    }]
})

echartsInstance.resize

(opts?: {
    width?: number|string
    height? number|string
}) => ECharts

Resizes chart, which should be called manually when container size changes.

Parameters

Tip: Sometimes charts may be placed in multiple tabs. Those in hidden labels may fail to initialize due to the ignorance of container width and height. So resize should be called manually to get the correct width and height when switching to the corresponding tabs, or specify width/heigth in opts explicitly.

echartsInstance.getOption

() => Object

Gets option object maintained in current instance, which contains configuration item and data merged from previous setOption operations by users, along with user interaction states. For example, switching of legend, zooming area of data zoom, and so on. Therefore, a new instance that is exactly the same can be recovered from this option.

Attention: Attribute values in each component of the returned option are all in the form of an array, no matter it's single object or array of object when passed by setOption. For example:

{
    title: [{...}],
    legend: [{...}],
    grid: [{...}]
}

Besides, the following style is not recommended:

var option = myChart.getOption();
option.visualMap[0].inRange.color = ...;
myChart.setOption(option);

This is because getOption contains merged values which could be default values, and may overlaps future values. So, we recommend the following style when update part of configuration.

myChart.setOption({
    visualMap: {
        inRange: {
            color: ...
        }
    }
})

echartsInstance.getDom

() => HTMLCanvasElement|HTMLDivElement

Gets DOM element of ECharts instance container.

echartsInstance.getHeight

() => number

Gets height of ECharts instance container.

echartsInstance.getWidth

() => number

Gets width of ECharts instance container.

echartsInstance.setOption

(option: Object, notMerge: boolean, notRefreshImmediately: boolean)

Configuration item, data, universal interface, all parameters and data can all be modified through setOption. ECharts will merge new parameters and data, and then refresh chart. If animation is enabled, ECharts will find the difference between two groups of data and present data changes through proper animation.

For example:

Attention: Setting configuration item using addData and setSeries of ECharts 2.x are no longer supported. setOption is used for all these cases in ECharts 3. Please refer to the above example.

Parameters

echartsInstance.group

Group name to be used in chart connection.

echarts

Global echarts object, which can be accessed after including echarts.js in script tag or through require('echarts') in AMD environment.

echarts.registerTheme

(themeName: string, theme: Object)

Registers a theme, should be specified when initialize the chart instance.

echarts.registerMap

(mapName: string, geoJson: Object, specialAreas?: Object)

Registers available maps. This can only be used after including geo component or chart series of map.

Please refer to option.geo for usage.

Parameters

echarts.getInstanceByDom

(target: HTMLDivElement|HTMLCanvasElement) => ECharts

Returns chart instance of dom container.

echarts.dispose

(target: ECharts|HTMLDivElement|HTMLCanvasElement)

Destroys chart instance, after which the instance cannot be used any more.

echarts.disConnect

(group:string)

Disconnects interaction of multiple chart series. To have one single instance to be removed, you can set group of chart instance to be null.

Parameters

echarts.connect

(group:string|Array)

Connects interaction of multiple chart series.

Parameters

For example: 

// set group id of each instance respectively.
chart1.group = 'group1';
chart2.group = 'group1';
echarts.connect('group1');
// or incoming instance array that need to be linked.
echarts.connect([chart1, chart2]);

echarts.init

(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {
    devicePixelRatio?: number
    renderer?: string
    width?: number|string
    height? number|string
}) => ECharts

Creates an ECharts instance, and returns an echartsInstance. You can not initialize multiple ECharts instances on a single container.

Parameters