ECharts Event Handling
In ECharts, we can listen to user actions to call corresponding functions.
ECharts uses the on method to listen to user actions, such as monitoring user click behavior.
ECharts events are divided into two types:
User mouse operation clicks, such as 'click', 'dblclick', 'mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'globalout', 'contextmenu' events.
The other type is behavior events triggered by users after interacting with components, such as the 'legendselectchanged' event triggered when toggling legend switches, and the 'datazoom' event triggered when zooming data regions, among others.
myChart.on('click', function (params) {
// Print the name of the data in the console after the user clicks
console.log(params);
});
myChart.on('legendselectchanged', function (params) {
console.log(params);
});
chart.on('click', 'series.line', function (params) {
console.log(params);
});
chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function (params) {
console.log(params);
});
Mouse Events
ECharts supports mouse event types, including 'click', 'dblclick', 'mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'globalout', 'contextmenu' events.
The following example displays a dialog box when a bar chart is clicked:
Example
// Initialize an ECharts instance based on the prepared DOM
var myChart = echarts.init(document.getElementById('main'));
// Specify the configuration and data of the chart
var option = {
xAxis: {
data: ["Shirt", "Sweater", "Blouse", "Pants", "High Heels", "Socks"]
},
yAxis: {},
series: [{
name: 'Sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// Use the specified configuration and data to display the chart.
myChart.setOption(option);
// Handle the click event and display the data name
myChart.on('click', function (params) {
alert(params.name);
});
All mouse events include the parameter params, which is an object containing data information about the clicked graphic element, in the following format:
{
// The name of the component to which the currently clicked graphic element belongs,
// such as 'series', 'markLine', 'markPoint', 'timeLine', etc.
componentType: string,
// The series type. Possible values are: 'line', 'bar', 'pie', etc. This is meaningful when componentType is 'series'.
seriesType: string,
// The index of the series in the passed option.series. This is meaningful when componentType is 'series'.
seriesIndex: number,
// The series name. This is meaningful when componentType is 'series'.
seriesName: string,
// The data name, category name
name: string,
// The index of the data in the passed data array
dataIndex: number,
// The original data item passed in
data: Object,
// For charts like sankey and graph, which have both nodeData and edgeData,
// dataType can be 'node' or 'edge', indicating whether the current click is on a node or an edge.
// For most other charts, there is only one type of data, and dataType is meaningless.
dataType: string,
// The passed data value
value: number|Array
}
// Color of the data graphic. This is meaningful when componentType is 'series'. color: string }
How to distinguish where the mouse click occurred:
myChart.on('click', function (params) {
if (params.componentType === 'markPoint') {
// Clicked on a markPoint
if (params.seriesIndex === 5) {
// Clicked on the markPoint of the series with index 5.
}
}
else if (params.componentType === 'series') {
if (params.seriesType === 'graph') {
if (params.dataType === 'edge') {
// Clicked on an edge of the graph.
}
else {
// Clicked on a node of the graph.
}
}
}
});
Using query to trigger callbacks only for specified component graphic elements:
chart.on(eventName, query, handler);
query can be a string or an Object.
If it is a string, it indicates the component type. The format can be 'mainType' or 'mainType.subType'. For example:
chart.on('click', 'series', function () {...});
chart.on('click', 'series.line', function () {...});
chart.on('click', 'dataZoom', function () {...});
chart.on('click', 'xAxis.category', function () {...});
If it is an Object, it can include one or more of the following properties, each of which is optional:
{
<mainType>Index: number // Component index
<mainType>Name: string // Component name
<mainType>Id: string // Component id
dataIndex: number // Data item index
name: string // Data item name
dataType: string // Data item type, such as 'node', 'edge' in a graph
element: string // Name of the el in custom series
}
For example:
chart.setOption({
// ...
series: [{
name: 'uuu'
// ...
}]
});
chart.on('mouseover', {seriesName: 'uuu'}, function () {
// This method is called when a graphic element in the series with name 'uuu' is 'mouseover'.
});
For example:
chart.setOption({
// ...
series: [{
// ...
}, {
// ...
data: [
{name: 'xx', value: 121},
{name: 'yy', value: 33}
]
}]
});
chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {
// This method is called when the element with name 'xx' in the series with index 1 is 'mouseover'.
});
For example:
chart.setOption({
// ...
series: [{
type: 'graph',
nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],
edges: [{source: 0, target: 1}]
}]
});
chart.on('click', {dataType: 'node'}, function () {
// This method is called back when a node in the relationship graph is clicked.
});
chart.on('click', {dataType: 'edge'}, function () {
// This method is called back when an edge in the relationship graph is clicked.
});
For example:
chart.setOption({
// ...
series: {
// ...
type: 'custom',
renderItem: function (params, api) {
return {
type: 'group',
children: [{
type: 'circle',
name: 'my_el',
// ...
}, {
// ...
}]
}
},
data: [[12, 33]]
}
})
chart.on('mouseup', {element: 'my_el'}, function () {
// This method is called back when the element with name 'my_el' is 'mouseup'.
});
You can obtain the data name and series name from the object within the callback function, index other information in your data repository, and then update the chart or display a floating layer, as shown in the example code below:
Example
myChart.on('click', function (params) {
$.get('detail?q=' + params.name, function (detail) {
myChart.setOption({
series: [{
name: 'pie',
// Represent the data distribution within a single column through a pie chart
data: [detail.data]
}]
});
});
});
Component Interaction Events
In ECharts, almost all component interactions trigger corresponding events. Common events and their corresponding parameters are listed in the events documentation.
Below is an example of listening to a legend toggle:
Example
// The legend toggle action only triggers the legendselectchanged event
myChart.on('legendselectchanged', function (params) {
// Get the selected state of the clicked legend
var isSelected = params.selected[params.name];
// Print to the console
console.log((isSelected ? 'Selected' : 'Deselected') + ' legend ' + params.name);
// Print the state of all legends
console.log(params.selected);
});
Triggering Component Actions in ECharts via Code
Above, we only mentioned user interaction operations, but sometimes we also need to call methods in the program and trigger chart actions, such as displaying a tooltip.
ECharts triggers chart actions through dispatchAction({ type: '' }), which uniformly manages all actions and can also record the user's behavior path as needed.
The following example is used to cycle through tooltips in a pie chart:
Example
setInterval(function () {
var dataLen = option.series[0].data.length;
// Unhighlight the previously highlighted graphic
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: app.currentIndex
});
app.currentIndex = (app.currentIndex + 1) % dataLen;
// Highlight the current graphic
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: app.currentIndex
});
// Display tooltip
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: app.currentIndex
});
}, 1000);