YouTipEcharts Events
In ECharts, we can listen to user operation behaviors and callback the corresponding functions.
ECharts uses the on method to listen to user behaviors, such as monitoring user click behavior.
There are two types of events in ECharts:
One type is user mouse operation clicks, such as **'click', 'dblclick', 'mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'globalout', 'contextmenu'** events.
The other type is behavior events triggered after the user interacts with interactive components, such as the 'legendselectchanged' event triggered when toggling legend switches, the 'datazoom' event triggered when zooming the data area, etc.
```javascript
myChart.on('click', function (params) { // Print the data name in console after 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 will pop up a dialog when clicking on a bar chart:
## Instance
```javascript
// Initialize ECharts instance based on the prepared dom
var myChart = echarts.init(document.getElementById('main'));
// Specify chart configuration options and data
var option ={
xAxis:{
data:["Shirt","Woolen shirt","Chiffon","Pants","High heels","Socks"]
},
yAxis:{},
series:[{
name:'Sales',
type:'bar',
data:[5,20,36,10,10,20]
}]
};
// Use the just specified configuration options and data to display the chart.
myChart.setOption(option);
// Handle click event and pop up data name
myChart.on('click',function(params){
alert(params.name);
});
[Try it »](#)
All mouse events contain parameter params, which is an object containing the data information of the clicked graphic. The format is as follows:
```javascript
{ // The component name to which the currently clicked graphic element belongs,
// its values can be 'series', 'markLine', 'markPoint', 'timeLine', etc.
componentType: string,
// Series type. Possible values: 'line', 'bar', 'pie', etc. Meaningful when componentType is 'series'.
seriesType: string,
// Series index in the passed option.series. Meaningful when componentType is 'series'.
seriesIndex: number,
// Series name. Meaningful when componentType is 'series'.
seriesName: string,
// Data name, category name
name: string,
// Data index in the passed data array
dataIndex: number,
// The original data item passed
data: Object,
// Charts like sankey and graph contain both nodeData and edgeData,
// dataType will be 'node' or 'edge', indicating whether the current click is on node or edge.
// Most other charts have only one type of data, dataType is meaningless.
dataType: string,
// The passed data value
value: number|Array
// Color of the data graphic. Meaningful when componentType is 'series'.
color: string
}
How to distinguish where the mouse click occurred:
```javascript
myChart.on('click', function (params) {
if (params.componentType === 'markPoint') {
// Clicked on markPoint
if (params.seriesIndex === 5) {
// Clicked on the markPoint of series with index 5.
}
} else if (params.componentType === 'series') {
if (params.seriesType === 'graph') {
if (params.dataType === 'edge') {
// Clicked on the edge of graph.
} else {
// Clicked on the node of graph.
}
}
}
});
Use query to only trigger callback for specified component's graphic elements:
```javascript
chart.on(eventName, query, handler);
query can be string or Object.
If it is string, it represents the component type. The format can be 'mainType' or 'mainType.subType'. For example:
```javascript
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 Object, it can contain one or more of the following properties, each property is optional:
```javascript
{
Index: number // component index
Name: string // component name
Id: string // component id
dataIndex: number // data item index
name: string // data item name
dataType: string // data item type, such as 'node', 'edge' in relationship graph
element: string // the name of el in custom series
}
For example:
```javascript
chart.setOption({
// ...
series: [{
name: 'uuu'
// ...
}]
});
chart.on('mouseover', {seriesName: 'uuu'}, function () {
// This method is called back when a graphic element in the series with name 'uuu' is 'mouseover'.
});
For example:
```javascript
chart.setOption({
// ...
series: [{
// ...
}, {
// ...
data: [
{name: 'xx', value: 121},
{name: 'yy', value: 33}
]
}]
});
chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {
// This method is called back when the element with name 'xx' in series index 1 is 'mouseover'.
});
For example:
```javascript
chart.setOption({
// ...
series: [{
type: 'graph