| (window.webpackJsonp=window.webpackJsonp||[]).push([[56],{350:function(e,n,t){"use strict";t.r(n),n.default="# Event and Action\n\nUsers can trigger corresponding events by their operation. The developer can handle the callback function by listening to these events, such as jump to a new website, pop-up a dialog box, or drill down the data.\n\nThe name of the event and the DOM event is both lowercase string. Here is an example of binding listening to `click` event.\n\n```js\nmyChart.on('click', function(params) {\n // Print name in console\n console.log(params.name);\n});\n```\n\nThere are two kinds of event in ECharts, one happened when the user clicks the mouse or hover the elements in charts, the other happened while the user triggered some interactive actions. Such as ['legendselectchanged'](${mainSitePath}api.html#events.legendselectchanged) triggered while changing the legend selected (please notice that `legendselected` won't be triggered in this situation), ['datazoom'](${mainSitePath}api.html#events.legendselectchanged) triggered while zooming the data area.\n\n## Handling the Mouse Events\n\nECharts support general mouse events: `'click'`, `'dblclick'`, `'mousedown'`, `'mousemove'`, `'mouseup'`, `'mouseover'`, `'mouseout'`, `'globalout'`, `'contextmenu'`. This is an example of opening the search result page after clicking the bar chart.\n\n```js\n// Init the ECharts base on DOM\nvar myChart = echarts.init(document.getElementById('main'));\n\n// Config\nvar option = {\n xAxis: {\n data: [\n 'Shirt',\n 'Wool sweater',\n 'Chiffon shirt',\n 'Pants',\n 'High-heeled shoes',\n 'socks'\n ]\n },\n yAxis: {},\n series: [\n {\n name: 'Sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n};\n// Use the option and data to display the chart\nmyChart.setOption(option);\n// Click and jump to Baidu search website\nmyChart.on('click', function(params) {\n window.open(\n 'https://www.google.com/search?q=' + encodeURIComponent(params.name)\n );\n});\n```\n\nAll mouse events included `params` which contained the data of the object.\n\nFormat:\n\n```js\ntype EventParams = {\n // The component name clicked,\n // component type, could be 'series'、'markLine'、'markPoint'、'timeLine', etc..\n componentType: string,\n // series type, could be 'line'、'bar'、'pie', etc.. Works when componentType is 'series'.\n seriesType: string,\n // the index in option.series. Works when componentType is 'series'.\n seriesIndex: number,\n // series name, works when componentType is 'series'.\n seriesName: string,\n // name of data (categories).\n name: string,\n // the index in 'data' array.\n dataIndex: number,\n // incoming raw data item\n data: Object,\n // charts like 'sankey' and 'graph' included nodeData and edgeData as the same time.\n // dataType can be 'node' or 'edge', indicates whether the current click is on node or edge.\n // most of charts have one kind of data, the dataType is meaningless\n dataType: string,\n // incoming data value\n value: number | Array,\n // color of the shape, works when componentType is 'series'.\n color: string\n};\n```\n\nIdentify where the mouse clicked.\n\n```js\nmyChart.on('click', function(params) {\n if (params.componentType === 'markPoint') {\n // Clicked on the markPoint\n if (params.seriesIndex === 5) {\n // clicked on the markPoint of the series with index = 5\n }\n } else if (params.componentType === 'series') {\n if (params.seriesType === 'graph') {\n if (params.dataType === 'edge') {\n // clicked at the edge of graph.\n } else {\n // clicked at the node of graph.\n }\n }\n }\n});\n```\n\nUse `query` to trigger callback of the specified component:\n\n```js\nchart.on(eventName, query, handler);\n```\n\n`query` can be `string` or `Object`.\n\nIf it is `string`, the format can be `mainType` or `mainType.subType`, such as:\n\n```js\nchart.on('click', 'series', function () {...});\nchart.on('click', 'series.line', function () {...});\nchart.on('click', 'dataZoom', function () {...});\nchart.on('click', 'xAxis.category', function () {...});\n```\n\nIf it is `Object`, `query` can include more than one attribute:\n\n```js\n{\n ${mainType}Index: number // component index\n ${mainType}Name: string // component name\n ${mainType}Id: string // component id\n dataIndex: number // data item index\n name: string // data item name\n dataType: string // date item type, such as 'node', 'edge'\n element: string // name of element in custom series.\n}\n```\n\nSuch as:\n\n```js\nchart.setOption({\n // ...\n series: [\n {\n name: 'uuu'\n // ...\n }\n ]\n});\nchart.on('mouseover', { seriesName: 'uuu' }, function() {\n // when elements in series named 'uuu' triggered 'mouseover'\n});\n```\n\nFor example:\n\n```js\nchart.setOption({\n // ...\n series: [\n {\n // ...\n },\n {\n // ...\n data: [\n { name: 'xx', value: 121 },\n { name: 'yy', value: 33 }\n ]\n }\n ]\n});\nchart.on('mouseover', { seriesIndex: 1, name: 'xx' }, function() {\n // when data named 'xx' in series index 1 triggered 'mouseover'.\n});\n```\n\nFor example:\n\n```js\nchart.setOption({\n // ...\n series: [\n {\n type: 'graph',\n nodes: [\n { name: 'a', value: 10 },\n { name: 'b', value: 20 }\n ],\n edges: [{ source: 0, target: 1 }]\n }\n ]\n});\nchart.on('click', { dataType: 'node' }, function() {\n // call this method while the node of graph was clicked.\n});\nchart.on('click', { dataType: 'edge' }, function() {\n // call this method while the edge of graph was clicked.\n});\n```\n\nFor example:\n\n```js\nchart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function(params, api) {\n return {\n type: 'group',\n children: [\n {\n type: 'circle',\n name: 'my_el'\n // ...\n },\n {\n // ...\n }\n ]\n };\n },\n data: [[12, 33]]\n }\n});\nchart.on('mouseup', { element: 'my_el' }, function() {\n // when data named 'my_el' triggered 'mouseup'.\n});\n```\n\nYou can display a popup, update the charts using the query result from your database by the data name or series name in the callback function. Here is an example:\n\n```js\nmyChart.on('click', function(parmas) {\n $.get('detail?q=' + params.name, function(detail) {\n myChart.setOption({\n series: [\n {\n name: 'pie',\n // using pie chart to show the data distribution in one column.\n data: [detail.data]\n }\n ]\n });\n });\n});\n```\n\n## Event of Component Interaction\n\nAll Component Interaction in ECharts will trigger a corresponding event. Normal events and parameters are listed in the [events](${mainSitePath}/api.html#events) document.\n\nHere is an example of listening to legend event:\n\n```js\n// Show/hide the legend only trigger legendselectchanged event\nmyChart.on('legendselectchanged', function(params) {\n // State if legend is selected.\n var isSelected = params.selected[params.name];\n // print in the console.\n console.log(\n (isSelected ? 'Selected' : 'Not Selected') + 'legend' + params.name\n );\n // print for all legends.\n console.log(params.selected);\n});\n```\n\n## Writing Code to Trigger Component Action Manually\n\nYou can trigger events such as `'legendselectchanged'` not only by the user but also with code manually. It can be used to display the tooltip, select the legend.\n\nIn ECharts `myChart.dispatchAction({ type: '' })` is used to trigger the behavior. This manages all actions and can record the behaviors conveniently.\n\nCommonly used behavior and corresponding parameters are listed in [action](${mainSitePath}/api.html#action).\n\nThe following example shows how to highlight each sector one by one in the pie chart using `dispatchAction`.\n\n```js live\noption = {\n tooltip: {\n trigger: 'item',\n formatter: '{a} <br/>{b} : {c} ({d}%)'\n },\n legend: {\n orient: 'vertical',\n left: 'left',\n data: [\n 'Direct Access',\n 'Email Marketing',\n 'Affiliate Ads',\n 'Video Ads',\n 'Search Engines'\n ]\n },\n series: [\n {\n name: 'Access Source',\n type: 'pie',\n radius: '55%',\n center: ['50%', '60%'],\n data: [\n { value: 335, name: 'Direct Access' },\n { value: 310, name: 'Email Marketing' },\n { value: 234, name: 'Affiliate Ads' },\n { value: 135, name: 'Video Ads' },\n { value: 1548, name: 'Search Engines' }\n ],\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }\n ]\n};\n\nlet currentIndex = -1;\n\nsetInterval(function() {\n var dataLen = option.series[0].data.length;\n myChart.dispatchAction({\n type: 'downplay',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n currentIndex = (currentIndex + 1) % dataLen;\n myChart.dispatchAction({\n type: 'highlight',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n}, 1000);\n```\n\n## Listen to Events on the Blank Area\n\nSometimes developers need to listen to the events that are triggered from the blank of the canvas. For example, need to reset the chart when users click on the blank area.\n\nBefore we talk about this feature, we need to clarify two kinds of events: zrender events and echarts events.\n\n```js\nmyChart.getZr().on('click', function(event) {\n // This listener is listening to a `zrender event`.\n});\nmyChart.on('click', function(event) {\n // This listener is listening to a `echarts event`.\n});\n```\n\nzrender events are different from echarts events. The former one are triggered when mouse/pointer is at everywhere, while the latter one can only be triggered when mouse/pointer is at the graphic elements. In fact, echarts events are implemented based on zrender events, that is, when a zrender events is triggered at a graphic element, echarts will trigger a echarts event.\n\nHaving zrender events, we can implement listen to events from the blank as follows:\n\n```js\nmyChart.getZr().on('click', function(event) {\n // No \"target\" means that mouse/pointer is not on\n // any of the graphic elements, which is \"blank\".\n if (!event.target) {\n // Click on blank. Do something.\n }\n});\n```\n"}}]); |