最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。
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 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);