| __NUXT_JSONP__("/en/concepts/event", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O){return {data:[{article:{slug:"event",toc:[{id:A,depth:r,text:B},{id:C,depth:r,text:D},{id:E,depth:r,text:F},{id:G,depth:r,text:H}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"event-and-action"},children:[{type:b,tag:k,props:{href:"#event-and-action",ariaHidden:m,tabIndex:n},children:[{type:b,tag:o,props:{className:[p,q]},children:[]}]},{type:a,value:"Event and Action"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Users 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."}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"The name of the event and the DOM event is both lowercase string. Here is an example of binding listening to "},{type:b,tag:f,props:{},children:[{type:a,value:"click"}]},{type:a,value:" event."}]},{type:a,value:c},{type:b,tag:g,props:{className:[h]},children:[{type:b,tag:j,props:{lang:i,"line-highlights":d,"file-name":d},children:[{type:a,value:"myChart.on('click', function(params) {\n \u002F\u002F Print name in console\n console.log(params.name);\n});\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"There 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 "},{type:b,tag:k,props:{href:I,rel:[s,t,u],target:v},children:[{type:a,value:J}]},{type:a,value:" triggered while changing the legend selected (please notice that "},{type:b,tag:f,props:{},children:[{type:a,value:"legendselected"}]},{type:a,value:" won't be triggered in this situation), "},{type:b,tag:k,props:{href:I,rel:[s,t,u],target:v},children:[{type:a,value:"'datazoom'"}]},{type:a,value:" triggered while zooming the data area."}]},{type:a,value:c},{type:b,tag:w,props:{id:A},children:[{type:b,tag:k,props:{href:"#handling-the-mouse-events",ariaHidden:m,tabIndex:n},children:[{type:b,tag:o,props:{className:[p,q]},children:[]}]},{type:a,value:B}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"ECharts support general mouse events: "},{type:b,tag:f,props:{},children:[{type:a,value:"'click'"}]},{type:a,value:l},{type:b,tag:f,props:{},children:[{type:a,value:"'dblclick'"}]},{type:a,value:l},{type:b,tag:f,props:{},children:[{type:a,value:"'mousedown'"}]},{type:a,value:l},{type:b,tag:f,props:{},children:[{type:a,value:"'mousemove'"}]},{type:a,value:l},{type:b,tag:f,props:{},children:[{type:a,value:"'mouseup'"}]},{type:a,value:l},{type:b,tag:f,props:{},children:[{type:a,value:"'mouseover'"}]},{type:a,value:l},{type:b,tag:f,props:{},children:[{type:a,value:"'mouseout'"}]},{type:a,value:l},{type:b,tag:f,props:{},children:[{type:a,value:"'globalout'"}]},{type:a,value:l},{type:b,tag:f,props:{},children:[{type:a,value:"'contextmenu'"}]},{type:a,value:". This is an example of opening the search result page after clicking the bar chart."}]},{type:a,value:c},{type:b,tag:g,props:{className:[h]},children:[{type:b,tag:j,props:{lang:i,"line-highlights":d,"file-name":d},children:[{type:a,value:"\u002F\u002F Init the ECharts base on DOM\nvar myChart = echarts.init(document.getElementById('main'));\n\n\u002F\u002F 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\u002F\u002F Use the option and data to display the chart\nmyChart.setOption(option);\n\u002F\u002F Click and jump to Baidu search website\nmyChart.on('click', function(params) {\n window.open(\n 'https:\u002F\u002Fwww.google.com\u002Fsearch?q=' + encodeURIComponent(params.name)\n );\n});\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"All mouse events included "},{type:b,tag:f,props:{},children:[{type:a,value:"params"}]},{type:a,value:" which contained the data of the object."}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Format:"}]},{type:a,value:c},{type:b,tag:g,props:{className:[h]},children:[{type:b,tag:j,props:{lang:i,"line-highlights":d,"file-name":d},children:[{type:a,value:"type EventParams = {\n \u002F\u002F The component name clicked,\n \u002F\u002F component type, could be 'series'、'markLine'、'markPoint'、'timeLine', etc..\n componentType: string,\n \u002F\u002F series type, could be 'line'、'bar'、'pie', etc.. Works when componentType is 'series'.\n seriesType: string,\n \u002F\u002F the index in option.series. Works when componentType is 'series'.\n seriesIndex: number,\n \u002F\u002F series name, works when componentType is 'series'.\n seriesName: string,\n \u002F\u002F name of data (categories).\n name: string,\n \u002F\u002F the index in 'data' array.\n dataIndex: number,\n \u002F\u002F incoming raw data item\n data: Object,\n \u002F\u002F charts like 'sankey' and 'graph' included nodeData and edgeData as the same time.\n \u002F\u002F dataType can be 'node' or 'edge', indicates whether the current click is on node or edge.\n \u002F\u002F most of charts have one kind of data, the dataType is meaningless\n dataType: string,\n \u002F\u002F incoming data value\n value: number | Array,\n \u002F\u002F color of the shape, works when componentType is 'series'.\n color: string\n};\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Identify where the mouse clicked."}]},{type:a,value:c},{type:b,tag:g,props:{className:[h]},children:[{type:b,tag:j,props:{lang:i,"line-highlights":d,"file-name":d},children:[{type:a,value:"myChart.on('click', function(params) {\n if (params.componentType === 'markPoint') {\n \u002F\u002F Clicked on the markPoint\n if (params.seriesIndex === 5) {\n \u002F\u002F 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 \u002F\u002F clicked at the edge of graph.\n } else {\n \u002F\u002F clicked at the node of graph.\n }\n }\n }\n});\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Use "},{type:b,tag:f,props:{},children:[{type:a,value:x}]},{type:a,value:" to trigger callback of the specified component:"}]},{type:a,value:c},{type:b,tag:g,props:{className:[h]},children:[{type:b,tag:j,props:{lang:i,"line-highlights":d,"file-name":d},children:[{type:a,value:"chart.on(eventName, query, handler);\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:b,tag:f,props:{},children:[{type:a,value:x}]},{type:a,value:" can be "},{type:b,tag:f,props:{},children:[{type:a,value:K}]},{type:a,value:L},{type:b,tag:f,props:{},children:[{type:a,value:M}]},{type:a,value:y}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:N},{type:b,tag:f,props:{},children:[{type:a,value:K}]},{type:a,value:", the format can be "},{type:b,tag:f,props:{},children:[{type:a,value:"mainType"}]},{type:a,value:L},{type:b,tag:f,props:{},children:[{type:a,value:"mainType.subType"}]},{type:a,value:", such as:"}]},{type:a,value:c},{type:b,tag:g,props:{className:[h]},children:[{type:b,tag:j,props:{lang:i,"line-highlights":d,"file-name":d},children:[{type:a,value:"chart.on('click', 'series', function () {...});\nchart.on('click', 'series.line', function () {...});\nchart.on('click', 'dataZoom', function () {...});\nchart.on('click', 'xAxis.category', function () {...});\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:N},{type:b,tag:f,props:{},children:[{type:a,value:M}]},{type:a,value:l},{type:b,tag:f,props:{},children:[{type:a,value:x}]},{type:a,value:" can include more than one attribute:"}]},{type:a,value:c},{type:b,tag:g,props:{className:[h]},children:[{type:b,tag:j,props:{lang:i,"line-highlights":d,"file-name":d},children:[{type:a,value:"{\n ${mainType}Index: number \u002F\u002F component index\n ${mainType}Name: string \u002F\u002F component name\n ${mainType}Id: string \u002F\u002F component id\n dataIndex: number \u002F\u002F data item index\n name: string \u002F\u002F data item name\n dataType: string \u002F\u002F date item type, such as 'node', 'edge'\n element: string \u002F\u002F name of element in custom series.\n}\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Such as:"}]},{type:a,value:c},{type:b,tag:g,props:{className:[h]},children:[{type:b,tag:j,props:{lang:i,"line-highlights":d,"file-name":d},children:[{type:a,value:"chart.setOption({\n \u002F\u002F ...\n series: [\n {\n name: 'uuu'\n \u002F\u002F ...\n }\n ]\n});\nchart.on('mouseover', { seriesName: 'uuu' }, function() {\n \u002F\u002F when elements in series named 'uuu' triggered 'mouseover'\n});\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:z}]},{type:a,value:c},{type:b,tag:g,props:{className:[h]},children:[{type:b,tag:j,props:{lang:i,"line-highlights":d,"file-name":d},children:[{type:a,value:"chart.setOption({\n \u002F\u002F ...\n series: [\n {\n \u002F\u002F ...\n },\n {\n \u002F\u002F ...\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 \u002F\u002F when data named 'xx' in series index 1 triggered 'mouseover'.\n});\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:z}]},{type:a,value:c},{type:b,tag:g,props:{className:[h]},children:[{type:b,tag:j,props:{lang:i,"line-highlights":d,"file-name":d},children:[{type:a,value:"chart.setOption({\n \u002F\u002F ...\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 \u002F\u002F call this method while the node of graph was clicked.\n});\nchart.on('click', { dataType: 'edge' }, function() {\n \u002F\u002F call this method while the edge of graph was clicked.\n});\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:z}]},{type:a,value:c},{type:b,tag:g,props:{className:[h]},children:[{type:b,tag:j,props:{lang:i,"line-highlights":d,"file-name":d},children:[{type:a,value:"chart.setOption({\n \u002F\u002F ...\n series: {\n \u002F\u002F ...\n type: 'custom',\n renderItem: function(params, api) {\n return {\n type: 'group',\n children: [\n {\n type: 'circle',\n name: 'my_el'\n \u002F\u002F ...\n },\n {\n \u002F\u002F ...\n }\n ]\n };\n },\n data: [[12, 33]]\n }\n});\nchart.on('mouseup', { element: 'my_el' }, function() {\n \u002F\u002F when data named 'my_el' triggered 'mouseup'.\n});\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"You 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:"}]},{type:a,value:c},{type:b,tag:g,props:{className:[h]},children:[{type:b,tag:j,props:{lang:i,"line-highlights":d,"file-name":d},children:[{type:a,value:"myChart.on('click', function(parmas) {\n $.get('detail?q=' + params.name, function(detail) {\n myChart.setOption({\n series: [\n {\n name: 'pie',\n \u002F\u002F using pie chart to show the data distribution in one column.\n data: [detail.data]\n }\n ]\n });\n });\n});\n"}]}]},{type:a,value:c},{type:b,tag:w,props:{id:C},children:[{type:b,tag:k,props:{href:"#event-of-component-interaction",ariaHidden:m,tabIndex:n},children:[{type:b,tag:o,props:{className:[p,q]},children:[]}]},{type:a,value:D}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"All Component Interaction in ECharts will trigger a corresponding event. Normal events and parameters are listed in the "},{type:b,tag:k,props:{href:"https:\u002F\u002Fecharts.apache.org\u002F\u002Fapi.html#events",rel:[s,t,u],target:v},children:[{type:a,value:"events"}]},{type:a,value:" document."}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Here is an example of listening to legend event:"}]},{type:a,value:c},{type:b,tag:g,props:{className:[h]},children:[{type:b,tag:j,props:{lang:i,"line-highlights":d,"file-name":d},children:[{type:a,value:"\u002F\u002F Show\u002Fhide the legend only trigger legendselectchanged event\nmyChart.on('legendselectchanged', function(params) {\n \u002F\u002F State if legend is selected.\n var isSelected = params.selected[params.name];\n \u002F\u002F print in the console.\n console.log(\n (isSelected ? 'Selected' : 'Not Selected') + 'legend' + params.name\n );\n \u002F\u002F print for all legends.\n console.log(params.selected);\n});\n"}]}]},{type:a,value:c},{type:b,tag:w,props:{id:E},children:[{type:b,tag:k,props:{href:"#writing-code-to-trigger-component-action-manually",ariaHidden:m,tabIndex:n},children:[{type:b,tag:o,props:{className:[p,q]},children:[]}]},{type:a,value:F}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"You can trigger events such as "},{type:b,tag:f,props:{},children:[{type:a,value:J}]},{type:a,value:" not only by the user but also with code manually. It can be used to display the tooltip, select the legend."}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"In ECharts "},{type:b,tag:f,props:{},children:[{type:a,value:"myChart.dispatchAction({ type: '' })"}]},{type:a,value:" is used to trigger the behavior. This manages all actions and can record the behaviors conveniently."}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Commonly used behavior and corresponding parameters are listed in "},{type:b,tag:k,props:{href:"https:\u002F\u002Fecharts.apache.org\u002F\u002Fapi.html#action",rel:[s,t,u],target:v},children:[{type:a,value:"action"}]},{type:a,value:y}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"The following example shows how to highlight each sector one by one in the pie chart using "},{type:b,tag:f,props:{},children:[{type:a,value:"dispatchAction"}]},{type:a,value:y}]},{type:a,value:c},{type:b,tag:g,props:{className:[h]},children:[{type:b,tag:"md-live",props:{lang:i,layout:"tb"},children:[{type:a,value:"option = {\n tooltip: {\n trigger: 'item',\n formatter: '{a} \u003Cbr\u002F\u003E{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"}]}]},{type:a,value:c},{type:b,tag:w,props:{id:G},children:[{type:b,tag:k,props:{href:"#listen-to-events-on-the-blank-area",ariaHidden:m,tabIndex:n},children:[{type:b,tag:o,props:{className:[p,q]},children:[]}]},{type:a,value:H}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Sometimes 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."}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Before we talk about this feature, we need to clarify two kinds of events: zrender events and echarts events."}]},{type:a,value:c},{type:b,tag:g,props:{className:[h]},children:[{type:b,tag:j,props:{lang:i,"line-highlights":d,"file-name":d},children:[{type:a,value:"myChart.getZr().on('click', function(event) {\n \u002F\u002F This listener is listening to a `zrender event`.\n});\nmyChart.on('click', function(event) {\n \u002F\u002F This listener is listening to a `echarts event`.\n});\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"zrender events are different from echarts events. The former one are triggered when mouse\u002Fpointer is at everywhere, while the latter one can only be triggered when mouse\u002Fpointer 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."}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Having zrender events, we can implement listen to events from the blank as follows:"}]},{type:a,value:c},{type:b,tag:g,props:{className:[h]},children:[{type:b,tag:j,props:{lang:i,"line-highlights":d,"file-name":d},children:[{type:a,value:"myChart.getZr().on('click', function(event) {\n \u002F\u002F No \"target\" means that mouse\u002Fpointer is not on\n \u002F\u002F any of the graphic elements, which is \"blank\".\n if (!event.target) {\n \u002F\u002F Click on blank. Do something.\n }\n});\n"}]}]}]},dir:"\u002Fen\u002Fconcepts",path:"\u002Fen\u002Fconcepts\u002Fevent",extension:".md",createdAt:O,updatedAt:O},postPath:"en\u002Fconcepts\u002Fevent"}],fetch:{},mutations:[]}}("text","element","\n","","p","code","div","nuxt-content-highlight","js","md-code-block","a",", ","true",-1,"span","icon","icon-link",2,"nofollow","noopener","noreferrer","_blank","h2","query",".","For example:","handling-the-mouse-events","Handling the Mouse Events","event-of-component-interaction","Event of Component Interaction","writing-code-to-trigger-component-action-manually","Writing Code to Trigger Component Action Manually","listen-to-events-on-the-blank-area","Listen to Events on the Blank Area","https:\u002F\u002Fecharts.apache.org\u002Fapi.html#events.legendselectchanged","'legendselectchanged'","string"," or ","Object","If it is ","2021-08-02T05:33:02.867Z"))); |