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);
});
9.11.1. 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: All mouse events contain parameters How to tell where the mouse clicked: Use If for If for For example: For example: For example: For example: 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: In ECharts, almost all component interactions trigger corresponding events, and commonly used events and event corresponding parameters are listed in the The following is an example of listening to a legend switch: 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 ECharts passed The above example is used in the broadcast pie chart
In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress. 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);
});
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
}
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.
}
}
}
});
query triggers callbacks only for the graphical elements of the specified component:chart.on(eventName, query, handler);
query can be string or Object . 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 () {...});
Object can contain one or more of the following properties, eachof which is optional{
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.
});
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.
});
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.
});
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.
});
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]
}]
});
});
});
9.11.2. Behavioral events of component interaction ¶
events is listed in the document. 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);
});
9.11.3. Code triggers the behavior of components in ECharts ¶
tooltip . dispatchAction({ type: '' }) to trigger the chart behavior, uniformly manage all actions, and record the user’s behavior path as needed. 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);
Principles, Technologies, and Methods of Geographic Information Systems
102