| <!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>Drag - Interaction - How To Guides - Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://echarts.apache.org/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/4d2a12b.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/fa73816a85b29fbf7562.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8117eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/b964c20bb1562bc48da6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1f3ef45.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/60d2f1dbd961abb7604b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/ba9ec8a.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/43cd67c0cf5a9d972051.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/3556c50.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9d86a6602b3f4dd6c979.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/8117eb7.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1f3ef45.css"><link rel="stylesheet" href="/handbook/_nuxt/css/ba9ec8a.css"><link rel="stylesheet" href="/handbook/_nuxt/css/3556c50.css"> |
| </head> |
| <body> |
| <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">Migration from v4 to v5</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-3-0" class="nav-link"><span class="title">5.3</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-4-0" class="nav-link"><span class="title">5.4</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Animation</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/animation/transition" class="nav-link"><span class="title">Data Transition</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-up"></span></a> <ul class="nav bd-sidenav level2"><li class="nav-item"><a href="/handbook/en/how-to/interaction/drag" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/interaction/coarse-pointer" class="nav-link"><span class="title">Intelligent Pointer Snapping</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practices/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="an-example%3A-implement-dragging" tabindex="-1">An Example: Implement Dragging</h1> <p>This is a tiny example, introducing how to implement dragging of graphic elements in Apache ECharts<sup>TM</sup>. From this example, we will see how to make an application with rich intractivity based on echarts API.</p> <p><iframe width="100%" height="400" src=""></iframe></p> <p>This example mainly implements that dragging points of a curve and by which the curve is modified. Although it is simple example, but we can do more based on that, like edit charts viually. So let's get started from this simple example.</p> <h2 id="implement-basic-dragging" tabindex="-1">Implement basic dragging</h2> <p>First of all, we create a basic <a href="https://echarts.apache.org/option.html#series-line">line chart (line series)</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 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 comment">// Set a big symbolSize for dragging convenience.</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></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>Since the symbols in line is not draggable, we make them draggable by using <a href="https://echarts.apache.org/option.html#graphic">graphic component</a> to add draggable circular elements to symbols respectively.</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">// Declare a graphic component, which contains some graphic elements</span> |
| <span class="token comment">// with the type of 'circle'.</span> |
| <span class="token comment">// Here we have used the method `echarts.util.map`, which has the same</span> |
| <span class="token comment">// behavior as Array.prototype.map, and is compatible with ES5-.</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' means this graphic element is a shape of circle.</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">// The radius of the circle.</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 is used to located the circle. position:</span> |
| <span class="token comment">// [x, y] means translate the circle to the position [x, y].</span> |
| <span class="token comment">// The API `convertToPixel` is used to get the position of</span> |
| <span class="token comment">// the circle, which will introduced later.</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">// Make the circle invisible (but mouse event works as normal).</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">// Make the circle draggable.</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">// Give a big z value, which makes the circle cover the symbol</span> |
| <span class="token comment">// in line series.</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">// This is the event handler of dragging, which will be triggered</span> |
| <span class="token comment">// repeatly while dragging. See more details below.</span> |
| <span class="token comment">// A util method `echarts.util.curry` is used here to generate a</span> |
| <span class="token comment">// new function the same as `onPointDragging`, except that the</span> |
| <span class="token comment">// first parameter is fixed to be the `dataIndex` here.</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>In the code above, API <a href="api.html#echartsInstance.convertToPixel">convertToPixel</a> is used to convert data to its "pixel coodinate", based on which each graphic elements can be rendered on canvas. The term "pixel coodinate" means the coordinate is in canvas pixel, whose origin is the top-left of the canvas. In the sentence <code>myChart.convertToPixel('grid', dataItem)</code>, the first parameter <code>'grid'</code> indicates that <code>dataItem</code> should be converted in the first <a href="https://echarts.apache.org/option.html#grid">grid component (cartesian)</a>.</p> <p><strong>Notice:</strong> <code>convertToPixel</code> should not be called before the first time that <code>setOption</code> called. Namely, it can only be used after coordinate systems (grid/polar/...) initialized.</p> <p>Now points have been made draggable. Then we will bind event listeners on dragging to those points.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// This function will be called repeatly while dragging.</span> |
| <span class="token comment">// The mission of this function is to update `series.data` based on</span> |
| <span class="token comment">// the new points updated by dragging, and to re-render the line</span> |
| <span class="token comment">// series based on the new data, by which the graphic elements of the</span> |
| <span class="token comment">// line series can be synchronized with dragging.</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">// Here the `data` is declared in the code block in the beginning</span> |
| <span class="token comment">// of this article. The `this` refers to the dragged circle.</span> |
| <span class="token comment">// `this.position` is the current position of the circle.</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">// Re-render the chart based on the updated `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>In the code above, API <a href="api.html#echartsInstance.convertFromPixel">convertFromPixel</a> is used, which is the reversed process of <a href="api.html#echartsInstance.convertToPixel">convertToPixel</a>. <code>myChart.convertFromPixel('grid', this.position)</code> converts a pixel coordinate to data item in <a href="https://echarts.apache.org/option.html#grid">grid (cartesian)</a>.</p> <p>Finally, add those code to make graphic elements responsive to change of canvas size.</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">// Re-calculate the position of each circle and update chart using `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="add-tooltip-component" tabindex="-1">Add tooltip component</h2> <p>Now basic functionality have been implemented by parte 1. If we need the data can be displayed realtime when dragging, we can use <a href="https://echarts.apache.org/option.html#tooltip">tooltip component</a> to do that. Nevertheless, tooltip component has its default "show/hide rule", which is not applicable in this case. So we need to customize the "show/hide rule" for our case.</p> <p>Add these snippets to the code block above:</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">// Means disable default "show/hide rule".</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">// Customize "show/hide rule", show when mouse over, hide when mouse out.</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>The API <a href="https://echarts.apache.org//api.html#echartsInstance.dispatchAction">dispatchAction</a> is used to show/hide tooltip content, where actions <a href="https://echarts.apache.org//api.html#action.tooltip.showTip">showTip</a> and <a href="api.html#action.tooltip.hideTip">hideTip</a> is dispatched.</p> <h2 id="full-code" tabindex="-1">Full code</h2> <p>Full code is shown as follow:</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>With knowledge introduced above, more feature can be implemented. For example, <a href="https://echarts.apache.org/option.html#dataZoom">dataZoom component</a> can be added to cooperate with the cartesian, or we can make a plotting board on coordinate systems. Use your imagination ~</p></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">Contributors</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/how-to/interaction/drag.md" title="Edit this Document" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">Edit this page on GitHub</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60" loading="lazy"> <span>pissang</span></a></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,o,r,n,c,I,h,C,s,G,p,b,A,m,Z,B,y,w,X,u,R,Y,W,v,F,K,H,V,S,J,L,U,N,k,f,z,x,j,T,M,Q,D,E,P,O,q,_,$,ii,ti,ei,li){return{layout:"default",data:[{html:'<h1 id="an-example%3A-implement-dragging" tabindex="-1">An Example: Implement Dragging</h1>\n<p>This is a tiny example, introducing how to implement dragging of graphic elements in Apache ECharts<sup>TM</sup>. From this example, we will see how to make an application with rich intractivity based on echarts API.</p>\n<p><md-example src="line-draggable" height="400"></md-example></p>\n<p>This example mainly implements that dragging points of a curve and by which the curve is modified. Although it is simple example, but we can do more based on that, like edit charts viually. So let\'s get started from this simple example.</p>\n<h2 id="implement-basic-dragging" tabindex="-1">Implement basic dragging</h2>\n<p>First of all, we create a basic <a href="https://echarts.apache.org/option.html#series-line">line chart (line series)</a>:</p>\n<md-code-block lang="js" code="\'dmFyIHN5bWJvbFNpemUgPSAyMDsKdmFyIGRhdGEgPSBbCiAgWzE1LCAwXSwKICBbLTUwLCAxMF0sCiAgWy01Ni41LCAyMF0sCiAgWy00Ni41LCAzMF0sCiAgWy0yMi4xLCA0MF0KXTsKCm15Q2hhcnQuc2V0T3B0aW9uKHsKICB4QXhpczogewogICAgbWluOiAtMTAwLAogICAgbWF4OiA4MCwKICAgIHR5cGU6ICd2YWx1ZScsCiAgICBheGlzTGluZTogeyBvblplcm86IGZhbHNlIH0KICB9LAogIHlBeGlzOiB7CiAgICBtaW46IC0zMCwKICAgIG1heDogNjAsCiAgICB0eXBlOiAndmFsdWUnLAogICAgYXhpc0xpbmU6IHsgb25aZXJvOiBmYWxzZSB9CiAgfSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgaWQ6ICdhJywKICAgICAgdHlwZTogJ2xpbmUnLAogICAgICBzbW9vdGg6IHRydWUsCiAgICAgIC8vIFNldCBhIGJpZyBzeW1ib2xTaXplIGZvciBkcmFnZ2luZyBjb252ZW5pZW5jZS4KICAgICAgc3ltYm9sU2l6ZTogc3ltYm9sU2l6ZSwKICAgICAgZGF0YTogZGF0YQogICAgfQogIF0KfSk7\'" line-highlights="\'\'" />\n<p>Since the symbols in line is not draggable, we make them draggable by using <a href="https://echarts.apache.org/option.html#graphic">graphic component</a> to add draggable circular elements to symbols respectively.</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5zZXRPcHRpb24oewogIC8vIERlY2xhcmUgYSBncmFwaGljIGNvbXBvbmVudCwgd2hpY2ggY29udGFpbnMgc29tZSBncmFwaGljIGVsZW1lbnRzCiAgLy8gd2l0aCB0aGUgdHlwZSBvZiAnY2lyY2xlJy4KICAvLyBIZXJlIHdlIGhhdmUgdXNlZCB0aGUgbWV0aG9kIGBlY2hhcnRzLnV0aWwubWFwYCwgd2hpY2ggaGFzIHRoZSBzYW1lCiAgLy8gYmVoYXZpb3IgYXMgQXJyYXkucHJvdG90eXBlLm1hcCwgYW5kIGlzIGNvbXBhdGlibGUgd2l0aCBFUzUtLgogIGdyYXBoaWM6IGVjaGFydHMudXRpbC5tYXAoZGF0YSwgZnVuY3Rpb24oZGF0YUl0ZW0sIGRhdGFJbmRleCkgewogICAgcmV0dXJuIHsKICAgICAgLy8gJ2NpcmNsZScgbWVhbnMgdGhpcyBncmFwaGljIGVsZW1lbnQgaXMgYSBzaGFwZSBvZiBjaXJjbGUuCiAgICAgIHR5cGU6ICdjaXJjbGUnLAoKICAgICAgc2hhcGU6IHsKICAgICAgICAvLyBUaGUgcmFkaXVzIG9mIHRoZSBjaXJjbGUuCiAgICAgICAgcjogc3ltYm9sU2l6ZSAvIDIKICAgICAgfSwKICAgICAgLy8gVHJhbnNmb3JtIGlzIHVzZWQgdG8gbG9jYXRlZCB0aGUgY2lyY2xlLiBwb3NpdGlvbjoKICAgICAgLy8gW3gsIHldIG1lYW5zIHRyYW5zbGF0ZSB0aGUgY2lyY2xlIHRvIHRoZSBwb3NpdGlvbiBbeCwgeV0uCiAgICAgIC8vIFRoZSBBUEkgYGNvbnZlcnRUb1BpeGVsYCBpcyB1c2VkIHRvIGdldCB0aGUgcG9zaXRpb24gb2YKICAgICAgLy8gdGhlIGNpcmNsZSwgd2hpY2ggd2lsbCBpbnRyb2R1Y2VkIGxhdGVyLgogICAgICBwb3NpdGlvbjogbXlDaGFydC5jb252ZXJ0VG9QaXhlbCgnZ3JpZCcsIGRhdGFJdGVtKSwKCiAgICAgIC8vIE1ha2UgdGhlIGNpcmNsZSBpbnZpc2libGUgKGJ1dCBtb3VzZSBldmVudCB3b3JrcyBhcyBub3JtYWwpLgogICAgICBpbnZpc2libGU6IHRydWUsCiAgICAgIC8vIE1ha2UgdGhlIGNpcmNsZSBkcmFnZ2FibGUuCiAgICAgIGRyYWdnYWJsZTogdHJ1ZSwKICAgICAgLy8gR2l2ZSBhIGJpZyB6IHZhbHVlLCB3aGljaCBtYWtlcyB0aGUgY2lyY2xlIGNvdmVyIHRoZSBzeW1ib2wKICAgICAgLy8gaW4gbGluZSBzZXJpZXMuCiAgICAgIHo6IDEwMCwKICAgICAgLy8gVGhpcyBpcyB0aGUgZXZlbnQgaGFuZGxlciBvZiBkcmFnZ2luZywgd2hpY2ggd2lsbCBiZSB0cmlnZ2VyZWQKICAgICAgLy8gcmVwZWF0bHkgd2hpbGUgZHJhZ2dpbmcuIFNlZSBtb3JlIGRldGFpbHMgYmVsb3cuCiAgICAgIC8vIEEgdXRpbCBtZXRob2QgYGVjaGFydHMudXRpbC5jdXJyeWAgaXMgdXNlZCBoZXJlIHRvIGdlbmVyYXRlIGEKICAgICAgLy8gbmV3IGZ1bmN0aW9uIHRoZSBzYW1lIGFzIGBvblBvaW50RHJhZ2dpbmdgLCBleGNlcHQgdGhhdCB0aGUKICAgICAgLy8gZmlyc3QgcGFyYW1ldGVyIGlzIGZpeGVkIHRvIGJlIHRoZSBgZGF0YUluZGV4YCBoZXJlLgogICAgICBvbmRyYWc6IGVjaGFydHMudXRpbC5jdXJyeShvblBvaW50RHJhZ2dpbmcsIGRhdGFJbmRleCkKICAgIH07CiAgfSkKfSk7\'" line-highlights="\'\'" />\n<p>In the code above, API <a href="api.html#echartsInstance.convertToPixel">convertToPixel</a> is used to convert data to its "pixel coodinate", based on which each graphic elements can be rendered on canvas. The term "pixel coodinate" means the coordinate is in canvas pixel, whose origin is the top-left of the canvas. In the sentence <code>myChart.convertToPixel(\'grid\', dataItem)</code>, the first parameter <code>\'grid\'</code> indicates that <code>dataItem</code> should be converted in the first <a href="https://echarts.apache.org/option.html#grid">grid component (cartesian)</a>.</p>\n<p><strong>Notice:</strong> <code>convertToPixel</code> should not be called before the first time that <code>setOption</code> called. Namely, it can only be used after coordinate systems (grid/polar/...) initialized.</p>\n<p>Now points have been made draggable. Then we will bind event listeners on dragging to those points.</p>\n<md-code-block lang="js" code="\'Ly8gVGhpcyBmdW5jdGlvbiB3aWxsIGJlIGNhbGxlZCByZXBlYXRseSB3aGlsZSBkcmFnZ2luZy4KLy8gVGhlIG1pc3Npb24gb2YgdGhpcyBmdW5jdGlvbiBpcyB0byB1cGRhdGUgYHNlcmllcy5kYXRhYCBiYXNlZCBvbgovLyB0aGUgbmV3IHBvaW50cyB1cGRhdGVkIGJ5IGRyYWdnaW5nLCBhbmQgdG8gcmUtcmVuZGVyIHRoZSBsaW5lCi8vIHNlcmllcyBiYXNlZCBvbiB0aGUgbmV3IGRhdGEsIGJ5IHdoaWNoIHRoZSBncmFwaGljIGVsZW1lbnRzIG9mIHRoZQovLyBsaW5lIHNlcmllcyBjYW4gYmUgc3luY2hyb25pemVkIHdpdGggZHJhZ2dpbmcuCmZ1bmN0aW9uIG9uUG9pbnREcmFnZ2luZyhkYXRhSW5kZXgpIHsKICAvLyBIZXJlIHRoZSBgZGF0YWAgaXMgZGVjbGFyZWQgaW4gdGhlIGNvZGUgYmxvY2sgaW4gdGhlIGJlZ2lubmluZwogIC8vIG9mIHRoaXMgYXJ0aWNsZS4gVGhlIGB0aGlzYCByZWZlcnMgdG8gdGhlIGRyYWdnZWQgY2lyY2xlLgogIC8vIGB0aGlzLnBvc2l0aW9uYCBpcyB0aGUgY3VycmVudCBwb3NpdGlvbiBvZiB0aGUgY2lyY2xlLgogIGRhdGFbZGF0YUluZGV4XSA9IG15Q2hhcnQuY29udmVydEZyb21QaXhlbCgnZ3JpZCcsIHRoaXMucG9zaXRpb24pOwogIC8vIFJlLXJlbmRlciB0aGUgY2hhcnQgYmFzZWQgb24gdGhlIHVwZGF0ZWQgYGRhdGFgLgogIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgIHNlcmllczogWwogICAgICB7CiAgICAgICAgaWQ6ICdhJywKICAgICAgICBkYXRhOiBkYXRhCiAgICAgIH0KICAgIF0KICB9KTsKfQ\'" line-highlights="\'\'" />\n<p>In the code above, API <a href="api.html#echartsInstance.convertFromPixel">convertFromPixel</a> is used, which is the reversed process of <a href="api.html#echartsInstance.convertToPixel">convertToPixel</a>. <code>myChart.convertFromPixel(\'grid\', this.position)</code> converts a pixel coordinate to data item in <a href="https://echarts.apache.org/option.html#grid">grid (cartesian)</a>.</p>\n<p>Finally, add those code to make graphic elements responsive to change of canvas size.</p>\n<md-code-block lang="js" code="\'d2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ3Jlc2l6ZScsIGZ1bmN0aW9uKCkgewogIC8vIFJlLWNhbGN1bGF0ZSB0aGUgcG9zaXRpb24gb2YgZWFjaCBjaXJjbGUgYW5kIHVwZGF0ZSBjaGFydCB1c2luZyBgc2V0T3B0aW9uYC4KICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICBncmFwaGljOiBlY2hhcnRzLnV0aWwubWFwKGRhdGEsIGZ1bmN0aW9uKGl0ZW0sIGRhdGFJbmRleCkgewogICAgICByZXR1cm4gewogICAgICAgIHBvc2l0aW9uOiBteUNoYXJ0LmNvbnZlcnRUb1BpeGVsKCdncmlkJywgaXRlbSkKICAgICAgfTsKICAgIH0pCiAgfSk7Cn0pOw\'" line-highlights="\'\'" />\n<h2 id="add-tooltip-component" tabindex="-1">Add tooltip component</h2>\n<p>Now basic functionality have been implemented by parte 1. If we need the data can be displayed realtime when dragging, we can use <a href="https://echarts.apache.org/option.html#tooltip">tooltip component</a> to do that. Nevertheless, tooltip component has its default "show/hide rule", which is not applicable in this case. So we need to customize the "show/hide rule" for our case.</p>\n<p>Add these snippets to the code block above:</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5zZXRPcHRpb24oewogIC8vIC4uLiwKICB0b29sdGlwOiB7CiAgICAvLyBNZWFucyBkaXNhYmxlIGRlZmF1bHQgInNob3cvaGlkZSBydWxlIi4KICAgIHRyaWdnZXJPbjogJ25vbmUnLAogICAgZm9ybWF0dGVyOiBmdW5jdGlvbihwYXJhbXMpIHsKICAgICAgcmV0dXJuICgKICAgICAgICAnWDogJyArCiAgICAgICAgcGFyYW1zLmRhdGFbMF0udG9GaXhlZCgyKSArCiAgICAgICAgJzxicj5ZOiAnICsKICAgICAgICBwYXJhbXMuZGF0YVsxXS50b0ZpeGVkKDIpCiAgICAgICk7CiAgICB9CiAgfQp9KTs\'" line-highlights="\'\'" />\n<md-code-block lang="js" code="\'bXlDaGFydC5zZXRPcHRpb24oewogIGdyYXBoaWM6IGRhdGEubWFwKGZ1bmN0aW9uKGl0ZW0sIGRhdGFJbmRleCkgewogICAgcmV0dXJuIHsKICAgICAgdHlwZTogJ2NpcmNsZScsCiAgICAgIC8vIC4uLiwKICAgICAgLy8gQ3VzdG9taXplICJzaG93L2hpZGUgcnVsZSIsIHNob3cgd2hlbiBtb3VzZSBvdmVyLCBoaWRlIHdoZW4gbW91c2Ugb3V0LgogICAgICBvbm1vdXNlbW92ZTogZWNoYXJ0cy51dGlsLmN1cnJ5KHNob3dUb29sdGlwLCBkYXRhSW5kZXgpLAogICAgICBvbm1vdXNlb3V0OiBlY2hhcnRzLnV0aWwuY3VycnkoaGlkZVRvb2x0aXAsIGRhdGFJbmRleCkKICAgIH07CiAgfSkKfSk7CgpmdW5jdGlvbiBzaG93VG9vbHRpcChkYXRhSW5kZXgpIHsKICBteUNoYXJ0LmRpc3BhdGNoQWN0aW9uKHsKICAgIHR5cGU6ICdzaG93VGlwJywKICAgIHNlcmllc0luZGV4OiAwLAogICAgZGF0YUluZGV4OiBkYXRhSW5kZXgKICB9KTsKfQoKZnVuY3Rpb24gaGlkZVRvb2x0aXAoZGF0YUluZGV4KSB7CiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7CiAgICB0eXBlOiAnaGlkZVRpcCcKICB9KTsKfQ\'" line-highlights="\'\'" />\n<p>The API <a href="https://echarts.apache.org//api.html#echartsInstance.dispatchAction">dispatchAction</a> is used to show/hide tooltip content, where actions <a href="https://echarts.apache.org//api.html#action.tooltip.showTip">showTip</a> and <a href="api.html#action.tooltip.hideTip">hideTip</a> is dispatched.</p>\n<h2 id="full-code" tabindex="-1">Full code</h2>\n<p>Full code is shown as follow:</p>\n<md-code-block lang="js" code="\'aW1wb3J0IGVjaGFydHMgZnJvbSAnZWNoYXJ0cyc7Cgp2YXIgc3ltYm9sU2l6ZSA9IDIwOwp2YXIgZGF0YSA9IFsKICBbMTUsIDBdLAogIFstNTAsIDEwXSwKICBbLTU2LjUsIDIwXSwKICBbLTQ2LjUsIDMwXSwKICBbLTIyLjEsIDQwXQpdOwp2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpKTsKbXlDaGFydC5zZXRPcHRpb24oewogIHRvb2x0aXA6IHsKICAgIHRyaWdnZXJPbjogJ25vbmUnLAogICAgZm9ybWF0dGVyOiBmdW5jdGlvbihwYXJhbXMpIHsKICAgICAgcmV0dXJuICgKICAgICAgICAnWDogJyArCiAgICAgICAgcGFyYW1zLmRhdGFbMF0udG9GaXhlZCgyKSArCiAgICAgICAgJzxiciAvPlk6ICcgKwogICAgICAgIHBhcmFtcy5kYXRhWzFdLnRvRml4ZWQoMikKICAgICAgKTsKICAgIH0KICB9LAogIHhBeGlzOiB7IG1pbjogLTEwMCwgbWF4OiA4MCwgdHlwZTogJ3ZhbHVlJywgYXhpc0xpbmU6IHsgb25aZXJvOiBmYWxzZSB9IH0sCiAgeUF4aXM6IHsgbWluOiAtMzAsIG1heDogNjAsIHR5cGU6ICd2YWx1ZScsIGF4aXNMaW5lOiB7IG9uWmVybzogZmFsc2UgfSB9LAogIHNlcmllczogWwogICAgeyBpZDogJ2EnLCB0eXBlOiAnbGluZScsIHNtb290aDogdHJ1ZSwgc3ltYm9sU2l6ZTogc3ltYm9sU2l6ZSwgZGF0YTogZGF0YSB9CiAgXQp9KTsKbXlDaGFydC5zZXRPcHRpb24oewogIGdyYXBoaWM6IGVjaGFydHMudXRpbC5tYXAoZGF0YSwgZnVuY3Rpb24oaXRlbSwgZGF0YUluZGV4KSB7CiAgICByZXR1cm4gewogICAgICB0eXBlOiAnY2lyY2xlJywKICAgICAgcG9zaXRpb246IG15Q2hhcnQuY29udmVydFRvUGl4ZWwoJ2dyaWQnLCBpdGVtKSwKICAgICAgc2hhcGU6IHsgcjogc3ltYm9sU2l6ZSAvIDIgfSwKICAgICAgaW52aXNpYmxlOiB0cnVlLAogICAgICBkcmFnZ2FibGU6IHRydWUsCiAgICAgIG9uZHJhZzogZWNoYXJ0cy51dGlsLmN1cnJ5KG9uUG9pbnREcmFnZ2luZywgZGF0YUluZGV4KSwKICAgICAgb25tb3VzZW1vdmU6IGVjaGFydHMudXRpbC5jdXJyeShzaG93VG9vbHRpcCwgZGF0YUluZGV4KSwKICAgICAgb25tb3VzZW91dDogZWNoYXJ0cy51dGlsLmN1cnJ5KGhpZGVUb29sdGlwLCBkYXRhSW5kZXgpLAogICAgICB6OiAxMDAKICAgIH07CiAgfSkKfSk7CndpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdyZXNpemUnLCBmdW5jdGlvbigpIHsKICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICBncmFwaGljOiBlY2hhcnRzLnV0aWwubWFwKGRhdGEsIGZ1bmN0aW9uKGl0ZW0sIGRhdGFJbmRleCkgewogICAgICByZXR1cm4geyBwb3NpdGlvbjogbXlDaGFydC5jb252ZXJ0VG9QaXhlbCgnZ3JpZCcsIGl0ZW0pIH07CiAgICB9KQogIH0pOwp9KTsKZnVuY3Rpb24gc2hvd1Rvb2x0aXAoZGF0YUluZGV4KSB7CiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7CiAgICB0eXBlOiAnc2hvd1RpcCcsCiAgICBzZXJpZXNJbmRleDogMCwKICAgIGRhdGFJbmRleDogZGF0YUluZGV4CiAgfSk7Cn0KZnVuY3Rpb24gaGlkZVRvb2x0aXAoZGF0YUluZGV4KSB7CiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7IHR5cGU6ICdoaWRlVGlwJyB9KTsKfQpmdW5jdGlvbiBvblBvaW50RHJhZ2dpbmcoZGF0YUluZGV4LCBkeCwgZHkpIHsKICBkYXRhW2RhdGFJbmRleF0gPSBteUNoYXJ0LmNvbnZlcnRGcm9tUGl4ZWwoJ2dyaWQnLCB0aGlzLnBvc2l0aW9uKTsKICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICBzZXJpZXM6IFsKICAgICAgewogICAgICAgIGlkOiAnYScsCiAgICAgICAgZGF0YTogZGF0YQogICAgICB9CiAgICBdCiAgfSk7Cn0\'" line-highlights="\'\'" />\n<p>With knowledge introduced above, more feature can be implemented. For example, <a href="https://echarts.apache.org/option.html#dataZoom">dataZoom component</a> can be added to cooperate with the cartesian, or we can make a plotting board on coordinate systems. Use your imagination ~</p>\n',postPath:"en/how-to/interaction/drag",title:"Drag - Interaction - How To Guides"}],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:o,draft:i},{title:"寻求帮助",dir:r},{title:"版本特性",dir:n,children:[{title:"ECharts 5 特性介绍",dir:c},{title:"v4 升级 v5 指南",dir:I},{title:5.2,dir:h},{title:5.3,dir:C},{title:5.4,dir:s}]}]},{title:"概念篇",dir:G,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:b,draft:i},{title:"系列",dir:A,draft:i},{title:"样式",dir:m},{title:"数据集",dir:Z},{title:"数据转换",dir:B},{title:"坐标系",dir:y,draft:i},{title:"坐标轴",dir:w},{title:"视觉映射",dir:e},{title:"图例",dir:X},{title:"事件与行为",dir:u}]},{title:"应用篇",dir:R,children:[{title:"常用图表类型",dir:Y,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:W},{title:"堆叠柱状图",dir:v},{title:"动态排序柱状图",dir:F},{title:"极坐标系柱状图",dir:K,draft:i},{title:"阶梯瀑布图",dir:H},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:V,children:[{title:"基础折线图",dir:S},{title:"堆叠折线图",dir:J},{title:"区域面积图",dir:L},{title:"平滑曲线图",dir:U},{title:"阶梯线图",dir:N}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:k},{title:"圆环图",dir:f},{title:"南丁格尔图（玫瑰图）",dir:z}]},{title:"散点图",dir:x,children:[{title:"基础散点图",dir:j}]}]},{title:T,dir:t,draft:i},{title:"跨平台方案",dir:M,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:Q},{title:"数据下钻",dir:D,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:E}]},{title:"动画",dir:P,children:[{title:"数据过渡动画",dir:O}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:i},{title:"智能指针吸附",dir:$}]}]},{title:"最佳实践",dir:ii,children:[{title:T,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:o,draft:i},{title:"Get Help",dir:r},{title:"What's New",dir:n,children:[{title:"ECharts 5 Features",dir:c},{title:"Migration from v4 to v5",dir:I},{title:5.2,dir:h},{title:5.3,dir:C},{title:5.4,dir:s}]}]},{title:"Concepts",dir:G,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:b,draft:i},{title:"Series",dir:A,draft:i},{title:"Style",dir:m},{title:"Dataset",dir:Z},{title:"Data Transform",dir:B},{title:"Coordinate",dir:y,draft:i},{title:"Axis",dir:w},{title:"Visual Mapping",dir:e},{title:"Legend",dir:X},{title:"Event and Action",dir:u}]},{title:"How To Guides",dir:R,children:[{title:"Common Charts",dir:Y,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:W},{title:"Stacked Bar",dir:v},{title:"Bar Racing",dir:F},{title:"Bar Polar",dir:K,draft:i},{title:"Waterfall",dir:H}]},{title:"Line",dir:V,children:[{title:"Basic Line",dir:S},{title:"Stacked Line",dir:J},{title:"Area Chart",dir:L},{title:"Smoothed Line",dir:U},{title:"Step Line",dir:N}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:k},{title:"Ring Style",dir:f},{title:"Rose Style",dir:z}]},{title:"Scatter",dir:x,children:[{title:"Basic Scatter",dir:j}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:M,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:Q},{title:"Drilldown",dir:D,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:E}]},{title:"Animation",dir:P,children:[{title:"Data Transition",dir:O}]},{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:"/en/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> |
