| <!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" 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 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-up"></span></a> <ul class="nav bd-sidenav level2"><li class="nav-item"><a href="/handbook/zh/how-to/interaction/drag" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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="%E6%8B%96%E6%8B%BD%E7%9A%84%E5%AE%9E%E7%8E%B0" tabindex="-1">拖拽的实现</h1> <p>本篇通过介绍一个实现拖拽的小例子来介绍如何在 Apache ECharts<sup>TM</sup> 中实现复杂的交互。</p> <p><iframe width="100%" height="400" src=""></iframe></p> <p>这个例子主要做到了这样一件事，用鼠标可以拖拽曲线的点，从而改变曲线的形状。例子很简单，但是有了这个基础我们还可以做更多的事情，比如在图中进行可视化得编辑。所以我们从这个简单的例子开始。</p> <p>echarts 本身没有提供封装好的“拖拽改变图表”这样比较业务定制的功能。但是这个功能开发者可以通过 API 扩展实现。</p> <h2 id="%E5%AE%9E%E7%8E%B0%E5%9F%BA%E6%9C%AC%E7%9A%84%E6%8B%96%E6%8B%BD%E5%8A%9F%E8%83%BD" tabindex="-1">实现基本的拖拽功能</h2> <p>在这个例子中，基础的图表是一个 <a href="https://echarts.apache.org/option.html#series-line">折线图 (series-line)</a>。参见如下配置：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> symbolSize <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span> |
| |
| <span class="token comment">// 这个 data 变量在这里单独声明，在后面也会用到。</span> |
| <span class="token keyword">var</span> data <span class="token operator">=</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">[</span><span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">50</span><span class="token punctuation">,</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 operator">-</span><span class="token number">56.5</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 operator">-</span><span class="token number">46.5</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">22.1</span><span class="token punctuation">,</span> <span class="token number">40</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">setOption</span><span class="token punctuation">(</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">min</span><span class="token operator">:</span> <span class="token operator">-</span><span class="token number">100</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">max</span><span class="token operator">:</span> <span class="token number">80</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">axisLine</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">onZero</span><span class="token operator">:</span> <span class="token boolean">false</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 literal-property property">min</span><span class="token operator">:</span> <span class="token operator">-</span><span class="token number">30</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">max</span><span class="token operator">:</span> <span class="token number">60</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">axisLine</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">onZero</span><span class="token operator">:</span> <span class="token boolean">false</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">id</span><span class="token operator">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">smooth</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">symbolSize</span><span class="token operator">:</span> symbolSize<span class="token punctuation">,</span> <span class="token comment">// 为了方便拖拽，把 symbolSize 尺寸设大了。</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</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></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>既然折线中原生的点没有拖拽功能，我们就为它加上拖拽功能：用 <a href="https://echarts.apache.org/option.html#graphic">graphic</a> 组件，在每个点上面，覆盖一个隐藏的可拖拽的圆点。</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">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| <span class="token comment">// 声明一个 graphic component，里面有若干个 type 为 'circle' 的 graphic elements。</span> |
| <span class="token comment">// 这里使用了 echarts.util.map 这个帮助方法，其行为和 Array.prototype.map 一样，但是兼容 es5 以下的环境。</span> |
| <span class="token comment">// 用 map 方法遍历 data 的每项，为每项生成一个圆点。</span> |
| <span class="token literal-property property">graphic</span><span class="token operator">:</span> echarts<span class="token punctuation">.</span>util<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">dataItem<span class="token punctuation">,</span> dataIndex</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 comment">// 'circle' 表示这个 graphic element 的类型是圆点。</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">shape</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token comment">// 圆点的半径。</span> |
| <span class="token literal-property property">r</span><span class="token operator">:</span> symbolSize <span class="token operator">/</span> <span class="token number">2</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token comment">// 用 transform 的方式对圆点进行定位。position: [x, y] 表示将圆点平移到 [x, y] 位置。</span> |
| <span class="token comment">// 这里使用了 convertToPixel 这个 API 来得到每个圆点的位置，下面介绍。</span> |
| <span class="token literal-property property">position</span><span class="token operator">:</span> myChart<span class="token punctuation">.</span><span class="token function">convertToPixel</span><span class="token punctuation">(</span><span class="token string">'grid'</span><span class="token punctuation">,</span> dataItem<span class="token punctuation">)</span><span class="token punctuation">,</span> |
| |
| <span class="token comment">// 这个属性让圆点不可见（但是不影响他响应鼠标事件）。</span> |
| <span class="token literal-property property">invisible</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token comment">// 这个属性让圆点可以被拖拽。</span> |
| <span class="token literal-property property">draggable</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token comment">// 把 z 值设得比较大，表示这个圆点在最上方，能覆盖住已有的折线图的圆点。</span> |
| <span class="token literal-property property">z</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span> |
| <span class="token comment">// 此圆点的拖拽的响应事件，在拖拽过程中会不断被触发。下面介绍详情。</span> |
| <span class="token comment">// 这里使用了 echarts.util.curry 这个帮助方法，意思是生成一个与 onPointDragging</span> |
| <span class="token comment">// 功能一样的新的函数，只不过第一个参数永远为此时传入的 dataIndex 的值。</span> |
| <span class="token literal-property property">ondrag</span><span class="token operator">:</span> echarts<span class="token punctuation">.</span>util<span class="token punctuation">.</span><span class="token function">curry</span><span class="token punctuation">(</span>onPointDragging<span class="token punctuation">,</span> dataIndex<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> <p>上面的代码中，使用 <a href="api.html#echartsInstance.convertToPixel">convertToPixel</a> 这个 API，进行了从 data 到“像素坐标”的转换，从而得到了每个圆点应该在的位置，从而能绘制这些圆点。<code>myChart.convertToPixel('grid', dataItem)</code> 这句话中，第一个参数 <code>'grid'</code> 表示 <code>dataItem</code> 在 <a href="https://echarts.apache.org/option.html#grid">grid</a> 这个组件中（即直角坐标系）中进行转换。所谓“像素坐标”，就是以 echarts 容器 dom element 的左上角为零点的以像素为单位的坐标系中的坐标。</p> <p>注意这件事需要在第一次 setOption 后再进行，也就是说，须在坐标系（<a href="https://echarts.apache.org/option.html#grid">grid</a>）初始化后才能调用 <code>myChart.convertToPixel('grid', dataItem)</code>。</p> <p>有了这段代码后，就有了诸个能拖拽的点。接下来要为每个点，加上拖拽响应的事件：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// 拖拽某个圆点的过程中会不断调用此函数。</span> |
| <span class="token comment">// 此函数中会根据拖拽后的新位置，改变 data 中的值，并用新的 data 值，重绘折线图，从而使折线图同步于被拖拽的隐藏圆点。</span> |
| <span class="token keyword">function</span> <span class="token function">onPointDragging</span><span class="token punctuation">(</span><span class="token parameter">dataIndex</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token comment">// 这里的 data 就是本文最初的代码块中声明的 data，在这里会被更新。</span> |
| <span class="token comment">// 这里的 this 就是被拖拽的圆点。this.position 就是圆点当前的位置。</span> |
| data<span class="token punctuation">[</span>dataIndex<span class="token punctuation">]</span> <span class="token operator">=</span> myChart<span class="token punctuation">.</span><span class="token function">convertFromPixel</span><span class="token punctuation">(</span><span class="token string">'grid'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>position<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token comment">// 用更新后的 data，重绘折线图。</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">id</span><span class="token operator">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</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></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>上面的代码中，使用了 <a href="https://echarts.apache.org//api.html#echartsInstance.convertFromPixel">convertFromPixel</a> 这个 API。它是 <a href="https://echarts.apache.org//api.html#echartsInstance.convertToPixel">convertToPixel</a> 的逆向过程。<code>myChart.convertFromPixel('grid', this.position)</code> 表示把当前像素坐标转换成 <a href="https://echarts.apache.org/option.html#grid">grid</a> 组件中直角坐标系的 dataItem 值。</p> <p>最后，为了使 dom 尺寸改变时，图中的元素能自适应得变化，加上这些代码：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'resize'</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">// 对每个拖拽圆点重新计算位置，并用 setOption 更新。</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">graphic</span><span class="token operator">:</span> echarts<span class="token punctuation">.</span>util<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> dataIndex</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">position</span><span class="token operator">:</span> myChart<span class="token punctuation">.</span><span class="token function">convertToPixel</span><span class="token punctuation">(</span><span class="token string">'grid'</span><span class="token punctuation">,</span> item<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="%E6%B7%BB%E5%8A%A0-tooltip-%E7%BB%84%E4%BB%B6" tabindex="-1">添加 tooltip 组件</h2> <p>到此，拖拽的基本功能就完成了。但是想要更进一步得实时看到拖拽过程中，被拖拽的点的 data 值的变化状况，我们可以使用 <a href="https://echarts.apache.org/option.html#tooltip">tooltip</a> 组件来实时显示这个值。但是，tooltip 有其默认的“显示”“隐藏”触发规则，在我们拖拽的场景中并不适用，所以我们还要手动定制 tooltip 的“显示”“隐藏”行为。</p> <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">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| <span class="token comment">// ...,</span> |
| <span class="token literal-property property">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token comment">// 表示不使用默认的“显示”“隐藏”触发规则。</span> |
| <span class="token literal-property property">triggerOn</span><span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span> |
| <span class="token function-variable function">formatter</span><span class="token operator">:</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">return</span> <span class="token punctuation">(</span> |
| <span class="token string">'X: '</span> <span class="token operator">+</span> |
| params<span class="token punctuation">.</span>data<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">+</span> |
| <span class="token string">'<br>Y: '</span> <span class="token operator">+</span> |
| params<span class="token punctuation">.</span>data<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">2</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> <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">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| <span class="token literal-property property">graphic</span><span class="token operator">:</span> data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> dataIndex</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">'circle'</span><span class="token punctuation">,</span> |
| <span class="token comment">// ...,</span> |
| <span class="token comment">// 在 mouseover 的时候显示，在 mouseout 的时候隐藏。</span> |
| <span class="token literal-property property">onmousemove</span><span class="token operator">:</span> echarts<span class="token punctuation">.</span>util<span class="token punctuation">.</span><span class="token function">curry</span><span class="token punctuation">(</span>showTooltip<span class="token punctuation">,</span> dataIndex<span class="token punctuation">)</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">onmouseout</span><span class="token operator">:</span> echarts<span class="token punctuation">.</span>util<span class="token punctuation">.</span><span class="token function">curry</span><span class="token punctuation">(</span>hideTooltip<span class="token punctuation">,</span> dataIndex<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 keyword">function</span> <span class="token function">showTooltip</span><span class="token punctuation">(</span><span class="token parameter">dataIndex</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| myChart<span class="token punctuation">.</span><span class="token function">dispatchAction</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'showTip'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">seriesIndex</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">dataIndex</span><span class="token operator">:</span> dataIndex |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| |
| <span class="token keyword">function</span> <span class="token function">hideTooltip</span><span class="token punctuation">(</span><span class="token parameter">dataIndex</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| myChart<span class="token punctuation">.</span><span class="token function">dispatchAction</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'hideTip'</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>这里使用了 <a href="api.html#echartsInstance.dispatchAction">dispatchAction</a> 来显示隐藏 tooltip。用到了 <a href="api.html#action.tooltip.showTip">showTip</a>、<a href="api.html#action.tooltip.hideTip">hideTip</a>。</p> <h2 id="%E5%85%A8%E9%83%A8%E4%BB%A3%E7%A0%81" tabindex="-1">全部代码</h2> <p>总结一下，全部的代码如下：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">import</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts'</span><span class="token punctuation">;</span> |
| |
| <span class="token keyword">var</span> symbolSize <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span> |
| <span class="token keyword">var</span> data <span class="token operator">=</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">[</span><span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">50</span><span class="token punctuation">,</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 operator">-</span><span class="token number">56.5</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 operator">-</span><span class="token number">46.5</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">22.1</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">]</span> |
| <span class="token punctuation">]</span><span class="token punctuation">;</span> |
| <span class="token keyword">var</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| 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">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">triggerOn</span><span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span> |
| <span class="token function-variable function">formatter</span><span class="token operator">:</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">return</span> <span class="token punctuation">(</span> |
| <span class="token string">'X: '</span> <span class="token operator">+</span> |
| params<span class="token punctuation">.</span>data<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">+</span> |
| <span class="token string">'<br />Y: '</span> <span class="token operator">+</span> |
| params<span class="token punctuation">.</span>data<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">2</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">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">min</span><span class="token operator">:</span> <span class="token operator">-</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token literal-property property">max</span><span class="token operator">:</span> <span class="token number">80</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span> <span class="token literal-property property">axisLine</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">onZero</span><span class="token operator">:</span> <span class="token boolean">false</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 literal-property property">min</span><span class="token operator">:</span> <span class="token operator">-</span><span class="token number">30</span><span class="token punctuation">,</span> <span class="token literal-property property">max</span><span class="token operator">:</span> <span class="token number">60</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span> <span class="token literal-property property">axisLine</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">onZero</span><span class="token operator">:</span> <span class="token boolean">false</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">id</span><span class="token operator">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span> <span class="token literal-property property">smooth</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">symbolSize</span><span class="token operator">:</span> symbolSize<span class="token punctuation">,</span> <span class="token literal-property property">data</span><span class="token operator">:</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> |
| 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">graphic</span><span class="token operator">:</span> echarts<span class="token punctuation">.</span>util<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> dataIndex</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">'circle'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">position</span><span class="token operator">:</span> myChart<span class="token punctuation">.</span><span class="token function">convertToPixel</span><span class="token punctuation">(</span><span class="token string">'grid'</span><span class="token punctuation">,</span> item<span class="token punctuation">)</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">shape</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">r</span><span class="token operator">:</span> symbolSize <span class="token operator">/</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">invisible</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">draggable</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">ondrag</span><span class="token operator">:</span> echarts<span class="token punctuation">.</span>util<span class="token punctuation">.</span><span class="token function">curry</span><span class="token punctuation">(</span>onPointDragging<span class="token punctuation">,</span> dataIndex<span class="token punctuation">)</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">onmousemove</span><span class="token operator">:</span> echarts<span class="token punctuation">.</span>util<span class="token punctuation">.</span><span class="token function">curry</span><span class="token punctuation">(</span>showTooltip<span class="token punctuation">,</span> dataIndex<span class="token punctuation">)</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">onmouseout</span><span class="token operator">:</span> echarts<span class="token punctuation">.</span>util<span class="token punctuation">.</span><span class="token function">curry</span><span class="token punctuation">(</span>hideTooltip<span class="token punctuation">,</span> dataIndex<span class="token punctuation">)</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">z</span><span class="token operator">:</span> <span class="token number">100</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> |
| window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'resize'</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> |
| 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">graphic</span><span class="token operator">:</span> echarts<span class="token punctuation">.</span>util<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> dataIndex</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">position</span><span class="token operator">:</span> myChart<span class="token punctuation">.</span><span class="token function">convertToPixel</span><span class="token punctuation">(</span><span class="token string">'grid'</span><span class="token punctuation">,</span> item<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 keyword">function</span> <span class="token function">showTooltip</span><span class="token punctuation">(</span><span class="token parameter">dataIndex</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| myChart<span class="token punctuation">.</span><span class="token function">dispatchAction</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'showTip'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">seriesIndex</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">dataIndex</span><span class="token operator">:</span> dataIndex |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| <span class="token keyword">function</span> <span class="token function">hideTooltip</span><span class="token punctuation">(</span><span class="token parameter">dataIndex</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| myChart<span class="token punctuation">.</span><span class="token function">dispatchAction</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'hideTip'</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">function</span> <span class="token function">onPointDragging</span><span class="token punctuation">(</span><span class="token parameter">dataIndex<span class="token punctuation">,</span> dx<span class="token punctuation">,</span> dy</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| data<span class="token punctuation">[</span>dataIndex<span class="token punctuation">]</span> <span class="token operator">=</span> myChart<span class="token punctuation">.</span><span class="token function">convertFromPixel</span><span class="token punctuation">(</span><span class="token string">'grid'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>position<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">id</span><span class="token operator">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</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></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>有了这些基础，就可以定制更多的功能了。可以加 <a href="https://echarts.apache.org/option.html#dataZoom">dataZoom</a> 组件，可以制作一个直角坐标系上的绘图板等等。可以发挥想象力。</p></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/how-to/interaction/drag.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></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,t,e,l,a,d,g,r,o,I,C,n,h,c,p,A,s,b,G,m,Z,u,L,B,W,v,K,X,w,y,R,O,S,Y,H,F,j,J,k,V,D,E,U,N,f,T,z,q,M,P,x,Q,_,$,ii,ti,ei,li){return{layout:"default",data:[{html:'<h1 id="%E6%8B%96%E6%8B%BD%E7%9A%84%E5%AE%9E%E7%8E%B0" tabindex="-1">拖拽的实现</h1>\n<p>本篇通过介绍一个实现拖拽的小例子来介绍如何在 Apache ECharts<sup>TM</sup> 中实现复杂的交互。</p>\n<p><md-example src="line-draggable" height="400"></md-example></p>\n<p>这个例子主要做到了这样一件事，用鼠标可以拖拽曲线的点，从而改变曲线的形状。例子很简单，但是有了这个基础我们还可以做更多的事情，比如在图中进行可视化得编辑。所以我们从这个简单的例子开始。</p>\n<p>echarts 本身没有提供封装好的“拖拽改变图表”这样比较业务定制的功能。但是这个功能开发者可以通过 API 扩展实现。</p>\n<h2 id="%E5%AE%9E%E7%8E%B0%E5%9F%BA%E6%9C%AC%E7%9A%84%E6%8B%96%E6%8B%BD%E5%8A%9F%E8%83%BD" tabindex="-1">实现基本的拖拽功能</h2>\n<p>在这个例子中，基础的图表是一个 <a href="https://echarts.apache.org/option.html#series-line">折线图 (series-line)</a>。参见如下配置：</p>\n<md-code-block lang="js" code="\'dmFyIHN5bWJvbFNpemUgPSAyMDsKCi8vIOi_meS4qiBkYXRhIOWPmOmHj-WcqOi_memHjOWNleeLrOWjsOaYju-8jOWcqOWQjumdouS5n-S8mueUqOWIsOOAggp2YXIgZGF0YSA9IFsKICBbMTUsIDBdLAogIFstNTAsIDEwXSwKICBbLTU2LjUsIDIwXSwKICBbLTQ2LjUsIDMwXSwKICBbLTIyLjEsIDQwXQpdOwoKbXlDaGFydC5zZXRPcHRpb24oewogIHhBeGlzOiB7CiAgICBtaW46IC0xMDAsCiAgICBtYXg6IDgwLAogICAgdHlwZTogJ3ZhbHVlJywKICAgIGF4aXNMaW5lOiB7IG9uWmVybzogZmFsc2UgfQogIH0sCiAgeUF4aXM6IHsKICAgIG1pbjogLTMwLAogICAgbWF4OiA2MCwKICAgIHR5cGU6ICd2YWx1ZScsCiAgICBheGlzTGluZTogeyBvblplcm86IGZhbHNlIH0KICB9LAogIHNlcmllczogWwogICAgewogICAgICBpZDogJ2EnLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHNtb290aDogdHJ1ZSwKICAgICAgc3ltYm9sU2l6ZTogc3ltYm9sU2l6ZSwgLy8g5Li65LqG5pa55L6_5ouW5ou977yM5oqKIHN5bWJvbFNpemUg5bC65a-46K6-5aSn5LqG44CCCiAgICAgIGRhdGE6IGRhdGEKICAgIH0KICBdCn0pOw\'" line-highlights="\'\'" />\n<p>既然折线中原生的点没有拖拽功能，我们就为它加上拖拽功能：用 <a href="https://echarts.apache.org/option.html#graphic">graphic</a> 组件，在每个点上面，覆盖一个隐藏的可拖拽的圆点。</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5zZXRPcHRpb24oewogIC8vIOWjsOaYjuS4gOS4qiBncmFwaGljIGNvbXBvbmVudO-8jOmHjOmdouacieiLpeW5suS4qiB0eXBlIOS4uiAnY2lyY2xlJyDnmoQgZ3JhcGhpYyBlbGVtZW50c-OAggogIC8vIOi_memHjOS9v-eUqOS6hiBlY2hhcnRzLnV0aWwubWFwIOi_meS4quW4ruWKqeaWueazle-8jOWFtuihjOS4uuWSjCBBcnJheS5wcm90b3R5cGUubWFwIOS4gOagt--8jOS9huaYr-WFvOWuuSBlczUg5Lul5LiL55qE546v5aKD44CCCiAgLy8g55SoIG1hcCDmlrnms5XpgY3ljoYgZGF0YSDnmoTmr4_pobnvvIzkuLrmr4_pobnnlJ_miJDkuIDkuKrlnIbngrnjgIIKICBncmFwaGljOiBlY2hhcnRzLnV0aWwubWFwKGRhdGEsIGZ1bmN0aW9uKGRhdGFJdGVtLCBkYXRhSW5kZXgpIHsKICAgIHJldHVybiB7CiAgICAgIC8vICdjaXJjbGUnIOihqOekuui_meS4qiBncmFwaGljIGVsZW1lbnQg55qE57G75Z6L5piv5ZyG54K544CCCiAgICAgIHR5cGU6ICdjaXJjbGUnLAoKICAgICAgc2hhcGU6IHsKICAgICAgICAvLyDlnIbngrnnmoTljYrlvoTjgIIKICAgICAgICByOiBzeW1ib2xTaXplIC8gMgogICAgICB9LAogICAgICAvLyDnlKggdHJhbnNmb3JtIOeahOaWueW8j-WvueWchueCuei_m-ihjOWumuS9jeOAgnBvc2l0aW9uOiBbeCwgeV0g6KGo56S65bCG5ZyG54K55bmz56e75YiwIFt4LCB5XSDkvY3nva7jgIIKICAgICAgLy8g6L-Z6YeM5L2_55So5LqGIGNvbnZlcnRUb1BpeGVsIOi_meS4qiBBUEkg5p2l5b6X5Yiw5q-P5Liq5ZyG54K555qE5L2N572u77yM5LiL6Z2i5LuL57uN44CCCiAgICAgIHBvc2l0aW9uOiBteUNoYXJ0LmNvbnZlcnRUb1BpeGVsKCdncmlkJywgZGF0YUl0ZW0pLAoKICAgICAgLy8g6L-Z5Liq5bGe5oCn6K6p5ZyG54K55LiN5Y-v6KeB77yI5L2G5piv5LiN5b2x5ZON5LuW5ZON5bqU6byg5qCH5LqL5Lu277yJ44CCCiAgICAgIGludmlzaWJsZTogdHJ1ZSwKICAgICAgLy8g6L-Z5Liq5bGe5oCn6K6p5ZyG54K55Y-v5Lul6KKr5ouW5ou944CCCiAgICAgIGRyYWdnYWJsZTogdHJ1ZSwKICAgICAgLy8g5oqKIHog5YC86K6-5b6X5q-U6L6D5aSn77yM6KGo56S66L-Z5Liq5ZyG54K55Zyo5pyA5LiK5pa577yM6IO96KaG55uW5L2P5bey5pyJ55qE5oqY57q_5Zu-55qE5ZyG54K544CCCiAgICAgIHo6IDEwMCwKICAgICAgLy8g5q2k5ZyG54K555qE5ouW5ou955qE5ZON5bqU5LqL5Lu277yM5Zyo5ouW5ou96L-H56iL5Lit5Lya5LiN5pat6KKr6Kem5Y-R44CC5LiL6Z2i5LuL57uN6K-m5oOF44CCCiAgICAgIC8vIOi_memHjOS9v-eUqOS6hiBlY2hhcnRzLnV0aWwuY3Vycnkg6L-Z5Liq5biu5Yqp5pa55rOV77yM5oSP5oCd5piv55Sf5oiQ5LiA5Liq5LiOIG9uUG9pbnREcmFnZ2luZwogICAgICAvLyDlip_og73kuIDmoLfnmoTmlrDnmoTlh73mlbDvvIzlj6rkuI3ov4fnrKzkuIDkuKrlj4LmlbDmsLjov5zkuLrmraTml7bkvKDlhaXnmoQgZGF0YUluZGV4IOeahOWAvOOAggogICAgICBvbmRyYWc6IGVjaGFydHMudXRpbC5jdXJyeShvblBvaW50RHJhZ2dpbmcsIGRhdGFJbmRleCkKICAgIH07CiAgfSkKfSk7\'" line-highlights="\'\'" />\n<p>上面的代码中，使用 <a href="api.html#echartsInstance.convertToPixel">convertToPixel</a> 这个 API，进行了从 data 到“像素坐标”的转换，从而得到了每个圆点应该在的位置，从而能绘制这些圆点。<code>myChart.convertToPixel(\'grid\', dataItem)</code> 这句话中，第一个参数 <code>\'grid\'</code> 表示 <code>dataItem</code> 在 <a href="https://echarts.apache.org/option.html#grid">grid</a> 这个组件中（即直角坐标系）中进行转换。所谓“像素坐标”，就是以 echarts 容器 dom element 的左上角为零点的以像素为单位的坐标系中的坐标。</p>\n<p>注意这件事需要在第一次 setOption 后再进行，也就是说，须在坐标系（<a href="https://echarts.apache.org/option.html#grid">grid</a>）初始化后才能调用 <code>myChart.convertToPixel(\'grid\', dataItem)</code>。</p>\n<p>有了这段代码后，就有了诸个能拖拽的点。接下来要为每个点，加上拖拽响应的事件：</p>\n<md-code-block lang="js" code="\'Ly8g5ouW5ou95p-Q5Liq5ZyG54K555qE6L-H56iL5Lit5Lya5LiN5pat6LCD55So5q2k5Ye95pWw44CCCi8vIOatpOWHveaVsOS4reS8muagueaNruaLluaLveWQjueahOaWsOS9jee9ru-8jOaUueWPmCBkYXRhIOS4reeahOWAvO-8jOW5tueUqOaWsOeahCBkYXRhIOWAvO-8jOmHjee7mOaKmOe6v-Wbvu-8jOS7juiAjOS9v-aKmOe6v-WbvuWQjOatpeS6juiiq-aLluaLveeahOmakOiXj-WchueCueOAggpmdW5jdGlvbiBvblBvaW50RHJhZ2dpbmcoZGF0YUluZGV4KSB7CiAgLy8g6L-Z6YeM55qEIGRhdGEg5bCx5piv5pys5paH5pyA5Yid55qE5Luj56CB5Z2X5Lit5aOw5piO55qEIGRhdGHvvIzlnKjov5nph4zkvJrooqvmm7TmlrDjgIIKICAvLyDov5nph4znmoQgdGhpcyDlsLHmmK_ooqvmi5bmi73nmoTlnIbngrnjgIJ0aGlzLnBvc2l0aW9uIOWwseaYr-WchueCueW9k-WJjeeahOS9jee9ruOAggogIGRhdGFbZGF0YUluZGV4XSA9IG15Q2hhcnQuY29udmVydEZyb21QaXhlbCgnZ3JpZCcsIHRoaXMucG9zaXRpb24pOwogIC8vIOeUqOabtOaWsOWQjueahCBkYXRh77yM6YeN57uY5oqY57q_5Zu-44CCCiAgbXlDaGFydC5zZXRPcHRpb24oewogICAgc2VyaWVzOiBbCiAgICAgIHsKICAgICAgICBpZDogJ2EnLAogICAgICAgIGRhdGE6IGRhdGEKICAgICAgfQogICAgXQogIH0pOwp9\'" line-highlights="\'\'" />\n<p>上面的代码中，使用了 <a href="https://echarts.apache.org//api.html#echartsInstance.convertFromPixel">convertFromPixel</a> 这个 API。它是 <a href="https://echarts.apache.org//api.html#echartsInstance.convertToPixel">convertToPixel</a> 的逆向过程。<code>myChart.convertFromPixel(\'grid\', this.position)</code> 表示把当前像素坐标转换成 <a href="https://echarts.apache.org/option.html#grid">grid</a> 组件中直角坐标系的 dataItem 值。</p>\n<p>最后，为了使 dom 尺寸改变时，图中的元素能自适应得变化，加上这些代码：</p>\n<md-code-block lang="js" code="\'d2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ3Jlc2l6ZScsIGZ1bmN0aW9uKCkgewogIC8vIOWvueavj-S4quaLluaLveWchueCuemHjeaWsOiuoeeul-S9jee9ru-8jOW5tueUqCBzZXRPcHRpb24g5pu05paw44CCCiAgbXlDaGFydC5zZXRPcHRpb24oewogICAgZ3JhcGhpYzogZWNoYXJ0cy51dGlsLm1hcChkYXRhLCBmdW5jdGlvbihpdGVtLCBkYXRhSW5kZXgpIHsKICAgICAgcmV0dXJuIHsKICAgICAgICBwb3NpdGlvbjogbXlDaGFydC5jb252ZXJ0VG9QaXhlbCgnZ3JpZCcsIGl0ZW0pCiAgICAgIH07CiAgICB9KQogIH0pOwp9KTs\'" line-highlights="\'\'" />\n<h2 id="%E6%B7%BB%E5%8A%A0-tooltip-%E7%BB%84%E4%BB%B6" tabindex="-1">添加 tooltip 组件</h2>\n<p>到此，拖拽的基本功能就完成了。但是想要更进一步得实时看到拖拽过程中，被拖拽的点的 data 值的变化状况，我们可以使用 <a href="https://echarts.apache.org/option.html#tooltip">tooltip</a> 组件来实时显示这个值。但是，tooltip 有其默认的“显示”“隐藏”触发规则，在我们拖拽的场景中并不适用，所以我们还要手动定制 tooltip 的“显示”“隐藏”行为。</p>\n<p>在上述代码中分别添加如下定义：</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5zZXRPcHRpb24oewogIC8vIC4uLiwKICB0b29sdGlwOiB7CiAgICAvLyDooajnpLrkuI3kvb_nlKjpu5jorqTnmoTigJzmmL7npLrigJ3igJzpmpDol4_igJ3op6blj5Hop4TliJnjgIIKICAgIHRyaWdnZXJPbjogJ25vbmUnLAogICAgZm9ybWF0dGVyOiBmdW5jdGlvbihwYXJhbXMpIHsKICAgICAgcmV0dXJuICgKICAgICAgICAnWDogJyArCiAgICAgICAgcGFyYW1zLmRhdGFbMF0udG9GaXhlZCgyKSArCiAgICAgICAgJzxicj5ZOiAnICsKICAgICAgICBwYXJhbXMuZGF0YVsxXS50b0ZpeGVkKDIpCiAgICAgICk7CiAgICB9CiAgfQp9KTs\'" line-highlights="\'\'" />\n<md-code-block lang="js" code="\'bXlDaGFydC5zZXRPcHRpb24oewogIGdyYXBoaWM6IGRhdGEubWFwKGZ1bmN0aW9uKGl0ZW0sIGRhdGFJbmRleCkgewogICAgcmV0dXJuIHsKICAgICAgdHlwZTogJ2NpcmNsZScsCiAgICAgIC8vIC4uLiwKICAgICAgLy8g5ZyoIG1vdXNlb3ZlciDnmoTml7blgJnmmL7npLrvvIzlnKggbW91c2VvdXQg55qE5pe25YCZ6ZqQ6JeP44CCCiAgICAgIG9ubW91c2Vtb3ZlOiBlY2hhcnRzLnV0aWwuY3Vycnkoc2hvd1Rvb2x0aXAsIGRhdGFJbmRleCksCiAgICAgIG9ubW91c2VvdXQ6IGVjaGFydHMudXRpbC5jdXJyeShoaWRlVG9vbHRpcCwgZGF0YUluZGV4KQogICAgfTsKICB9KQp9KTsKCmZ1bmN0aW9uIHNob3dUb29sdGlwKGRhdGFJbmRleCkgewogIG15Q2hhcnQuZGlzcGF0Y2hBY3Rpb24oewogICAgdHlwZTogJ3Nob3dUaXAnLAogICAgc2VyaWVzSW5kZXg6IDAsCiAgICBkYXRhSW5kZXg6IGRhdGFJbmRleAogIH0pOwp9CgpmdW5jdGlvbiBoaWRlVG9vbHRpcChkYXRhSW5kZXgpIHsKICBteUNoYXJ0LmRpc3BhdGNoQWN0aW9uKHsKICAgIHR5cGU6ICdoaWRlVGlwJwogIH0pOwp9\'" line-highlights="\'\'" />\n<p>这里使用了 <a href="api.html#echartsInstance.dispatchAction">dispatchAction</a> 来显示隐藏 tooltip。用到了 <a href="api.html#action.tooltip.showTip">showTip</a>、<a href="api.html#action.tooltip.hideTip">hideTip</a>。</p>\n<h2 id="%E5%85%A8%E9%83%A8%E4%BB%A3%E7%A0%81" tabindex="-1">全部代码</h2>\n<p>总结一下，全部的代码如下：</p>\n<md-code-block lang="js" code="\'aW1wb3J0IGVjaGFydHMgZnJvbSAnZWNoYXJ0cyc7Cgp2YXIgc3ltYm9sU2l6ZSA9IDIwOwp2YXIgZGF0YSA9IFsKICBbMTUsIDBdLAogIFstNTAsIDEwXSwKICBbLTU2LjUsIDIwXSwKICBbLTQ2LjUsIDMwXSwKICBbLTIyLjEsIDQwXQpdOwp2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpKTsKbXlDaGFydC5zZXRPcHRpb24oewogIHRvb2x0aXA6IHsKICAgIHRyaWdnZXJPbjogJ25vbmUnLAogICAgZm9ybWF0dGVyOiBmdW5jdGlvbihwYXJhbXMpIHsKICAgICAgcmV0dXJuICgKICAgICAgICAnWDogJyArCiAgICAgICAgcGFyYW1zLmRhdGFbMF0udG9GaXhlZCgyKSArCiAgICAgICAgJzxiciAvPlk6ICcgKwogICAgICAgIHBhcmFtcy5kYXRhWzFdLnRvRml4ZWQoMikKICAgICAgKTsKICAgIH0KICB9LAogIHhBeGlzOiB7IG1pbjogLTEwMCwgbWF4OiA4MCwgdHlwZTogJ3ZhbHVlJywgYXhpc0xpbmU6IHsgb25aZXJvOiBmYWxzZSB9IH0sCiAgeUF4aXM6IHsgbWluOiAtMzAsIG1heDogNjAsIHR5cGU6ICd2YWx1ZScsIGF4aXNMaW5lOiB7IG9uWmVybzogZmFsc2UgfSB9LAogIHNlcmllczogWwogICAgeyBpZDogJ2EnLCB0eXBlOiAnbGluZScsIHNtb290aDogdHJ1ZSwgc3ltYm9sU2l6ZTogc3ltYm9sU2l6ZSwgZGF0YTogZGF0YSB9CiAgXQp9KTsKbXlDaGFydC5zZXRPcHRpb24oewogIGdyYXBoaWM6IGVjaGFydHMudXRpbC5tYXAoZGF0YSwgZnVuY3Rpb24oaXRlbSwgZGF0YUluZGV4KSB7CiAgICByZXR1cm4gewogICAgICB0eXBlOiAnY2lyY2xlJywKICAgICAgcG9zaXRpb246IG15Q2hhcnQuY29udmVydFRvUGl4ZWwoJ2dyaWQnLCBpdGVtKSwKICAgICAgc2hhcGU6IHsgcjogc3ltYm9sU2l6ZSAvIDIgfSwKICAgICAgaW52aXNpYmxlOiB0cnVlLAogICAgICBkcmFnZ2FibGU6IHRydWUsCiAgICAgIG9uZHJhZzogZWNoYXJ0cy51dGlsLmN1cnJ5KG9uUG9pbnREcmFnZ2luZywgZGF0YUluZGV4KSwKICAgICAgb25tb3VzZW1vdmU6IGVjaGFydHMudXRpbC5jdXJyeShzaG93VG9vbHRpcCwgZGF0YUluZGV4KSwKICAgICAgb25tb3VzZW91dDogZWNoYXJ0cy51dGlsLmN1cnJ5KGhpZGVUb29sdGlwLCBkYXRhSW5kZXgpLAogICAgICB6OiAxMDAKICAgIH07CiAgfSkKfSk7CndpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdyZXNpemUnLCBmdW5jdGlvbigpIHsKICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICBncmFwaGljOiBlY2hhcnRzLnV0aWwubWFwKGRhdGEsIGZ1bmN0aW9uKGl0ZW0sIGRhdGFJbmRleCkgewogICAgICByZXR1cm4geyBwb3NpdGlvbjogbXlDaGFydC5jb252ZXJ0VG9QaXhlbCgnZ3JpZCcsIGl0ZW0pIH07CiAgICB9KQogIH0pOwp9KTsKZnVuY3Rpb24gc2hvd1Rvb2x0aXAoZGF0YUluZGV4KSB7CiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7CiAgICB0eXBlOiAnc2hvd1RpcCcsCiAgICBzZXJpZXNJbmRleDogMCwKICAgIGRhdGFJbmRleDogZGF0YUluZGV4CiAgfSk7Cn0KZnVuY3Rpb24gaGlkZVRvb2x0aXAoZGF0YUluZGV4KSB7CiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7IHR5cGU6ICdoaWRlVGlwJyB9KTsKfQpmdW5jdGlvbiBvblBvaW50RHJhZ2dpbmcoZGF0YUluZGV4LCBkeCwgZHkpIHsKICBkYXRhW2RhdGFJbmRleF0gPSBteUNoYXJ0LmNvbnZlcnRGcm9tUGl4ZWwoJ2dyaWQnLCB0aGlzLnBvc2l0aW9uKTsKICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICBzZXJpZXM6IFsKICAgICAgewogICAgICAgIGlkOiAnYScsCiAgICAgICAgZGF0YTogZGF0YQogICAgICB9CiAgICBdCiAgfSk7Cn0\'" line-highlights="\'\'" />\n<p>有了这些基础，就可以定制更多的功能了。可以加 <a href="https://echarts.apache.org/option.html#dataZoom">dataZoom</a> 组件，可以制作一个直角坐标系上的绘图板等等。可以发挥想象力。</p>\n',postPath:"zh/how-to/interaction/drag",title:"拖拽的实现 - 交互 - 应用篇"}],fetch:{},error:null,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:l},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:d},{title:"在项目中引入 ECharts",dir:g},{title:"资源列表",dir:r,draft:i},{title:"寻求帮助",dir:o},{title:"版本特性",dir:I,children:[{title:"ECharts 5 特性介绍",dir:C},{title:"v4 升级 v5 指南",dir:n},{title:5.2,dir:h},{title:5.3,dir:c},{title:5.4,dir:p}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:s},{title:"配置项",dir:b,draft:i},{title:"系列",dir:G,draft:i},{title:"样式",dir:m},{title:"数据集",dir:Z},{title:"数据转换",dir:u},{title:"坐标系",dir:L,draft:i},{title:"坐标轴",dir:B},{title:"视觉映射",dir:e},{title:"图例",dir:W},{title:"事件与行为",dir:v}]},{title:"应用篇",dir:K,children:[{title:"常用图表类型",dir:X,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:w},{title:"堆叠柱状图",dir:y},{title:"动态排序柱状图",dir:R},{title:"极坐标系柱状图",dir:O,draft:i},{title:"阶梯瀑布图",dir:S},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:Y,children:[{title:"基础折线图",dir:H},{title:"堆叠折线图",dir:F},{title:"区域面积图",dir:j},{title:"平滑曲线图",dir:J},{title:"阶梯线图",dir:k}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:V},{title:"圆环图",dir:D},{title:"南丁格尔图（玫瑰图）",dir:E}]},{title:"散点图",dir:U,children:[{title:"基础散点图",dir:N}]}]},{title:f,dir:t,draft:i},{title:"跨平台方案",dir:T,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:z},{title:"数据下钻",dir:q,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:M}]},{title:"动画",dir:P,children:[{title:"数据过渡动画",dir:x}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:i},{title:"智能指针吸附",dir:$}]}]},{title:"最佳实践",dir:ii,children:[{title:f,dir:t,draft:i},{title:ti,dir:ei},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:li}]}],en:[{title:"Get Started",dir:l},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:d},{title:"Import ECharts",dir:g},{title:"Resources",dir:r,draft:i},{title:"Get Help",dir:o},{title:"What's New",dir:I,children:[{title:"ECharts 5 Features",dir:C},{title:"Migration from v4 to v5",dir:n},{title:5.2,dir:h},{title:5.3,dir:c},{title:5.4,dir:p}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:s},{title:"Chart Option",dir:b,draft:i},{title:"Series",dir:G,draft:i},{title:"Style",dir:m},{title:"Dataset",dir:Z},{title:"Data Transform",dir:u},{title:"Coordinate",dir:L,draft:i},{title:"Axis",dir:B},{title:"Visual Mapping",dir:e},{title:"Legend",dir:W},{title:"Event and Action",dir:v}]},{title:"How To Guides",dir:K,children:[{title:"Common Charts",dir:X,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:w},{title:"Stacked Bar",dir:y},{title:"Bar Racing",dir:R},{title:"Bar Polar",dir:O,draft:i},{title:"Waterfall",dir:S}]},{title:"Line",dir:Y,children:[{title:"Basic Line",dir:H},{title:"Stacked Line",dir:F},{title:"Area Chart",dir:j},{title:"Smoothed Line",dir:J},{title:"Step Line",dir:k}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:V},{title:"Ring Style",dir:D},{title:"Rose Style",dir:E}]},{title:"Scatter",dir:U,children:[{title:"Basic Scatter",dir:N}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:T,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:z},{title:"Drilldown",dir:q,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:M}]},{title:"Animation",dir:P,children:[{title:"Data Transition",dir:x}]},{title:"Interaction",dir:Q,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:t,draft:i},{title:ti,dir:ei},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:li}]}]},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/how-to/interaction/drag",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> |
