ECharts event handling
In ECharts, we can call back and forth the corresponding function by listening to the user’s behavior.
ECharts passed on method to monitor the user’s behavior, such as monitoring the user’s click behavior.
There are two types of events in ECharts:
User mouse clicks, such as’ click’, ‘dblclick’,’ mousedown’, ‘mousemove’,’ mouseup’, ‘mouseover’,’ mouseout’, ‘globalout’,’ contextmenu’ events.
There are also behavioral events triggered by the user after using components that can interact, such as the ‘legendselectchanged’ event triggered when the legend switch is switched, the’ datazoom’ event triggeredwhen the data area is scaled, and so on.
myChart.on('click', function (params) {
// Print the name of the data on 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 event
Mouse event types supported by ECharts, including ‘click’,’ dblclick’, ‘mousedown’,’ mousemove’, ‘mouseup’,’ mouseover’, ‘mouseout’,’ globalout’, ‘contextmenu’ event.
The following example pops up a dialog box when you click on a column chart:
Example
// Based on the prepared dom, initialize the ECharts instance
var myChart = echarts.init(document.getElementById('main'));
// Specify configuration items and data for the chart
var option = {
xAxis: {
data: ["Shirts", "woolen sweaters", "chiffon shirts", "pants", "high heels", "socks"]
},
yAxis: {},
series: [{
name: 'sales volume',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// Use the newly specified configuration items and data to display charts.
myChart.setOption(option);
// Handle click events and pop up data names
myChart.on('click', function (params) {
alert(params.name);
});
All mouse events contain parameters params , this is an object that contains the data information of the click drawing in the following format:
{
// The component name to which the currently clicked graphic element belongs,
// Its value is as follows: 'series'、'markLine'、'markPoint'、'timeLine' etc.
componentType: string,
// Series type. The value may be:'line'、'bar'、'pie' etc. It is meaningful when componentType is 'series'.
seriesType: string,
// The index of the series in the passed option. series. It is meaningful when componentType is 'series'.
seriesIndex: number,
// Series name. It is meaningful when componentType is 'series'.
seriesName: string,
// Data name, category name
name: string,
// The index of the data in the incoming data array
dataIndex: number,
// Incoming raw data items
data: Object,
// Sankey, graph, and other charts contain both nodeData and edgeData,
// The value of dataType will be 'node' or 'edge', indicating whether the current click is on node or edge.
// In most other charts, there is only one type of data, and dataType is meaningless.
dataType: string,
// Incoming data value
value: number|Array
// The color of the data graph. It is meaningful when componentType is 'series'.
color: string
}
How to tell where the mouse clicked:
myChart.on('click', function (params) {
if (params.componentType === 'markPoint') {
// Click on the MarkPoint.
if (params.seriesIndex === 5) {
// Click on the MarkPoint of the series with index 5.
}
}
else if (params.componentType === 'series') {
if (params.seriesType === 'graph') {
if (params.dataType === 'edge') {
// Click on the edge of the graph.
}
else {
// Click on the node in the graph.
}
}
}
});
Use query triggers callbacks only for the graphical elements of the specified component:
chart.on(eventName, query, handler);
query can be string or Object .
If for string represents 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 for Object can contain one or more of the following properties, eachof which is optional
{
<mainType>Index: number // assembly index
<mainType>Name: string // assembly name
<mainType>Id: string // assembly id
dataIndex: number // data item index
name: string // data item name
dataType: string // data item type，As shown in the diagram 'node', 'edge'
element: string // Customize the name of el in the series
}
For example:
chart.setOption({
// ...
series: [{
name: 'uuu'
// ...
}]
});
chart.on('mouseover', {seriesName: 'uuu'}, function () {
// When the graphic elements in a series with the name 'uuu' are called 'mouseover', this method is called back.
});
For example:
chart.setOption({
// ...
series: [{
// ...
}, {
// ...
data: [
{name: 'xx', value: 121},
{name: 'yy', value: 33}
]
}]
});
chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {
// When the element with name 'xx' in the series index 1 is called 'mouseover', this method is called back.
});
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 graph is clicked.
});
chart.on('click', {dataType: 'edge'}, function () {
// This method is called back when the edge of the 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 () {
// The name is 'my_el' , when the element of el is called 'mouseup', this method is called back.
});
You can obtain the data name and series name of this object in the callback function, and then index in your own data warehouse to get other informationto update the chart, display floating layer, and so on, as shown in the following example code:
Example
myChart.on('click', function (parmas) {
$.get('detail?q=' + params.name, function (detail) {
myChart.setOption({
series: [{
name: 'pie',
// Using pie charts to represent the distribution of data within a single column
data: [detail.data]
}]
});
});
});
Behavioral events of component interaction
In ECharts, almost all component interactions trigger corresponding events, and commonly used events and event corresponding parameters are listed in the events is listed in the document.
The following is an example of listening to a legend switch:
Example
// The behavior of the legend switch only triggers the legendselectchanged event
myChart.on('legendselectchanged', function (params) {
// Obtain the selected status of clicking on the legend
var isSelected = params.selected[params.name];
// Printing in the console
console.log((isSelected ? 'Selected' : 'Deselected') + 'legend' +
params.name);
// Print the status of all legends
console.log(params.selected);
});
Code triggers the behavior of components in ECharts
We only show the user interaction above, but sometimes we also need to call the method in the program and trigger the behavior of the chart, such as displaying tooltip .
ECharts passed dispatchAction({ type: '' }) to trigger the chart behavior, uniformly manage all actions, and record the user’s behavior path as needed.
The above example is used in the broadcast pie chart tooltip :
Example
setInterval(function () {
var dataLen = option.series[0].data.length;
// Cancel previously highlighted graphics
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: app.currentIndex
});
app.currentIndex = (app.currentIndex + 1) % dataLen;
// Highlight the current shape
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: app.currentIndex
});
// display tooltip
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: app.currentIndex
});
}, 1000);