| <!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>事件与行为 - 概念篇 - 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="zh"><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/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1" 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/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/handbook/zh/basics/release-note/v5-upgrade-guide">v5 升级指南</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码（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/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<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">活动<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">捐赠<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">鸣谢<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("en")'>EN</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="搜索手册"> <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/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</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/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">v4 升级 v5 指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/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/zh/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/zh/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">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">事件与行为</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">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</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">柱状图</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/zh/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</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">折线图</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/zh/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</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">饼图</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/zh/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图（玫瑰图）</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">散点图</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/zh/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</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">跨平台方案</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/zh/how-to/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</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">数据处理</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/zh/how-to/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</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">标签</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/zh/how-to/label/rich-text" class="nav-link"><span class="title">富文本标签</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">动画</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/zh/how-to/animation/transition" class="nav-link"><span class="title">数据过渡动画</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">交互</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/zh/how-to/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/how-to/interaction/coarse-pointer" class="nav-link"><span class="title">智能指针吸附</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">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/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/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</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">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</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="%E4%BA%8B%E4%BB%B6%E4%B8%8E%E8%A1%8C%E4%B8%BA" tabindex="-1">事件与行为</h1> <p>在 Apache ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。</p> <p>ECharts 中的事件名称对应 DOM 事件名称，均为小写的字符串，如下是一个绑定点击操作的示例。</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">// 控制台打印数据的名称</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>在 ECharts 中事件分为两种类型，一种是用户鼠标操作点击，或者 hover 图表的图形时触发的事件，还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 <a href="https://echarts.apache.org/api.html#events.legendselectchanged">'legendselectchanged'</a> 事件（这里需要注意切换图例开关是不会触发 <code>'legendselected'</code> 事件的），数据区域缩放时触发的 <a href="https://echarts.apache.org/api.html#events.legendselectchanged">'datazoom'</a> 事件等等。</p> <h2 id="%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%A4%84%E7%90%86" tabindex="-1">鼠标事件的处理</h2> <p>ECharts 支持常规的鼠标事件类型，包括 <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> 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。</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">// 基于准备好的dom，初始化ECharts实例 |
| // var myChart = echarts.init(document.getElementById('main')); |
| |
| // 指定图表的配置项和数据 |
| var option = { |
| xAxis: { |
| data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] |
| }, |
| yAxis: {}, |
| series: [ |
| { |
| name: '销量', |
| type: 'bar', |
| data: [5, 20, 36, 10, 10, 20] |
| } |
| ] |
| }; |
| // 使用刚指定的配置项和数据显示图表。 |
| myChart.setOption(option); |
| // 处理点击事件并且跳转到相应的百度搜索页面 |
| myChart.on('click', function(params) { |
| window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name)); |
| });</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token comment">// 基于准备好的dom，初始化ECharts实例</span> |
| <span class="token comment">// var myChart = echarts.init(document.getElementById('main'));</span> |
| |
| <span class="token comment">// 指定图表的配置项和数据</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">'衬衫'</span><span class="token punctuation">,</span> <span class="token string">'羊毛衫'</span><span class="token punctuation">,</span> <span class="token string">'雪纺衫'</span><span class="token punctuation">,</span> <span class="token string">'裤子'</span><span class="token punctuation">,</span> <span class="token string">'高跟鞋'</span><span class="token punctuation">,</span> <span class="token string">'袜子'</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">'销量'</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">// 使用刚指定的配置项和数据显示图表。</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">// 处理点击事件并且跳转到相应的百度搜索页面</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.baidu.com/s?wd='</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><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> <p>所有的鼠标事件包含参数 <code>params</code>，这是一个包含点击图形的数据信息的对象，如下格式：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token keyword">type</span> <span class="token class-name">EventParams</span> <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token comment">// 当前点击的图形元素所属的组件名称，</span> |
| <span class="token comment">// 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。</span> |
| componentType<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> |
| <span class="token comment">// 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。</span> |
| seriesType<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> |
| <span class="token comment">// 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。</span> |
| seriesIndex<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> |
| <span class="token comment">// 系列名称。当 componentType 为 'series' 时有意义。</span> |
| seriesName<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> |
| <span class="token comment">// 数据名，类目名</span> |
| name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> |
| <span class="token comment">// 数据在传入的 data 数组中的 index</span> |
| dataIndex<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> |
| <span class="token comment">// 传入的原始数据项</span> |
| data<span class="token operator">:</span> Object<span class="token punctuation">;</span> |
| <span class="token comment">// sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，</span> |
| <span class="token comment">// dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。</span> |
| <span class="token comment">// 其他大部分图表中只有一种 data，dataType 无意义。</span> |
| dataType<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> |
| <span class="token comment">// 传入的数据值</span> |
| value<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token operator">|</span> <span class="token builtin">Array</span><span class="token punctuation">;</span> |
| <span class="token comment">// 数据图形的颜色。当 componentType 为 'series' 时有意义。</span> |
| color<span class="token operator">:</span> <span class="token builtin">string</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>如何区分鼠标点击到了哪里：</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">// 点击到了 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">// 点击到了 index 为 5 的 series 的 markPoint 上。</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">// 点击到了 graph 的 edge（边）上。</span> |
| <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> |
| <span class="token comment">// 点击到了 graph 的 node（节点）上。</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>使用 <code>query</code> 只对指定的组件的图形元素的触发回调：</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> 可为 <code>string</code> 或者 <code>Object</code>。</p> <p>如果为 <code>string</code> 表示组件类型。格式可以是 'mainType' 或者 'mainType.subType'。例如：</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 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 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 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 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>如果为 <code>Object</code>，可以包含以下一个或多个属性，每个属性都是可选的：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts 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> <span class="token builtin">number</span> <span class="token comment">// 组件 index</span> |
| $<span class="token punctuation">{</span>mainType<span class="token punctuation">}</span>Name<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token comment">// 组件 name</span> |
| $<span class="token punctuation">{</span>mainType<span class="token punctuation">}</span>Id<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token comment">// 组件 id</span> |
| dataIndex<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token comment">// 数据项 index</span> |
| name<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token comment">// 数据项 name</span> |
| dataType<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token comment">// 数据项 type，如关系图中的 'node', 'edge'</span> |
| element<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token comment">// 自定义系列中的 el 的 name</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>例如：</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">// series name 为 'uuu' 的系列中的图形元素被 '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>例如：</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">// series index 1 的系列中的 name 为 'xx' 的元素被 '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>例如：</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">// 关系图的节点被点击时此方法被回调。</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">// 关系图的边被点击时此方法被回调。</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>例如：</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">// name 为 'my_el' 的元素被 '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>你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息后更新图表，显示浮层等等，如下示例代码：</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">// 通过饼图表现单个柱子中的数据分布</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="%E7%BB%84%E4%BB%B6%E4%BA%A4%E4%BA%92%E7%9A%84%E8%A1%8C%E4%B8%BA%E4%BA%8B%E4%BB%B6" tabindex="-1">组件交互的行为事件</h2> <p>在 ECharts 中基本上所有的组件交互行为都会触发相应的事件，常用的事件和事件对应参数在 <a href="https://echarts.apache.org//api.html#events">events</a> 文档中有列出。</p> <p>下面是监听一个图例开关的示例：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// 图例开关的行为只会触发 legendselectchanged 事件</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">// 获取点击图例的选中状态</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">// 在控制台中打印</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">'选中了'</span> <span class="token operator">:</span> <span class="token string">'取消选中了'</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'图例'</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">// 打印所有图例的状态</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="%E4%BB%A3%E7%A0%81%E8%A7%A6%E5%8F%91-echarts-%E4%B8%AD%E7%BB%84%E4%BB%B6%E7%9A%84%E8%A1%8C%E4%B8%BA" tabindex="-1">代码触发 ECharts 中组件的行为</h2> <p>上面提到诸如 <code>'legendselectchanged'</code> 事件会由组件交互的行为触发，那除了用户的交互操作，有时候也会有需要在程序里调用方法触发图表的行为，诸如显示 tooltip，选中图例。</p> <p>在 ECharts 通过调用 <code>myChart.dispatchAction({ type: '' })</code> 触发图表行为，统一管理了所有动作，也可以方便地根据需要去记录用户的行为路径。</p> <p>常用的动作和动作对应参数在 <a href="https://echarts.apache.org//api.html#action">action</a> 文档中有列出。</p> <p>下面示例演示了如何通过 <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 = { |
| title: { |
| text: '饼图程序调用高亮示例', |
| left: 'center' |
| }, |
| tooltip: { |
| trigger: 'item', |
| formatter: '{a} <br/>{b} : {c} ({d}%)' |
| }, |
| legend: { |
| orient: 'vertical', |
| left: 'left', |
| data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] |
| }, |
| series: [ |
| { |
| name: '访问来源', |
| type: 'pie', |
| radius: '55%', |
| center: ['50%', '60%'], |
| data: [ |
| { value: 335, name: '直接访问' }, |
| { value: 310, name: '邮件营销' }, |
| { value: 234, name: '联盟广告' }, |
| { value: 135, name: '视频广告' }, |
| { value: 1548, name: '搜索引擎' } |
| ], |
| 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 |
| }); |
| // 显示 tooltip |
| 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">title</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'饼图程序调用高亮示例'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token string">'center'</span> |
| <span class="token punctuation">}</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">'直接访问'</span><span class="token punctuation">,</span> <span class="token string">'邮件营销'</span><span class="token punctuation">,</span> <span class="token string">'联盟广告'</span><span class="token punctuation">,</span> <span class="token string">'视频广告'</span><span class="token punctuation">,</span> <span class="token string">'搜索引擎'</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">'访问来源'</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">'直接访问'</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">'邮件营销'</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">'联盟广告'</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">'视频广告'</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">'搜索引擎'</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> |
| <span class="token comment">// 取消之前高亮的图形</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> |
| <span class="token comment">// 高亮当前图形</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> |
| <span class="token comment">// 显示 tooltip</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="%E7%9B%91%E5%90%AC%E2%80%9C%E7%A9%BA%E7%99%BD%E5%A4%84%E2%80%9D%E7%9A%84%E4%BA%8B%E4%BB%B6" tabindex="-1">监听“空白处”的事件</h2> <p>有时候，开发者需要监听画布的“空白处”所触发的事件。比如，当需要在用户点击“空白处”的时候重置图表时。</p> <p>在讨论这个功能之前，我们需要先明确两种事件。zrender 事件和 echarts 事件。</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">// 该监听器正在监听一个`zrender 事件`。</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">// 该监听器正在监听一个`echarts 事件`。</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 事件与 echarts 事件不同。前者是当鼠标在任何地方都会被触发，而后者是只有当鼠标在图形元素上时才能被触发。事实上，echarts 事件是在 zrender 事件的基础上实现的，也就是说，当一个 zrender 事件在图形元素上被触发时，echarts 将触发一个 echarts 事件给开发者。</p> <p>有了 zrender 事件，我们就可以实现监听空白处的事件，具体如下：</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">// 没有 target 意味着鼠标/指针不在任何一个图形元素上，它是从“空白处”触发的。</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">// 点击在了空白处，做些什么。</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">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/concepts/event.md" title="编辑本文" 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">在 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/plainheart" target="_blank" class="post-contributor"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60" loading="lazy"> <span>plainheart</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(i,e,t,g,l,d,I,C,n,a,o,c,r,A,h,s,b,m,p,u,B,Z,W,y,G,v,L,K,X,Y,O,k,w,J,S,H,V,j,F,R,E,D,z,f,N,T,U,q,M,Q,x,P,_,$,ii,ei,ti,gi){return{layout:"default",data:[{html:'<h1 id="%E4%BA%8B%E4%BB%B6%E4%B8%8E%E8%A1%8C%E4%B8%BA" tabindex="-1">事件与行为</h1>\n<p>在 Apache ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。</p>\n<p>ECharts 中的事件名称对应 DOM 事件名称，均为小写的字符串，如下是一个绑定点击操作的示例。</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihwYXJhbXMpIHsKICAvLyDmjqfliLblj7DmiZPljbDmlbDmja7nmoTlkI3np7AKICBjb25zb2xlLmxvZyhwYXJhbXMubmFtZSk7Cn0pOw\'" line-highlights="\'\'" />\n<p>在 ECharts 中事件分为两种类型，一种是用户鼠标操作点击，或者 hover 图表的图形时触发的事件，还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 <a href="https://echarts.apache.org/api.html#events.legendselectchanged">\'legendselectchanged\'</a> 事件（这里需要注意切换图例开关是不会触发 <code>\'legendselected\'</code> 事件的），数据区域缩放时触发的 <a href="https://echarts.apache.org/api.html#events.legendselectchanged">\'datazoom\'</a> 事件等等。</p>\n<h2 id="%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%A4%84%E7%90%86" tabindex="-1">鼠标事件的处理</h2>\n<p>ECharts 支持常规的鼠标事件类型，包括 <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> 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。</p>\n<md-live lang="js" code="\'Ly8g5Z-65LqO5YeG5aSH5aW955qEZG9t77yM5Yid5aeL5YyWRUNoYXJ0c-WunuS-iwovLyB2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpKTsKCi8vIOaMh-WumuWbvuihqOeahOmFjee9rumhueWSjOaVsOaNrgp2YXIgb3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ-ihrOihqycsICfnvormr5vooasnLCAn6Zuq57q66KGrJywgJ-ijpOWtkCcsICfpq5jot5_pnosnLCAn6KKc5a2QJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ-mUgOmHjycsCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbNSwgMjAsIDM2LCAxMCwgMTAsIDIwXQogICAgfQogIF0KfTsKLy8g5L2_55So5Yia5oyH5a6a55qE6YWN572u6aG55ZKM5pWw5o2u5pi-56S65Zu-6KGo44CCCm15Q2hhcnQuc2V0T3B0aW9uKG9wdGlvbik7Ci8vIOWkhOeQhueCueWHu-S6i-S7tuW5tuS4lOi3s-i9rOWIsOebuOW6lOeahOeZvuW6puaQnOe0oumhtemdogpteUNoYXJ0Lm9uKCdjbGljaycsIGZ1bmN0aW9uKHBhcmFtcykgewogIHdpbmRvdy5vcGVuKCdodHRwczovL3d3dy5iYWlkdS5jb20vcz93ZD0nICsgZW5jb2RlVVJJQ29tcG9uZW50KHBhcmFtcy5uYW1lKSk7Cn0pOw\'" v-bind="{}" />\n<p>所有的鼠标事件包含参数 <code>params</code>，这是一个包含点击图形的数据信息的对象，如下格式：</p>\n<md-code-block lang="ts" code="\'dHlwZSBFdmVudFBhcmFtcyA9IHsKICAvLyDlvZPliY3ngrnlh7vnmoTlm77lvaLlhYPntKDmiYDlsZ7nmoTnu4Tku7blkI3np7DvvIwKICAvLyDlhbblgLzlpoIgJ3NlcmllcyfjgIEnbWFya0xpbmUn44CBJ21hcmtQb2ludCfjgIEndGltZUxpbmUnIOetieOAggogIGNvbXBvbmVudFR5cGU6IHN0cmluZzsKICAvLyDns7vliJfnsbvlnovjgILlgLzlj6_og73kuLrvvJonbGluZSfjgIEnYmFyJ-OAgSdwaWUnIOetieOAguW9kyBjb21wb25lbnRUeXBlIOS4uiAnc2VyaWVzJyDml7bmnInmhI_kuYnjgIIKICBzZXJpZXNUeXBlOiBzdHJpbmc7CiAgLy8g57O75YiX5Zyo5Lyg5YWl55qEIG9wdGlvbi5zZXJpZXMg5Lit55qEIGluZGV444CC5b2TIGNvbXBvbmVudFR5cGUg5Li6ICdzZXJpZXMnIOaXtuacieaEj-S5ieOAggogIHNlcmllc0luZGV4OiBudW1iZXI7CiAgLy8g57O75YiX5ZCN56ew44CC5b2TIGNvbXBvbmVudFR5cGUg5Li6ICdzZXJpZXMnIOaXtuacieaEj-S5ieOAggogIHNlcmllc05hbWU6IHN0cmluZzsKICAvLyDmlbDmja7lkI3vvIznsbvnm67lkI0KICBuYW1lOiBzdHJpbmc7CiAgLy8g5pWw5o2u5Zyo5Lyg5YWl55qEIGRhdGEg5pWw57uE5Lit55qEIGluZGV4CiAgZGF0YUluZGV4OiBudW1iZXI7CiAgLy8g5Lyg5YWl55qE5Y6f5aeL5pWw5o2u6aG5CiAgZGF0YTogT2JqZWN0OwogIC8vIHNhbmtleeOAgWdyYXBoIOetieWbvuihqOWQjOaXtuWQq-aciSBub2RlRGF0YSDlkowgZWRnZURhdGEg5Lik56eNIGRhdGHvvIwKICAvLyBkYXRhVHlwZSDnmoTlgLzkvJrmmK8gJ25vZGUnIOaIluiAhSAnZWRnZSfvvIzooajnpLrlvZPliY3ngrnlh7vlnKggbm9kZSDov5jmmK8gZWRnZSDkuIrjgIIKICAvLyDlhbbku5blpKfpg6jliIblm77ooajkuK3lj6rmnInkuIDnp40gZGF0Ye-8jGRhdGFUeXBlIOaXoOaEj-S5ieOAggogIGRhdGFUeXBlOiBzdHJpbmc7CiAgLy8g5Lyg5YWl55qE5pWw5o2u5YC8CiAgdmFsdWU6IG51bWJlciB8IEFycmF5OwogIC8vIOaVsOaNruWbvuW9oueahOminOiJsuOAguW9kyBjb21wb25lbnRUeXBlIOS4uiAnc2VyaWVzJyDml7bmnInmhI_kuYnjgIIKICBjb2xvcjogc3RyaW5nOwp9Ow\'" line-highlights="\'\'" />\n<p>如何区分鼠标点击到了哪里：</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihwYXJhbXMpIHsKICBpZiAocGFyYW1zLmNvbXBvbmVudFR5cGUgPT09ICdtYXJrUG9pbnQnKSB7CiAgICAvLyDngrnlh7vliLDkuoYgbWFya1BvaW50IOS4igogICAgaWYgKHBhcmFtcy5zZXJpZXNJbmRleCA9PT0gNSkgewogICAgICAvLyDngrnlh7vliLDkuoYgaW5kZXgg5Li6IDUg55qEIHNlcmllcyDnmoQgbWFya1BvaW50IOS4iuOAggogICAgfQogIH0gZWxzZSBpZiAocGFyYW1zLmNvbXBvbmVudFR5cGUgPT09ICdzZXJpZXMnKSB7CiAgICBpZiAocGFyYW1zLnNlcmllc1R5cGUgPT09ICdncmFwaCcpIHsKICAgICAgaWYgKHBhcmFtcy5kYXRhVHlwZSA9PT0gJ2VkZ2UnKSB7CiAgICAgICAgLy8g54K55Ye75Yiw5LqGIGdyYXBoIOeahCBlZGdl77yI6L6577yJ5LiK44CCCiAgICAgIH0gZWxzZSB7CiAgICAgICAgLy8g54K55Ye75Yiw5LqGIGdyYXBoIOeahCBub2Rl77yI6IqC54K577yJ5LiK44CCCiAgICAgIH0KICAgIH0KICB9Cn0pOw\'" line-highlights="\'\'" />\n<p>使用 <code>query</code> 只对指定的组件的图形元素的触发回调：</p>\n<md-code-block lang="js" code="\'Y2hhcnQub24oZXZlbnROYW1lLCBxdWVyeSwgaGFuZGxlcik7\'" line-highlights="\'\'" />\n<p><code>query</code> 可为 <code>string</code> 或者 <code>Object</code>。</p>\n<p>如果为 <code>string</code> 表示组件类型。格式可以是 \'mainType\' 或者 \'mainType.subType\'。例如：</p>\n<md-code-block lang="js" code="\'Y2hhcnQub24oJ2NsaWNrJywgJ3NlcmllcycsIGZ1bmN0aW9uKCkge30pOwpjaGFydC5vbignY2xpY2snLCAnc2VyaWVzLmxpbmUnLCBmdW5jdGlvbigpIHt9KTsKY2hhcnQub24oJ2NsaWNrJywgJ2RhdGFab29tJywgZnVuY3Rpb24oKSB7fSk7CmNoYXJ0Lm9uKCdjbGljaycsICd4QXhpcy5jYXRlZ29yeScsIGZ1bmN0aW9uKCkge30pOw\'" line-highlights="\'\'" />\n<p>如果为 <code>Object</code>，可以包含以下一个或多个属性，每个属性都是可选的：</p>\n<md-code-block lang="ts" code="\'ewogICR7bWFpblR5cGV9SW5kZXg6IG51bWJlciAvLyDnu4Tku7YgaW5kZXgKICAke21haW5UeXBlfU5hbWU6IHN0cmluZyAvLyDnu4Tku7YgbmFtZQogICR7bWFpblR5cGV9SWQ6IHN0cmluZyAvLyDnu4Tku7YgaWQKICBkYXRhSW5kZXg6IG51bWJlciAvLyDmlbDmja7pobkgaW5kZXgKICBuYW1lOiBzdHJpbmcgLy8g5pWw5o2u6aG5IG5hbWUKICBkYXRhVHlwZTogc3RyaW5nIC8vIOaVsOaNrumhuSB0eXBl77yM5aaC5YWz57O75Zu-5Lit55qEICdub2RlJywgJ2VkZ2UnCiAgZWxlbWVudDogc3RyaW5nIC8vIOiHquWumuS5ieezu-WIl-S4reeahCBlbCDnmoQgbmFtZQp9\'" line-highlights="\'\'" />\n<p>例如：</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ3V1dScKICAgICAgLy8gLi4uCiAgICB9CiAgXQp9KTsKY2hhcnQub24oJ21vdXNlb3ZlcicsIHsgc2VyaWVzTmFtZTogJ3V1dScgfSwgZnVuY3Rpb24oKSB7CiAgLy8gc2VyaWVzIG5hbWUg5Li6ICd1dXUnIOeahOezu-WIl-S4reeahOWbvuW9ouWFg-e0oOiiqyAnbW91c2VvdmVyJyDml7bvvIzmraTmlrnms5Xooqvlm57osIPjgIIKfSk7\'" line-highlights="\'\'" />\n<p>例如：</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IFsKICAgIHsKICAgICAgLy8gLi4uCiAgICB9LAogICAgewogICAgICAvLyAuLi4KICAgICAgZGF0YTogWwogICAgICAgIHsgbmFtZTogJ3h4JywgdmFsdWU6IDEyMSB9LAogICAgICAgIHsgbmFtZTogJ3l5JywgdmFsdWU6IDMzIH0KICAgICAgXQogICAgfQogIF0KfSk7CmNoYXJ0Lm9uKCdtb3VzZW92ZXInLCB7IHNlcmllc0luZGV4OiAxLCBuYW1lOiAneHgnIH0sIGZ1bmN0aW9uKCkgewogIC8vIHNlcmllcyBpbmRleCAxIOeahOezu-WIl-S4reeahCBuYW1lIOS4uiAneHgnIOeahOWFg-e0oOiiqyAnbW91c2VvdmVyJyDml7bvvIzmraTmlrnms5Xooqvlm57osIPjgIIKfSk7\'" line-highlights="\'\'" />\n<p>例如：</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2dyYXBoJywKICAgICAgbm9kZXM6IFsKICAgICAgICB7IG5hbWU6ICdhJywgdmFsdWU6IDEwIH0sCiAgICAgICAgeyBuYW1lOiAnYicsIHZhbHVlOiAyMCB9CiAgICAgIF0sCiAgICAgIGVkZ2VzOiBbeyBzb3VyY2U6IDAsIHRhcmdldDogMSB9XQogICAgfQogIF0KfSk7CmNoYXJ0Lm9uKCdjbGljaycsIHsgZGF0YVR5cGU6ICdub2RlJyB9LCBmdW5jdGlvbigpIHsKICAvLyDlhbPns7vlm77nmoToioLngrnooqvngrnlh7vml7bmraTmlrnms5Xooqvlm57osIPjgIIKfSk7CmNoYXJ0Lm9uKCdjbGljaycsIHsgZGF0YVR5cGU6ICdlZGdlJyB9LCBmdW5jdGlvbigpIHsKICAvLyDlhbPns7vlm77nmoTovrnooqvngrnlh7vml7bmraTmlrnms5Xooqvlm57osIPjgIIKfSk7\'" line-highlights="\'\'" />\n<p>例如：</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IHsKICAgIC8vIC4uLgogICAgdHlwZTogJ2N1c3RvbScsCiAgICByZW5kZXJJdGVtOiBmdW5jdGlvbihwYXJhbXMsIGFwaSkgewogICAgICByZXR1cm4gewogICAgICAgIHR5cGU6ICdncm91cCcsCiAgICAgICAgY2hpbGRyZW46IFsKICAgICAgICAgIHsKICAgICAgICAgICAgdHlwZTogJ2NpcmNsZScsCiAgICAgICAgICAgIG5hbWU6ICdteV9lbCcKICAgICAgICAgICAgLy8gLi4uCiAgICAgICAgICB9LAogICAgICAgICAgewogICAgICAgICAgICAvLyAuLi4KICAgICAgICAgIH0KICAgICAgICBdCiAgICAgIH07CiAgICB9LAogICAgZGF0YTogW1sxMiwgMzNdXQogIH0KfSk7CmNoYXJ0Lm9uKCdtb3VzZXVwJywgeyBlbGVtZW50OiAnbXlfZWwnIH0sIGZ1bmN0aW9uKCkgewogIC8vIG5hbWUg5Li6ICdteV9lbCcg55qE5YWD57Sg6KKrICdtb3VzZXVwJyDml7bvvIzmraTmlrnms5Xooqvlm57osIPjgIIKfSk7\'" line-highlights="\'\'" />\n<p>你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息后更新图表，显示浮层等等，如下示例代码：</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihwYXJtYXMpIHsKICAkLmdldCgnZGV0YWlsP3E9JyArIHBhcmFtcy5uYW1lLCBmdW5jdGlvbihkZXRhaWwpIHsKICAgIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgICAgc2VyaWVzOiBbCiAgICAgICAgewogICAgICAgICAgbmFtZTogJ3BpZScsCiAgICAgICAgICAvLyDpgJrov4fppbzlm77ooajnjrDljZXkuKrmn7HlrZDkuK3nmoTmlbDmja7liIbluIMKICAgICAgICAgIGRhdGE6IFtkZXRhaWwuZGF0YV0KICAgICAgICB9CiAgICAgIF0KICAgIH0pOwogIH0pOwp9KTs\'" line-highlights="\'\'" />\n<h2 id="%E7%BB%84%E4%BB%B6%E4%BA%A4%E4%BA%92%E7%9A%84%E8%A1%8C%E4%B8%BA%E4%BA%8B%E4%BB%B6" tabindex="-1">组件交互的行为事件</h2>\n<p>在 ECharts 中基本上所有的组件交互行为都会触发相应的事件，常用的事件和事件对应参数在 <a href="https://echarts.apache.org//api.html#events">events</a> 文档中有列出。</p>\n<p>下面是监听一个图例开关的示例：</p>\n<md-code-block lang="js" code="\'Ly8g5Zu-5L6L5byA5YWz55qE6KGM5Li65Y-q5Lya6Kem5Y-RIGxlZ2VuZHNlbGVjdGNoYW5nZWQg5LqL5Lu2Cm15Q2hhcnQub24oJ2xlZ2VuZHNlbGVjdGNoYW5nZWQnLCBmdW5jdGlvbihwYXJhbXMpIHsKICAvLyDojrflj5bngrnlh7vlm77kvovnmoTpgInkuK3nirbmgIEKICB2YXIgaXNTZWxlY3RlZCA9IHBhcmFtcy5zZWxlY3RlZFtwYXJhbXMubmFtZV07CiAgLy8g5Zyo5o6n5Yi25Y-w5Lit5omT5Y2wCiAgY29uc29sZS5sb2coKGlzU2VsZWN0ZWQgPyAn6YCJ5Lit5LqGJyA6ICflj5bmtojpgInkuK3kuoYnKSArICflm77kvosnICsgcGFyYW1zLm5hbWUpOwogIC8vIOaJk-WNsOaJgOacieWbvuS-i-eahOeKtuaAgQogIGNvbnNvbGUubG9nKHBhcmFtcy5zZWxlY3RlZCk7Cn0pOw\'" line-highlights="\'\'" />\n<h2 id="%E4%BB%A3%E7%A0%81%E8%A7%A6%E5%8F%91-echarts-%E4%B8%AD%E7%BB%84%E4%BB%B6%E7%9A%84%E8%A1%8C%E4%B8%BA" tabindex="-1">代码触发 ECharts 中组件的行为</h2>\n<p>上面提到诸如 <code>\'legendselectchanged\'</code> 事件会由组件交互的行为触发，那除了用户的交互操作，有时候也会有需要在程序里调用方法触发图表的行为，诸如显示 tooltip，选中图例。</p>\n<p>在 ECharts 通过调用 <code>myChart.dispatchAction({ type: \'\' })</code> 触发图表行为，统一管理了所有动作，也可以方便地根据需要去记录用户的行为路径。</p>\n<p>常用的动作和动作对应参数在 <a href="https://echarts.apache.org//api.html#action">action</a> 文档中有列出。</p>\n<p>下面示例演示了如何通过 <code>dispatchAction</code> 去轮流高亮饼图的每个扇形。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRpdGxlOiB7CiAgICB0ZXh0OiAn6aW85Zu-56iL5bqP6LCD55So6auY5Lqu56S65L6LJywKICAgIGxlZnQ6ICdjZW50ZXInCiAgfSwKICB0b29sdGlwOiB7CiAgICB0cmlnZ2VyOiAnaXRlbScsCiAgICBmb3JtYXR0ZXI6ICd7YX0gPGJyLz57Yn0gOiB7Y30gKHtkfSUpJwogIH0sCiAgbGVnZW5kOiB7CiAgICBvcmllbnQ6ICd2ZXJ0aWNhbCcsCiAgICBsZWZ0OiAnbGVmdCcsCiAgICBkYXRhOiBbJ-ebtOaOpeiuv-mXricsICfpgq7ku7bokKXplIAnLCAn6IGU55uf5bm_5ZGKJywgJ-inhumikeW5v-WRiicsICfmkJzntKLlvJXmk44nXQogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICforr_pl67mnaXmupAnLAogICAgICB0eXBlOiAncGllJywKICAgICAgcmFkaXVzOiAnNTUlJywKICAgICAgY2VudGVyOiBbJzUwJScsICc2MCUnXSwKICAgICAgZGF0YTogWwogICAgICAgIHsgdmFsdWU6IDMzNSwgbmFtZTogJ-ebtOaOpeiuv-mXricgfSwKICAgICAgICB7IHZhbHVlOiAzMTAsIG5hbWU6ICfpgq7ku7bokKXplIAnIH0sCiAgICAgICAgeyB2YWx1ZTogMjM0LCBuYW1lOiAn6IGU55uf5bm_5ZGKJyB9LAogICAgICAgIHsgdmFsdWU6IDEzNSwgbmFtZTogJ-inhumikeW5v-WRiicgfSwKICAgICAgICB7IHZhbHVlOiAxNTQ4LCBuYW1lOiAn5pCc57Si5byV5pOOJyB9CiAgICAgIF0sCiAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgaXRlbVN0eWxlOiB7CiAgICAgICAgICBzaGFkb3dCbHVyOiAxMCwKICAgICAgICAgIHNoYWRvd09mZnNldFg6IDAsCiAgICAgICAgICBzaGFkb3dDb2xvcjogJ3JnYmEoMCwgMCwgMCwgMC41KScKICAgICAgICB9CiAgICAgIH0KICAgIH0KICBdCn07CgpsZXQgY3VycmVudEluZGV4ID0gLTE7CgpzZXRJbnRlcnZhbChmdW5jdGlvbigpIHsKICB2YXIgZGF0YUxlbiA9IG9wdGlvbi5zZXJpZXNbMF0uZGF0YS5sZW5ndGg7CiAgLy8g5Y-W5raI5LmL5YmN6auY5Lqu55qE5Zu-5b2iCiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7CiAgICB0eXBlOiAnZG93bnBsYXknLAogICAgc2VyaWVzSW5kZXg6IDAsCiAgICBkYXRhSW5kZXg6IGN1cnJlbnRJbmRleAogIH0pOwogIGN1cnJlbnRJbmRleCA9IChjdXJyZW50SW5kZXggKyAxKSAlIGRhdGFMZW47CiAgLy8g6auY5Lqu5b2T5YmN5Zu-5b2iCiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7CiAgICB0eXBlOiAnaGlnaGxpZ2h0JywKICAgIHNlcmllc0luZGV4OiAwLAogICAgZGF0YUluZGV4OiBjdXJyZW50SW5kZXgKICB9KTsKICAvLyDmmL7npLogdG9vbHRpcAogIG15Q2hhcnQuZGlzcGF0Y2hBY3Rpb24oewogICAgdHlwZTogJ3Nob3dUaXAnLAogICAgc2VyaWVzSW5kZXg6IDAsCiAgICBkYXRhSW5kZXg6IGN1cnJlbnRJbmRleAogIH0pOwp9LCAxMDAwKTs\'" v-bind="{}" />\n<h2 id="%E7%9B%91%E5%90%AC%E2%80%9C%E7%A9%BA%E7%99%BD%E5%A4%84%E2%80%9D%E7%9A%84%E4%BA%8B%E4%BB%B6" tabindex="-1">监听“空白处”的事件</h2>\n<p>有时候，开发者需要监听画布的“空白处”所触发的事件。比如，当需要在用户点击“空白处”的时候重置图表时。</p>\n<p>在讨论这个功能之前，我们需要先明确两种事件。zrender 事件和 echarts 事件。</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5nZXRacigpLm9uKCdjbGljaycsIGZ1bmN0aW9uKGV2ZW50KSB7CiAgLy8g6K-l55uR5ZCs5Zmo5q2j5Zyo55uR5ZCs5LiA5LiqYHpyZW5kZXIg5LqL5Lu2YOOAggp9KTsKbXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihldmVudCkgewogIC8vIOivpeebkeWQrOWZqOato-WcqOebkeWQrOS4gOS4qmBlY2hhcnRzIOS6i-S7tmDjgIIKfSk7\'" line-highlights="\'\'" />\n<p>zrender 事件与 echarts 事件不同。前者是当鼠标在任何地方都会被触发，而后者是只有当鼠标在图形元素上时才能被触发。事实上，echarts 事件是在 zrender 事件的基础上实现的，也就是说，当一个 zrender 事件在图形元素上被触发时，echarts 将触发一个 echarts 事件给开发者。</p>\n<p>有了 zrender 事件，我们就可以实现监听空白处的事件，具体如下：</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5nZXRacigpLm9uKCdjbGljaycsIGZ1bmN0aW9uKGV2ZW50KSB7CiAgLy8g5rKh5pyJIHRhcmdldCDmhI_lkbPnnYDpvKDmoIcv5oyH6ZKI5LiN5Zyo5Lu75L2V5LiA5Liq5Zu-5b2i5YWD57Sg5LiK77yM5a6D5piv5LuO4oCc56m655m95aSE4oCd6Kem5Y-R55qE44CCCiAgaWYgKCFldmVudC50YXJnZXQpIHsKICAgIC8vIOeCueWHu-WcqOS6huepuueZveWkhO-8jOWBmuS6m-S7gOS5iOOAggogIH0KfSk7\'" line-highlights="\'\'" />\n',postPath:"zh/concepts/event",title:"事件与行为 - 概念篇"}],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:I},{title:"资源列表",dir:C,draft:i},{title:"寻求帮助",dir:n},{title:"版本特性",dir:a,children:[{title:"ECharts 5 特性介绍",dir:o},{title:"v4 升级 v5 指南",dir:c},{title:5.2,dir:r},{title:5.3,dir:A},{title:5.4,dir:h}]}]},{title:"概念篇",dir:s,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:m,draft:i},{title:"系列",dir:p,draft:i},{title:"样式",dir:u},{title:"数据集",dir:B},{title:"数据转换",dir:Z},{title:"坐标系",dir:W,draft:i},{title:"坐标轴",dir:y},{title:"视觉映射",dir:t},{title:"图例",dir:G},{title:"事件与行为",dir:v}]},{title:"应用篇",dir:L,children:[{title:"常用图表类型",dir:K,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:X},{title:"堆叠柱状图",dir:Y},{title:"动态排序柱状图",dir:O},{title:"极坐标系柱状图",dir:k,draft:i},{title:"阶梯瀑布图",dir:w},{title:"视觉映射的柱状图",dir:t,draft:i}]},{title:"折线图",dir:J,children:[{title:"基础折线图",dir:S},{title:"堆叠折线图",dir:H},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:j},{title:"阶梯线图",dir:F}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:R},{title:"圆环图",dir:E},{title:"南丁格尔图（玫瑰图）",dir:D}]},{title:"散点图",dir:z,children:[{title:"基础散点图",dir:f}]}]},{title:N,dir:e,draft:i},{title:"跨平台方案",dir:T,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:q,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:M}]},{title:"动画",dir:Q,children:[{title:"数据过渡动画",dir:x}]},{title:"交互",dir:P,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:i},{title:"智能指针吸附",dir:$}]}]},{title:"最佳实践",dir:ii,children:[{title:N,dir:e,draft:i},{title:ei,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:gi}]}],en:[{title:"Get Started",dir:g},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:d},{title:"Import ECharts",dir:I},{title:"Resources",dir:C,draft:i},{title:"Get Help",dir:n},{title:"What's New",dir:a,children:[{title:"ECharts 5 Features",dir:o},{title:"Migration from v4 to v5",dir:c},{title:5.2,dir:r},{title:5.3,dir:A},{title:5.4,dir:h}]}]},{title:"Concepts",dir:s,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:m,draft:i},{title:"Series",dir:p,draft:i},{title:"Style",dir:u},{title:"Dataset",dir:B},{title:"Data Transform",dir:Z},{title:"Coordinate",dir:W,draft:i},{title:"Axis",dir:y},{title:"Visual Mapping",dir:t},{title:"Legend",dir:G},{title:"Event and Action",dir:v}]},{title:"How To Guides",dir:L,children:[{title:"Common Charts",dir:K,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:X},{title:"Stacked Bar",dir:Y},{title:"Bar Racing",dir:O},{title:"Bar Polar",dir:k,draft:i},{title:"Waterfall",dir:w}]},{title:"Line",dir:J,children:[{title:"Basic Line",dir:S},{title:"Stacked Line",dir:H},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:j},{title:"Step Line",dir:F}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:R},{title:"Ring Style",dir:E},{title:"Rose Style",dir:D}]},{title:"Scatter",dir:z,children:[{title:"Basic Scatter",dir:f}]}]},{title:"Mobile",dir:e,draft:i},{title:"Cross Platform",dir:T,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:q,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:M}]},{title:"Animation",dir:Q,children:[{title:"Data Transition",dir:x}]},{title:"Interaction",dir:P,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:i},{title:"Intelligent Pointer Snapping",dir:$}]}]},{title:"Best Practices",dir:ii,children:[{title:"Mobile Optimization",dir:e,draft:i},{title:ei,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:gi}]}]},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:i,routePath:"/zh/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> |
