| <!doctype html> |
| <html data-n-head-ssr> |
| <head> |
| <link rel="stylesheet" type="text/css" href="https://fastly.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> |
| <link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css"> |
| <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"> |
| <title>Event and Action - Concepts - Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://echarts.apache.org/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/4d2a12b.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/fa73816a85b29fbf7562.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8117eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/b964c20bb1562bc48da6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1f3ef45.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/60d2f1dbd961abb7604b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/ba9ec8a.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/43cd67c0cf5a9d972051.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/3556c50.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9d86a6602b3f4dd6c979.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/8117eb7.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1f3ef45.css"><link rel="stylesheet" href="/handbook/_nuxt/css/ba9ec8a.css"><link rel="stylesheet" href="/handbook/_nuxt/css/3556c50.css"> |
| </head> |
| <body> |
| <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">Migration from v4 to v5</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-3-0" class="nav-link"><span class="title">5.3</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-4-0" class="nav-link"><span class="title">5.4</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Animation</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/animation/transition" class="nav-link"><span class="title">Data Transition</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/interaction/coarse-pointer" class="nav-link"><span class="title">Intelligent Pointer Snapping</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practices/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="event-and-action" tabindex="-1">Event and Action</h1> <p>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.</p> <p>The name of the event and the DOM event is both lowercase string. Here is an example of binding listening to <code>click</code> event.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>myChart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token comment">// Print name in console</span> |
| console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>params<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>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 <a href="https://echarts.apache.org/api.html#events.legendselectchanged">'legendselectchanged'</a> triggered while changing the legend selected (please notice that <code>legendselected</code> won't be triggered in this situation), <a href="https://echarts.apache.org/api.html#events.legendselectchanged">'datazoom'</a> triggered while zooming the data area.</p> <h2 id="handling-the-mouse-events" tabindex="-1">Handling the Mouse Events</h2> <p>ECharts support general mouse events: <code>'click'</code>, <code>'dblclick'</code>, <code>'mousedown'</code>, <code>'mousemove'</code>, <code>'mouseup'</code>, <code>'mouseover'</code>, <code>'mouseout'</code>, <code>'globalout'</code>, <code>'contextmenu'</code>. This is an example of opening the search result page after clicking the bar chart.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// Init the ECharts base on DOM</span> |
| <span class="token keyword">var</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| |
| <span class="token comment">// Config</span> |
| <span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token string">'Shirt'</span><span class="token punctuation">,</span> |
| <span class="token string">'Wool sweater'</span><span class="token punctuation">,</span> |
| <span class="token string">'Chiffon shirt'</span><span class="token punctuation">,</span> |
| <span class="token string">'Pants'</span><span class="token punctuation">,</span> |
| <span class="token string">'High-heeled shoes'</span><span class="token punctuation">,</span> |
| <span class="token string">'socks'</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Sales'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span> |
| <span class="token comment">// Use the option and data to display the chart</span> |
| myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token comment">// Click and jump to Baidu search website</span> |
| myChart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span> |
| <span class="token string">'https://www.google.com/search?q='</span> <span class="token operator">+</span> <span class="token function">encodeURIComponent</span><span class="token punctuation">(</span>params<span class="token punctuation">.</span>name<span class="token punctuation">)</span> |
| <span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>All mouse events included <code>params</code> which contained the data of the object.</p> <p>Format:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>type EventParams <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token comment">// The component name clicked,</span> |
| <span class="token comment">// component type, could be 'series'、'markLine'、'markPoint'、'timeLine', etc..</span> |
| <span class="token literal-property property">componentType</span><span class="token operator">:</span> string<span class="token punctuation">,</span> |
| <span class="token comment">// series type, could be 'line'、'bar'、'pie', etc.. Works when componentType is 'series'.</span> |
| <span class="token literal-property property">seriesType</span><span class="token operator">:</span> string<span class="token punctuation">,</span> |
| <span class="token comment">// the index in option.series. Works when componentType is 'series'.</span> |
| <span class="token literal-property property">seriesIndex</span><span class="token operator">:</span> number<span class="token punctuation">,</span> |
| <span class="token comment">// series name, works when componentType is 'series'.</span> |
| <span class="token literal-property property">seriesName</span><span class="token operator">:</span> string<span class="token punctuation">,</span> |
| <span class="token comment">// name of data (categories).</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> string<span class="token punctuation">,</span> |
| <span class="token comment">// the index in 'data' array.</span> |
| <span class="token literal-property property">dataIndex</span><span class="token operator">:</span> number<span class="token punctuation">,</span> |
| <span class="token comment">// incoming raw data item</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> Object<span class="token punctuation">,</span> |
| <span class="token comment">// charts like 'sankey' and 'graph' included nodeData and edgeData as the same time.</span> |
| <span class="token comment">// dataType can be 'node' or 'edge', indicates whether the current click is on node or edge.</span> |
| <span class="token comment">// most of charts have one kind of data, the dataType is meaningless</span> |
| <span class="token literal-property property">dataType</span><span class="token operator">:</span> string<span class="token punctuation">,</span> |
| <span class="token comment">// incoming data value</span> |
| <span class="token literal-property property">value</span><span class="token operator">:</span> number <span class="token operator">|</span> Array<span class="token punctuation">,</span> |
| <span class="token comment">// color of the shape, works when componentType is 'series'.</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> string |
| <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Identify where the mouse clicked.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>myChart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">if</span> <span class="token punctuation">(</span>params<span class="token punctuation">.</span>componentType <span class="token operator">===</span> <span class="token string">'markPoint'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token comment">// Clicked on the markPoint</span> |
| <span class="token keyword">if</span> <span class="token punctuation">(</span>params<span class="token punctuation">.</span>seriesIndex <span class="token operator">===</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token comment">// clicked on the markPoint of the series with index = 5</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>params<span class="token punctuation">.</span>componentType <span class="token operator">===</span> <span class="token string">'series'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">if</span> <span class="token punctuation">(</span>params<span class="token punctuation">.</span>seriesType <span class="token operator">===</span> <span class="token string">'graph'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">if</span> <span class="token punctuation">(</span>params<span class="token punctuation">.</span>dataType <span class="token operator">===</span> <span class="token string">'edge'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token comment">// clicked at the edge of graph.</span> |
| <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> |
| <span class="token comment">// clicked at the node of graph.</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Use <code>query</code> to trigger callback of the specified component:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>chart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> query<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p><code>query</code> can be <code>string</code> or <code>Object</code>.</p> <p>If it is <code>string</code>, the format can be <code>mainType</code> or <code>mainType.subType</code>, such as:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>chart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token string">'series'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| chart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token string">'series.line'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| chart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token string">'dataZoom'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| chart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token string">'xAxis.category'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>If it is <code>Object</code>, <code>query</code> can include more than one attribute:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token punctuation">{</span> |
| $<span class="token punctuation">{</span>mainType<span class="token punctuation">}</span>Index<span class="token operator">:</span> number <span class="token comment">// component index</span> |
| $<span class="token punctuation">{</span>mainType<span class="token punctuation">}</span>Name<span class="token operator">:</span> string <span class="token comment">// component name</span> |
| $<span class="token punctuation">{</span>mainType<span class="token punctuation">}</span>Id<span class="token operator">:</span> string <span class="token comment">// component id</span> |
| <span class="token literal-property property">dataIndex</span><span class="token operator">:</span> number <span class="token comment">// data item index</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> string <span class="token comment">// data item name</span> |
| <span class="token literal-property property">dataType</span><span class="token operator">:</span> string <span class="token comment">// date item type, such as 'node', 'edge'</span> |
| <span class="token literal-property property">element</span><span class="token operator">:</span> string <span class="token comment">// name of element in custom series.</span> |
| <span class="token punctuation">}</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Such as:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| <span class="token comment">// ...</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'uuu'</span> |
| <span class="token comment">// ...</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| chart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'mouseover'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">seriesName</span><span class="token operator">:</span> <span class="token string">'uuu'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token comment">// when elements in series named 'uuu' triggered 'mouseover'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>For example:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| <span class="token comment">// ...</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token comment">// ...</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token comment">// ...</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'xx'</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">121</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'yy'</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">33</span> <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| chart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'mouseover'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">seriesIndex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'xx'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token comment">// when data named 'xx' in series index 1 triggered 'mouseover'.</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>For example:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| <span class="token comment">// ...</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'graph'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">nodes</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">edges</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| chart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">dataType</span><span class="token operator">:</span> <span class="token string">'node'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token comment">// call this method while the node of graph was clicked.</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| chart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">dataType</span><span class="token operator">:</span> <span class="token string">'edge'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token comment">// call this method while the edge of graph was clicked.</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>For example:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| <span class="token comment">// ...</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token comment">// ...</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'custom'</span><span class="token punctuation">,</span> |
| <span class="token function-variable function">renderItem</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">params<span class="token punctuation">,</span> api</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'group'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'circle'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'my_el'</span> |
| <span class="token comment">// ...</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token comment">// ...</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">33</span><span class="token punctuation">]</span><span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| chart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'mouseup'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token string">'my_el'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token comment">// when data named 'my_el' triggered 'mouseup'.</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>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:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>myChart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">parmas</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| $<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'detail?q='</span> <span class="token operator">+</span> params<span class="token punctuation">.</span>name<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">detail</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span> |
| <span class="token comment">// using pie chart to show the data distribution in one column.</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span>detail<span class="token punctuation">.</span>data<span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="event-of-component-interaction" tabindex="-1">Event of Component Interaction</h2> <p>All Component Interaction in ECharts will trigger a corresponding event. Normal events and parameters are listed in the <a href="https://echarts.apache.org//api.html#events">events</a> document.</p> <p>Here is an example of listening to legend event:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// Show/hide the legend only trigger legendselectchanged event</span> |
| myChart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'legendselectchanged'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token comment">// State if legend is selected.</span> |
| <span class="token keyword">var</span> isSelected <span class="token operator">=</span> params<span class="token punctuation">.</span>selected<span class="token punctuation">[</span>params<span class="token punctuation">.</span>name<span class="token punctuation">]</span><span class="token punctuation">;</span> |
| <span class="token comment">// print in the console.</span> |
| console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> |
| <span class="token punctuation">(</span>isSelected <span class="token operator">?</span> <span class="token string">'Selected'</span> <span class="token operator">:</span> <span class="token string">'Not Selected'</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'legend'</span> <span class="token operator">+</span> params<span class="token punctuation">.</span>name |
| <span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token comment">// print for all legends.</span> |
| console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>params<span class="token punctuation">.</span>selected<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="writing-code-to-trigger-component-action-manually" tabindex="-1">Writing Code to Trigger Component Action Manually</h2> <p>You can trigger events such as <code>'legendselectchanged'</code> not only by the user but also with code manually. It can be used to display the tooltip, select the legend.</p> <p>In ECharts <code>myChart.dispatchAction({ type: '' })</code> is used to trigger the behavior. This manages all actions and can record the behaviors conveniently.</p> <p>Commonly used behavior and corresponding parameters are listed in <a href="https://echarts.apache.org//api.html#action">action</a>.</p> <p>The following example shows how to highlight each sector one by one in the pie chart using <code>dispatchAction</code>.</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = { |
| tooltip: { |
| trigger: 'item', |
| formatter: '{a} <br/>{b} : {c} ({d}%)' |
| }, |
| legend: { |
| orient: 'vertical', |
| left: 'left', |
| data: [ |
| 'Direct Access', |
| 'Email Marketing', |
| 'Affiliate Ads', |
| 'Video Ads', |
| 'Search Engines' |
| ] |
| }, |
| series: [ |
| { |
| name: 'Access Source', |
| type: 'pie', |
| radius: '55%', |
| center: ['50%', '60%'], |
| data: [ |
| { value: 335, name: 'Direct Access' }, |
| { value: 310, name: 'Email Marketing' }, |
| { value: 234, name: 'Affiliate Ads' }, |
| { value: 135, name: 'Video Ads' }, |
| { value: 1548, name: 'Search Engines' } |
| ], |
| emphasis: { |
| itemStyle: { |
| shadowBlur: 10, |
| shadowOffsetX: 0, |
| shadowColor: 'rgba(0, 0, 0, 0.5)' |
| } |
| } |
| } |
| ] |
| }; |
| |
| let currentIndex = -1; |
| |
| setInterval(function() { |
| var dataLen = option.series[0].data.length; |
| myChart.dispatchAction({ |
| type: 'downplay', |
| seriesIndex: 0, |
| dataIndex: currentIndex |
| }); |
| currentIndex = (currentIndex + 1) % dataLen; |
| myChart.dispatchAction({ |
| type: 'highlight', |
| seriesIndex: 0, |
| dataIndex: currentIndex |
| }); |
| myChart.dispatchAction({ |
| type: 'showTip', |
| seriesIndex: 0, |
| dataIndex: currentIndex |
| }); |
| }, 1000);</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">'item'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">formatter</span><span class="token operator">:</span> <span class="token string">'{a} <br/>{b} : {c} ({d}%)'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">legend</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">orient</span><span class="token operator">:</span> <span class="token string">'vertical'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token string">'Direct Access'</span><span class="token punctuation">,</span> |
| <span class="token string">'Email Marketing'</span><span class="token punctuation">,</span> |
| <span class="token string">'Affiliate Ads'</span><span class="token punctuation">,</span> |
| <span class="token string">'Video Ads'</span><span class="token punctuation">,</span> |
| <span class="token string">'Search Engines'</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Access Source'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">radius</span><span class="token operator">:</span> <span class="token string">'55%'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">center</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'50%'</span><span class="token punctuation">,</span> <span class="token string">'60%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">335</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Direct Access'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">310</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Email Marketing'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">234</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Affiliate Ads'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">135</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Video Ads'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1548</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Search Engines'</span> <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">emphasis</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">itemStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">shadowBlur</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">shadowOffsetX</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">shadowColor</span><span class="token operator">:</span> <span class="token string">'rgba(0, 0, 0, 0.5)'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span> |
| |
| <span class="token keyword">let</span> currentIndex <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span> |
| |
| <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">var</span> dataLen <span class="token operator">=</span> option<span class="token punctuation">.</span>series<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>length<span class="token punctuation">;</span> |
| myChart<span class="token punctuation">.</span><span class="token function">dispatchAction</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'downplay'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">seriesIndex</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">dataIndex</span><span class="token operator">:</span> currentIndex |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| currentIndex <span class="token operator">=</span> <span class="token punctuation">(</span>currentIndex <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">%</span> dataLen<span class="token punctuation">;</span> |
| myChart<span class="token punctuation">.</span><span class="token function">dispatchAction</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'highlight'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">seriesIndex</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">dataIndex</span><span class="token operator">:</span> currentIndex |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| myChart<span class="token punctuation">.</span><span class="token function">dispatchAction</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'showTip'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">seriesIndex</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">dataIndex</span><span class="token operator">:</span> currentIndex |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="listen-to-events-on-the-blank-area" tabindex="-1">Listen to Events on the Blank Area</h2> <p>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.</p> <p>Before we talk about this feature, we need to clarify two kinds of events: zrender events and echarts events.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>myChart<span class="token punctuation">.</span><span class="token function">getZr</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token comment">// This listener is listening to a `zrender event`.</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| myChart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token comment">// This listener is listening to a `echarts event`.</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>zrender 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.</p> <p>Having zrender events, we can implement listen to events from the blank as follows:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>myChart<span class="token punctuation">.</span><span class="token function">getZr</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token comment">// No "target" means that mouse/pointer is not on</span> |
| <span class="token comment">// any of the graphic elements, which is "blank".</span> |
| <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>event<span class="token punctuation">.</span>target<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token comment">// Click on blank. Do something.</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">Contributors</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/concepts/event.md" title="Edit this Document" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">Edit this page on GitHub</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60" loading="lazy"> <span>pissang</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60" loading="lazy"> <span>Ovilia</span></a><a href="https://github.com/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60" loading="lazy"> <span>100pah</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//fastly.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,g,l,d,n,a,c,I,o,r,C,h,s,b,A,p,Z,m,G,B,y,u,W,w,X,v,Y,V,K,J,H,L,k,R,N,F,S,f,U,z,j,x,T,Q,M,E,D,O,P,_,q,$,ee,te,ie,ge){return{layout:"default",data:[{html:'<h1 id="event-and-action" tabindex="-1">Event and Action</h1>\n<p>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.</p>\n<p>The name of the event and the DOM event is both lowercase string. Here is an example of binding listening to <code>click</code> event.</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihwYXJhbXMpIHsKICAvLyBQcmludCBuYW1lIGluIGNvbnNvbGUKICBjb25zb2xlLmxvZyhwYXJhbXMubmFtZSk7Cn0pOw\'" line-highlights="\'\'" />\n<p>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 <a href="https://echarts.apache.org/api.html#events.legendselectchanged">\'legendselectchanged\'</a> triggered while changing the legend selected (please notice that <code>legendselected</code> won\'t be triggered in this situation), <a href="https://echarts.apache.org/api.html#events.legendselectchanged">\'datazoom\'</a> triggered while zooming the data area.</p>\n<h2 id="handling-the-mouse-events" tabindex="-1">Handling the Mouse Events</h2>\n<p>ECharts support general mouse events: <code>\'click\'</code>, <code>\'dblclick\'</code>, <code>\'mousedown\'</code>, <code>\'mousemove\'</code>, <code>\'mouseup\'</code>, <code>\'mouseover\'</code>, <code>\'mouseout\'</code>, <code>\'globalout\'</code>, <code>\'contextmenu\'</code>. This is an example of opening the search result page after clicking the bar chart.</p>\n<md-code-block lang="js" code="\'Ly8gSW5pdCB0aGUgRUNoYXJ0cyBiYXNlIG9uIERPTQp2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpKTsKCi8vIENvbmZpZwp2YXIgb3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbCiAgICAgICdTaGlydCcsCiAgICAgICdXb29sIHN3ZWF0ZXInLAogICAgICAnQ2hpZmZvbiBzaGlydCcsCiAgICAgICdQYW50cycsCiAgICAgICdIaWdoLWhlZWxlZCBzaG9lcycsCiAgICAgICdzb2NrcycKICAgIF0KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ1NhbGVzJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGRhdGE6IFs1LCAyMCwgMzYsIDEwLCAxMCwgMjBdCiAgICB9CiAgXQp9OwovLyBVc2UgdGhlIG9wdGlvbiBhbmQgZGF0YSB0byBkaXNwbGF5IHRoZSBjaGFydApteUNoYXJ0LnNldE9wdGlvbihvcHRpb24pOwovLyBDbGljayBhbmQganVtcCB0byBCYWlkdSBzZWFyY2ggd2Vic2l0ZQpteUNoYXJ0Lm9uKCdjbGljaycsIGZ1bmN0aW9uKHBhcmFtcykgewogIHdpbmRvdy5vcGVuKAogICAgJ2h0dHBzOi8vd3d3Lmdvb2dsZS5jb20vc2VhcmNoP3E9JyArIGVuY29kZVVSSUNvbXBvbmVudChwYXJhbXMubmFtZSkKICApOwp9KTs\'" line-highlights="\'\'" />\n<p>All mouse events included <code>params</code> which contained the data of the object.</p>\n<p>Format:</p>\n<md-code-block lang="js" code="\'dHlwZSBFdmVudFBhcmFtcyA9IHsKICAvLyBUaGUgY29tcG9uZW50IG5hbWUgY2xpY2tlZCwKICAvLyBjb21wb25lbnQgdHlwZSwgY291bGQgYmUgJ3NlcmllcyfjgIEnbWFya0xpbmUn44CBJ21hcmtQb2ludCfjgIEndGltZUxpbmUnLCBldGMuLgogIGNvbXBvbmVudFR5cGU6IHN0cmluZywKICAvLyBzZXJpZXMgdHlwZSwgY291bGQgYmUgJ2xpbmUn44CBJ2JhcifjgIEncGllJywgZXRjLi4gV29ya3Mgd2hlbiBjb21wb25lbnRUeXBlIGlzICdzZXJpZXMnLgogIHNlcmllc1R5cGU6IHN0cmluZywKICAvLyB0aGUgaW5kZXggaW4gb3B0aW9uLnNlcmllcy4gV29ya3Mgd2hlbiBjb21wb25lbnRUeXBlIGlzICdzZXJpZXMnLgogIHNlcmllc0luZGV4OiBudW1iZXIsCiAgLy8gc2VyaWVzIG5hbWUsIHdvcmtzIHdoZW4gY29tcG9uZW50VHlwZSBpcyAnc2VyaWVzJy4KICBzZXJpZXNOYW1lOiBzdHJpbmcsCiAgLy8gbmFtZSBvZiBkYXRhIChjYXRlZ29yaWVzKS4KICBuYW1lOiBzdHJpbmcsCiAgLy8gdGhlIGluZGV4IGluICdkYXRhJyBhcnJheS4KICBkYXRhSW5kZXg6IG51bWJlciwKICAvLyBpbmNvbWluZyByYXcgZGF0YSBpdGVtCiAgZGF0YTogT2JqZWN0LAogIC8vIGNoYXJ0cyBsaWtlICdzYW5rZXknIGFuZCAnZ3JhcGgnIGluY2x1ZGVkIG5vZGVEYXRhIGFuZCBlZGdlRGF0YSBhcyB0aGUgc2FtZSB0aW1lLgogIC8vIGRhdGFUeXBlIGNhbiBiZSAnbm9kZScgb3IgJ2VkZ2UnLCBpbmRpY2F0ZXMgd2hldGhlciB0aGUgY3VycmVudCBjbGljayBpcyBvbiBub2RlIG9yIGVkZ2UuCiAgLy8gbW9zdCBvZiBjaGFydHMgaGF2ZSBvbmUga2luZCBvZiBkYXRhLCB0aGUgZGF0YVR5cGUgaXMgbWVhbmluZ2xlc3MKICBkYXRhVHlwZTogc3RyaW5nLAogIC8vIGluY29taW5nIGRhdGEgdmFsdWUKICB2YWx1ZTogbnVtYmVyIHwgQXJyYXksCiAgLy8gY29sb3Igb2YgdGhlIHNoYXBlLCB3b3JrcyB3aGVuIGNvbXBvbmVudFR5cGUgaXMgJ3NlcmllcycuCiAgY29sb3I6IHN0cmluZwp9Ow\'" line-highlights="\'\'" />\n<p>Identify where the mouse clicked.</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihwYXJhbXMpIHsKICBpZiAocGFyYW1zLmNvbXBvbmVudFR5cGUgPT09ICdtYXJrUG9pbnQnKSB7CiAgICAvLyBDbGlja2VkIG9uIHRoZSBtYXJrUG9pbnQKICAgIGlmIChwYXJhbXMuc2VyaWVzSW5kZXggPT09IDUpIHsKICAgICAgLy8gY2xpY2tlZCBvbiB0aGUgbWFya1BvaW50IG9mIHRoZSBzZXJpZXMgd2l0aCBpbmRleCA9IDUKICAgIH0KICB9IGVsc2UgaWYgKHBhcmFtcy5jb21wb25lbnRUeXBlID09PSAnc2VyaWVzJykgewogICAgaWYgKHBhcmFtcy5zZXJpZXNUeXBlID09PSAnZ3JhcGgnKSB7CiAgICAgIGlmIChwYXJhbXMuZGF0YVR5cGUgPT09ICdlZGdlJykgewogICAgICAgIC8vIGNsaWNrZWQgYXQgdGhlIGVkZ2Ugb2YgZ3JhcGguCiAgICAgIH0gZWxzZSB7CiAgICAgICAgLy8gY2xpY2tlZCBhdCB0aGUgbm9kZSBvZiBncmFwaC4KICAgICAgfQogICAgfQogIH0KfSk7\'" line-highlights="\'\'" />\n<p>Use <code>query</code> to trigger callback of the specified component:</p>\n<md-code-block lang="js" code="\'Y2hhcnQub24oZXZlbnROYW1lLCBxdWVyeSwgaGFuZGxlcik7\'" line-highlights="\'\'" />\n<p><code>query</code> can be <code>string</code> or <code>Object</code>.</p>\n<p>If it is <code>string</code>, the format can be <code>mainType</code> or <code>mainType.subType</code>, such as:</p>\n<md-code-block lang="js" code="\'Y2hhcnQub24oJ2NsaWNrJywgJ3NlcmllcycsIGZ1bmN0aW9uICgpIHsuLi59KTsKY2hhcnQub24oJ2NsaWNrJywgJ3Nlcmllcy5saW5lJywgZnVuY3Rpb24gKCkgey4uLn0pOwpjaGFydC5vbignY2xpY2snLCAnZGF0YVpvb20nLCBmdW5jdGlvbiAoKSB7Li4ufSk7CmNoYXJ0Lm9uKCdjbGljaycsICd4QXhpcy5jYXRlZ29yeScsIGZ1bmN0aW9uICgpIHsuLi59KTs\'" line-highlights="\'\'" />\n<p>If it is <code>Object</code>, <code>query</code> can include more than one attribute:</p>\n<md-code-block lang="js" code="\'ewogICR7bWFpblR5cGV9SW5kZXg6IG51bWJlciAvLyBjb21wb25lbnQgaW5kZXgKICAke21haW5UeXBlfU5hbWU6IHN0cmluZyAvLyBjb21wb25lbnQgbmFtZQogICR7bWFpblR5cGV9SWQ6IHN0cmluZyAvLyBjb21wb25lbnQgaWQKICBkYXRhSW5kZXg6IG51bWJlciAvLyBkYXRhIGl0ZW0gaW5kZXgKICBuYW1lOiBzdHJpbmcgLy8gZGF0YSBpdGVtIG5hbWUKICBkYXRhVHlwZTogc3RyaW5nIC8vIGRhdGUgaXRlbSB0eXBlLCBzdWNoIGFzICdub2RlJywgJ2VkZ2UnCiAgZWxlbWVudDogc3RyaW5nIC8vIG5hbWUgb2YgZWxlbWVudCBpbiBjdXN0b20gc2VyaWVzLgp9\'" line-highlights="\'\'" />\n<p>Such as:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ3V1dScKICAgICAgLy8gLi4uCiAgICB9CiAgXQp9KTsKY2hhcnQub24oJ21vdXNlb3ZlcicsIHsgc2VyaWVzTmFtZTogJ3V1dScgfSwgZnVuY3Rpb24oKSB7CiAgLy8gd2hlbiBlbGVtZW50cyBpbiBzZXJpZXMgbmFtZWQgJ3V1dScgdHJpZ2dlcmVkICdtb3VzZW92ZXInCn0pOw\'" line-highlights="\'\'" />\n<p>For example:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IFsKICAgIHsKICAgICAgLy8gLi4uCiAgICB9LAogICAgewogICAgICAvLyAuLi4KICAgICAgZGF0YTogWwogICAgICAgIHsgbmFtZTogJ3h4JywgdmFsdWU6IDEyMSB9LAogICAgICAgIHsgbmFtZTogJ3l5JywgdmFsdWU6IDMzIH0KICAgICAgXQogICAgfQogIF0KfSk7CmNoYXJ0Lm9uKCdtb3VzZW92ZXInLCB7IHNlcmllc0luZGV4OiAxLCBuYW1lOiAneHgnIH0sIGZ1bmN0aW9uKCkgewogIC8vIHdoZW4gZGF0YSBuYW1lZCAneHgnIGluIHNlcmllcyBpbmRleCAxIHRyaWdnZXJlZCAnbW91c2VvdmVyJy4KfSk7\'" line-highlights="\'\'" />\n<p>For example:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2dyYXBoJywKICAgICAgbm9kZXM6IFsKICAgICAgICB7IG5hbWU6ICdhJywgdmFsdWU6IDEwIH0sCiAgICAgICAgeyBuYW1lOiAnYicsIHZhbHVlOiAyMCB9CiAgICAgIF0sCiAgICAgIGVkZ2VzOiBbeyBzb3VyY2U6IDAsIHRhcmdldDogMSB9XQogICAgfQogIF0KfSk7CmNoYXJ0Lm9uKCdjbGljaycsIHsgZGF0YVR5cGU6ICdub2RlJyB9LCBmdW5jdGlvbigpIHsKICAvLyBjYWxsIHRoaXMgbWV0aG9kIHdoaWxlIHRoZSBub2RlIG9mIGdyYXBoIHdhcyBjbGlja2VkLgp9KTsKY2hhcnQub24oJ2NsaWNrJywgeyBkYXRhVHlwZTogJ2VkZ2UnIH0sIGZ1bmN0aW9uKCkgewogIC8vIGNhbGwgdGhpcyBtZXRob2Qgd2hpbGUgdGhlIGVkZ2Ugb2YgZ3JhcGggd2FzIGNsaWNrZWQuCn0pOw\'" line-highlights="\'\'" />\n<p>For example:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IHsKICAgIC8vIC4uLgogICAgdHlwZTogJ2N1c3RvbScsCiAgICByZW5kZXJJdGVtOiBmdW5jdGlvbihwYXJhbXMsIGFwaSkgewogICAgICByZXR1cm4gewogICAgICAgIHR5cGU6ICdncm91cCcsCiAgICAgICAgY2hpbGRyZW46IFsKICAgICAgICAgIHsKICAgICAgICAgICAgdHlwZTogJ2NpcmNsZScsCiAgICAgICAgICAgIG5hbWU6ICdteV9lbCcKICAgICAgICAgICAgLy8gLi4uCiAgICAgICAgICB9LAogICAgICAgICAgewogICAgICAgICAgICAvLyAuLi4KICAgICAgICAgIH0KICAgICAgICBdCiAgICAgIH07CiAgICB9LAogICAgZGF0YTogW1sxMiwgMzNdXQogIH0KfSk7CmNoYXJ0Lm9uKCdtb3VzZXVwJywgeyBlbGVtZW50OiAnbXlfZWwnIH0sIGZ1bmN0aW9uKCkgewogIC8vIHdoZW4gZGF0YSBuYW1lZCAnbXlfZWwnIHRyaWdnZXJlZCAnbW91c2V1cCcuCn0pOw\'" line-highlights="\'\'" />\n<p>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:</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihwYXJtYXMpIHsKICAkLmdldCgnZGV0YWlsP3E9JyArIHBhcmFtcy5uYW1lLCBmdW5jdGlvbihkZXRhaWwpIHsKICAgIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgICAgc2VyaWVzOiBbCiAgICAgICAgewogICAgICAgICAgbmFtZTogJ3BpZScsCiAgICAgICAgICAvLyB1c2luZyBwaWUgY2hhcnQgdG8gc2hvdyB0aGUgZGF0YSBkaXN0cmlidXRpb24gaW4gb25lIGNvbHVtbi4KICAgICAgICAgIGRhdGE6IFtkZXRhaWwuZGF0YV0KICAgICAgICB9CiAgICAgIF0KICAgIH0pOwogIH0pOwp9KTs\'" line-highlights="\'\'" />\n<h2 id="event-of-component-interaction" tabindex="-1">Event of Component Interaction</h2>\n<p>All Component Interaction in ECharts will trigger a corresponding event. Normal events and parameters are listed in the <a href="https://echarts.apache.org//api.html#events">events</a> document.</p>\n<p>Here is an example of listening to legend event:</p>\n<md-code-block lang="js" code="\'Ly8gU2hvdy9oaWRlIHRoZSBsZWdlbmQgb25seSB0cmlnZ2VyIGxlZ2VuZHNlbGVjdGNoYW5nZWQgZXZlbnQKbXlDaGFydC5vbignbGVnZW5kc2VsZWN0Y2hhbmdlZCcsIGZ1bmN0aW9uKHBhcmFtcykgewogIC8vIFN0YXRlIGlmIGxlZ2VuZCBpcyBzZWxlY3RlZC4KICB2YXIgaXNTZWxlY3RlZCA9IHBhcmFtcy5zZWxlY3RlZFtwYXJhbXMubmFtZV07CiAgLy8gcHJpbnQgaW4gdGhlIGNvbnNvbGUuCiAgY29uc29sZS5sb2coCiAgICAoaXNTZWxlY3RlZCA_ICdTZWxlY3RlZCcgOiAnTm90IFNlbGVjdGVkJykgKyAnbGVnZW5kJyArIHBhcmFtcy5uYW1lCiAgKTsKICAvLyBwcmludCBmb3IgYWxsIGxlZ2VuZHMuCiAgY29uc29sZS5sb2cocGFyYW1zLnNlbGVjdGVkKTsKfSk7\'" line-highlights="\'\'" />\n<h2 id="writing-code-to-trigger-component-action-manually" tabindex="-1">Writing Code to Trigger Component Action Manually</h2>\n<p>You can trigger events such as <code>\'legendselectchanged\'</code> not only by the user but also with code manually. It can be used to display the tooltip, select the legend.</p>\n<p>In ECharts <code>myChart.dispatchAction({ type: \'\' })</code> is used to trigger the behavior. This manages all actions and can record the behaviors conveniently.</p>\n<p>Commonly used behavior and corresponding parameters are listed in <a href="https://echarts.apache.org//api.html#action">action</a>.</p>\n<p>The following example shows how to highlight each sector one by one in the pie chart using <code>dispatchAction</code>.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRvb2x0aXA6IHsKICAgIHRyaWdnZXI6ICdpdGVtJywKICAgIGZvcm1hdHRlcjogJ3thfSA8YnIvPntifSA6IHtjfSAoe2R9JSknCiAgfSwKICBsZWdlbmQ6IHsKICAgIG9yaWVudDogJ3ZlcnRpY2FsJywKICAgIGxlZnQ6ICdsZWZ0JywKICAgIGRhdGE6IFsKICAgICAgJ0RpcmVjdCBBY2Nlc3MnLAogICAgICAnRW1haWwgTWFya2V0aW5nJywKICAgICAgJ0FmZmlsaWF0ZSBBZHMnLAogICAgICAnVmlkZW8gQWRzJywKICAgICAgJ1NlYXJjaCBFbmdpbmVzJwogICAgXQogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICdBY2Nlc3MgU291cmNlJywKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIHJhZGl1czogJzU1JScsCiAgICAgIGNlbnRlcjogWyc1MCUnLCAnNjAlJ10sCiAgICAgIGRhdGE6IFsKICAgICAgICB7IHZhbHVlOiAzMzUsIG5hbWU6ICdEaXJlY3QgQWNjZXNzJyB9LAogICAgICAgIHsgdmFsdWU6IDMxMCwgbmFtZTogJ0VtYWlsIE1hcmtldGluZycgfSwKICAgICAgICB7IHZhbHVlOiAyMzQsIG5hbWU6ICdBZmZpbGlhdGUgQWRzJyB9LAogICAgICAgIHsgdmFsdWU6IDEzNSwgbmFtZTogJ1ZpZGVvIEFkcycgfSwKICAgICAgICB7IHZhbHVlOiAxNTQ4LCBuYW1lOiAnU2VhcmNoIEVuZ2luZXMnIH0KICAgICAgXSwKICAgICAgZW1waGFzaXM6IHsKICAgICAgICBpdGVtU3R5bGU6IHsKICAgICAgICAgIHNoYWRvd0JsdXI6IDEwLAogICAgICAgICAgc2hhZG93T2Zmc2V0WDogMCwKICAgICAgICAgIHNoYWRvd0NvbG9yOiAncmdiYSgwLCAwLCAwLCAwLjUpJwogICAgICAgIH0KICAgICAgfQogICAgfQogIF0KfTsKCmxldCBjdXJyZW50SW5kZXggPSAtMTsKCnNldEludGVydmFsKGZ1bmN0aW9uKCkgewogIHZhciBkYXRhTGVuID0gb3B0aW9uLnNlcmllc1swXS5kYXRhLmxlbmd0aDsKICBteUNoYXJ0LmRpc3BhdGNoQWN0aW9uKHsKICAgIHR5cGU6ICdkb3ducGxheScsCiAgICBzZXJpZXNJbmRleDogMCwKICAgIGRhdGFJbmRleDogY3VycmVudEluZGV4CiAgfSk7CiAgY3VycmVudEluZGV4ID0gKGN1cnJlbnRJbmRleCArIDEpICUgZGF0YUxlbjsKICBteUNoYXJ0LmRpc3BhdGNoQWN0aW9uKHsKICAgIHR5cGU6ICdoaWdobGlnaHQnLAogICAgc2VyaWVzSW5kZXg6IDAsCiAgICBkYXRhSW5kZXg6IGN1cnJlbnRJbmRleAogIH0pOwogIG15Q2hhcnQuZGlzcGF0Y2hBY3Rpb24oewogICAgdHlwZTogJ3Nob3dUaXAnLAogICAgc2VyaWVzSW5kZXg6IDAsCiAgICBkYXRhSW5kZXg6IGN1cnJlbnRJbmRleAogIH0pOwp9LCAxMDAwKTs\'" v-bind="{}" />\n<h2 id="listen-to-events-on-the-blank-area" tabindex="-1">Listen to Events on the Blank Area</h2>\n<p>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.</p>\n<p>Before we talk about this feature, we need to clarify two kinds of events: zrender events and echarts events.</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5nZXRacigpLm9uKCdjbGljaycsIGZ1bmN0aW9uKGV2ZW50KSB7CiAgLy8gVGhpcyBsaXN0ZW5lciBpcyBsaXN0ZW5pbmcgdG8gYSBgenJlbmRlciBldmVudGAuCn0pOwpteUNoYXJ0Lm9uKCdjbGljaycsIGZ1bmN0aW9uKGV2ZW50KSB7CiAgLy8gVGhpcyBsaXN0ZW5lciBpcyBsaXN0ZW5pbmcgdG8gYSBgZWNoYXJ0cyBldmVudGAuCn0pOw\'" line-highlights="\'\'" />\n<p>zrender 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.</p>\n<p>Having zrender events, we can implement listen to events from the blank as follows:</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5nZXRacigpLm9uKCdjbGljaycsIGZ1bmN0aW9uKGV2ZW50KSB7CiAgLy8gTm8gInRhcmdldCIgbWVhbnMgdGhhdCBtb3VzZS9wb2ludGVyIGlzIG5vdCBvbgogIC8vIGFueSBvZiB0aGUgZ3JhcGhpYyBlbGVtZW50cywgd2hpY2ggaXMgImJsYW5rIi4KICBpZiAoIWV2ZW50LnRhcmdldCkgewogICAgLy8gQ2xpY2sgb24gYmxhbmsuIERvIHNvbWV0aGluZy4KICB9Cn0pOw\'" line-highlights="\'\'" />\n',postPath:"en/concepts/event",title:"Event and Action - Concepts"}],fetch:{},error:null,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:d},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:a,draft:e},{title:"寻求帮助",dir:c},{title:"版本特性",dir:I,children:[{title:"ECharts 5 特性介绍",dir:o},{title:"v4 升级 v5 指南",dir:r},{title:5.2,dir:C},{title:5.3,dir:h},{title:5.4,dir:s}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:p,draft:e},{title:"系列",dir:Z,draft:e},{title:"样式",dir:m},{title:"数据集",dir:G},{title:"数据转换",dir:B},{title:"坐标系",dir:y,draft:e},{title:"坐标轴",dir:u},{title:"视觉映射",dir:i},{title:"图例",dir:W},{title:"事件与行为",dir:w}]},{title:"应用篇",dir:X,children:[{title:"常用图表类型",dir:v,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:Y},{title:"堆叠柱状图",dir:V},{title:"动态排序柱状图",dir:K},{title:"极坐标系柱状图",dir:J,draft:e},{title:"阶梯瀑布图",dir:H},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:L,children:[{title:"基础折线图",dir:k},{title:"堆叠折线图",dir:R},{title:"区域面积图",dir:N},{title:"平滑曲线图",dir:F},{title:"阶梯线图",dir:S}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:f},{title:"圆环图",dir:U},{title:"南丁格尔图（玫瑰图）",dir:z}]},{title:"散点图",dir:j,children:[{title:"基础散点图",dir:x}]}]},{title:T,dir:t,draft:e},{title:"跨平台方案",dir:Q,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:M},{title:"数据下钻",dir:E,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:D}]},{title:"动画",dir:O,children:[{title:"数据过渡动画",dir:P}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:e},{title:"智能指针吸附",dir:$}]}]},{title:"最佳实践",dir:ee,children:[{title:T,dir:t,draft:e},{title:te,dir:ie},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ge}]}],en:[{title:"Get Started",dir:g},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:d},{title:"Import ECharts",dir:n},{title:"Resources",dir:a,draft:e},{title:"Get Help",dir:c},{title:"What's New",dir:I,children:[{title:"ECharts 5 Features",dir:o},{title:"Migration from v4 to v5",dir:r},{title:5.2,dir:C},{title:5.3,dir:h},{title:5.4,dir:s}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:p,draft:e},{title:"Series",dir:Z,draft:e},{title:"Style",dir:m},{title:"Dataset",dir:G},{title:"Data Transform",dir:B},{title:"Coordinate",dir:y,draft:e},{title:"Axis",dir:u},{title:"Visual Mapping",dir:i},{title:"Legend",dir:W},{title:"Event and Action",dir:w}]},{title:"How To Guides",dir:X,children:[{title:"Common Charts",dir:v,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:Y},{title:"Stacked Bar",dir:V},{title:"Bar Racing",dir:K},{title:"Bar Polar",dir:J,draft:e},{title:"Waterfall",dir:H}]},{title:"Line",dir:L,children:[{title:"Basic Line",dir:k},{title:"Stacked Line",dir:R},{title:"Area Chart",dir:N},{title:"Smoothed Line",dir:F},{title:"Step Line",dir:S}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:f},{title:"Ring Style",dir:U},{title:"Rose Style",dir:z}]},{title:"Scatter",dir:j,children:[{title:"Basic Scatter",dir:x}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:Q,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:M},{title:"Drilldown",dir:E,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:D}]},{title:"Animation",dir:O,children:[{title:"Data Transition",dir:P}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:e},{title:"Intelligent Pointer Snapping",dir:$}]}]},{title:"Best Practices",dir:ee,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:te,dir:ie},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ge}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:e,routePath:"/en/concepts/event",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:null}}}}(!0,"mobile","visual-map","get-started","basics","download","import","resource","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","5-3-0","5-4-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","how-to","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","dynamic-data","drilldown","rich-text","animation","transition","interaction","connect","coarse-pointer","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/4d2a12b.js" defer></script><script src="/handbook/_nuxt/js/43cd67c0cf5a9d972051.js" defer></script><script src="/handbook/_nuxt/js/9d86a6602b3f4dd6c979.js" defer></script><script src="/handbook/_nuxt/js/fa73816a85b29fbf7562.js" defer></script><script src="/handbook/_nuxt/js/b964c20bb1562bc48da6.js" defer></script><script src="/handbook/_nuxt/js/60d2f1dbd961abb7604b.js" defer></script> |
| <script type="text/javascript">document.getElementById("nav-doc").className="active"</script> |
| <script src="https://fastly.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script> |
| <script src="https://fastly.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> |
| <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> |
| <script async src="https://www.googletagmanager.com/gtag/js?id=UA-141228404-1"></script> |
| <script>var _hmt=_hmt||[];function gtag(){dataLayer.push(arguments)}!function(){var e=document.createElement("script"),t=(e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395",document.getElementsByTagName("script")[0]);t.parentNode.insertBefore(e,t)}(),window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-141228404-1")</script> |
| </body> |
| </html> |
