treeroam event for panning
The treeroam event triggered by panning on series-tree has params object containing: type ('treeroam'), seriesId (string), dx (number), and dy (number).
events
36 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
treeroam event for zooming
The treeroam event triggered by zooming on series-tree has params object containing: type ('treeroam'), seriesId (string), zoom (zoom ratio of roaming once as number), originX (number), and originY (number).
Mouse event parameter structure
Mouse event callbacks receive a params object with the following properties: componentType (string, such as 'series', 'markLine', 'markPoint', 'timeLine'), seriesType (string such as 'line', 'bar', 'pie'), seriesIndex (number), seriesName (string), name (string for data or category name), dataIndex (number), data (Object), dataType (string, 'node' or 'edge' for series like sankey or graph), value (number or Array), color (string), and info (any, only for graphic component and custom series if element option has info property).
Event registration with on() method
Events are registered using the on() method on an ECharts instance. The method accepts an event name, optional filter criteria (object), and a callback function. For example: myChart.on('click', function (params) { ... }), or with filtering: chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function (params) { ... }).
Event type classification: mouse vs dispatch
Events in ECharts are divided into two kinds: mouse events triggered when clicking on components, and events triggered after dispatching actions via dispatchAction().
highlight event
The highlight event is triggered for data highlight and corresponds to the highlight action.
downplay event
The downplay event is triggered for data downplay and corresponds to the downplay action.
selectchanged event structure
The selectchanged event is triggered when data selection changes. Its params object contains: type ('selectchanged'), fromAction ('select', 'toggleSelect', or 'unselect'), and selected (array of objects with dataIndex as number array and seriesIndex as number, grouped by series).
datarangeselected event
The datarangeselected event is emitted after range is changed in visualMap. It corresponds to the selectDataRange action. Its params object contains: type ('datarangeselected') and selected (Object for discrete visualMap with true/false values, or Array for continuous visualMap representing range of data values).
graphroam event
The graphroam event is emitted after series-graph is roamed. Its params object contains: type ('graphroam'), seriesId (string), zoom (zoom ratio of roaming once as number), originX (number), and originY (number).
georoam event
The georoam event is emitted after geo is roamed. Its params object contains: type ('georoam'), componentType ('geo' or 'series'), seriesId (string), zoom (zoom ratio of roaming once as number), totalZoom (accumulated zoom ratio since v5.5.1 as number), originX (number), and originY (number).
dataviewchanged event
The dataviewchanged event is the changing event of data view tool in toolbox. Its params object contains: type ('dataviewchanged').
magictypechanged event
The magictypechanged event is the switching event of magic type tool in toolbox. Its params object contains: type ('magictypechanged') and currentType (string, the type clicked to change).
rendered event
The rendered event is triggered when a frame is rendered. Note that this event does not indicate animation finished or progressive rendering finished; use the finished event for that. Can be used to update chart snapshots.
finished event
The finished event is triggered when render is finished, meaning animation finished and progressive rendering finished. It should be registered before calling setOption() to ensure callbacks are called as expected when animation is disabled.
rendered event usage example
Example updating snapshot image on each rendered event: var snapshotImage = new Image(); document.body.append(snapshotImage); chart.on('rendered', function () { snapshotImage.src = chart.getDataURL(); });
finished event usage example
Example using finished event with animation disabled: var option = { animation: false }; chart.on('finished', function () { snapshotImage.src = chart.getDataURL(); }); chart.setOption(option);
Event registration example with series filter
Example registering click event on specific series type: chart.on('click', 'series.line', function (params) { console.log(params); });
rendered vs finished event timing
The rendered event fires every frame render, while the finished event fires only when animation and progressive rendering are both complete. Use finished for operations that should happen once after full completion.
silent option disables user interactions
The silent option is a boolean parameter with a default value of false. When set to true, silent disables all user interactions with chart elements. This prevents interactive features such as tooltip, hover state changing (emphasis), and hover linking. Additionally, mouse/touch events are not dispatched to user-registered listeners when silent is true. When set to false, interactive features are not disabled by this option, though they may depend on other relevant options to be enabled. Mouse/touch events are not prevented when silent is false, but they still depend on other relevant options like triggerEvent.
triggerEvent option enables mouse/touch event dispatching
The triggerEvent option is a boolean parameter that controls whether mouse/touch events are dispatched to user-registered listeners registered via chart.on(). When triggerEvent is true, events are enabled for dispatch, but dispatching also requires the silent option to be falsy. When triggerEvent is false, mouse/touch events are disabled, even if silent is false. Supported events include 'click', 'dblclick', 'mouseover', 'mouseout', 'mousemove', 'mousedown', 'mouseup', 'globalout', and 'contextmenu'. Both mouse and touch events are unified to the event type 'mouse{xxx}'.
Interaction between silent and triggerEvent options
Both the silent option and triggerEvent option must be properly configured for mouse/touch events to work. The silent option must be false to allow interactive features and event dispatching. The triggerEvent option must be true to enable dispatching of mouse/touch events to user-registered listeners. If either is configured incorrectly, events will not be triggered.
Supported mouse events
ECharts supports the following mouse events: 'click', 'dblclick', 'mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'globalout', and 'contextmenu'.
Event binding with on method
Events in ECharts are bound using the on method on the ECharts instance. Event names are lowercase and match DOM event names. Example: myChart.on('click', function (params) { console.log(params.name); });
Two kinds of events in ECharts
ECharts supports two kinds of events: mouse events triggered when the mouse clicks on chart components, and interaction component events triggered by interactions with components like legend toggling or data zooming.
Mouse event params object structure
The params object passed to mouse event handlers contains: componentType (string, e.g. 'series', 'markLine', 'markPoint', 'timeLine'), seriesType (string, e.g. 'line', 'bar', 'pie'), seriesIndex (number), seriesName (string), name (string, data name or category name), dataIndex (number), data (Object, raw input data item), dataType (string, 'node' or 'edge' for graph/sankey, not needed for most series), value (number or Array), and color (string).
Event filtering with query string parameter
The on method can accept a query string as the second parameter to filter events to specific components. Query strings use the format 'mainType' or 'mainType.subType'. Examples: chart.on('click', 'series', function() {...}); chart.on('click', 'series.line', function() {...}); chart.on('click', 'xAxis.category', function() {...});
Event filtering with query object parameter
The on method can accept a query object as the second parameter with optional properties: <mainType>Index (number), <mainType>Name (string), <mainType>Id (string), dataIndex (number), name (string), dataType (string, e.g. 'node', 'edge' in graph), and element (string, element name in custom series). Any of these properties is optional.
Difference between zrender events and echarts events
zrender events are triggered at any mouse/pointer position on the canvas. echarts events are only triggered when the mouse/pointer is on graphic elements. echarts events are implemented based on zrender events. Access zrender events via myChart.getZr().on() and echarts events via myChart.on().
Listening to events from blank canvas
To detect when a click occurs on a blank area of the canvas (not on any graphic element), use zrender events: myChart.getZr().on('click', function (event) { if (!event.target) { /* Click on blank */ } });
Mouse event example: bar chart click handler
Example showing how to handle click events on a bar chart and open a URL based on clicked data: myChart.on('click', function (params) { window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name)); });
Query object example: filtering by series name
Example of using query object to filter mouseover events by series name: chart.on('mouseover', {seriesName: 'uuu'}, function () { // Called when graphic elements in series named 'uuu' are moused over });
Query object example: filtering by seriesIndex and name
Example of using query object to filter mouseover events by both series index and data item name: chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () { // Called when graphic elements of data item 'xx' in series index 1 are moused over });
Query object example: graph node and edge filtering
Example of using query object with dataType to filter click events on graph components: chart.on('click', {dataType: 'node'}, function () { }); chart.on('click', {dataType: 'edge'}, function () { });
Query object example: custom series element filtering
Example of using query object with element property to filter click events on custom series elements: chart.on('click', {element: 'my_el'}, function () { // Called when element with name 'my_el' is clicked });
Event-driven chart update pattern
Example showing how to fetch additional data on click and update the chart: myChart.on('click', function (params) { $.get('detail?q=' + params.name, function (detail) { myChart.setOption({ series: [{ name: 'pie', data: [detail.data] }] }); }); });