| <!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>Data Transition - Animation - 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-up"></span></a> <ul class="nav bd-sidenav level2"><li class="nav-item"><a href="/handbook/en/how-to/animation/transition" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Data Transition</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/interaction/coarse-pointer" class="nav-link"><span class="title">Intelligent Pointer Snapping</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practices/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="data-transition" tabindex="-1">Data Transition</h1> <p>Apache ECharts<sup>TM</sup> will apply transition on the position, scale, shape when adding, updating and removing data. It makes the chart smoother and shows relationships between data better. Often the developer does not need to worry about how to use the animations, but simply uses <code>setOption</code> to update the data, and ECharts will find the difference between the last data and automatically apply the most appropriate transition animation.</p> <p>For example, the following example shows the transition on a timed update of the pie chart data.</p> <div class="md-live layout-lr"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">function makeRandomData() { |
| return [ |
| { |
| value: Math.random(), |
| name: 'A' |
| }, |
| { |
| value: Math.random(), |
| name: 'B' |
| }, |
| { |
| value: Math.random(), |
| name: 'C' |
| } |
| ]; |
| } |
| option = { |
| series: [ |
| { |
| type: 'pie', |
| radius: [0, '50%'], |
| data: makeRandomData() |
| } |
| ] |
| }; |
| |
| setInterval(() => { |
| myChart.setOption({ |
| series: { |
| data: makeRandomData() |
| } |
| }); |
| }, 2000);</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">function</span> <span class="token function">makeRandomData</span><span class="token punctuation">(</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 punctuation">{</span> |
| <span class="token literal-property property">value</span><span class="token operator">:</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'A'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">value</span><span class="token operator">:</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'B'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">value</span><span class="token operator">:</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'C'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| option <span class="token operator">=</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">type</span><span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">radius</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token string">'50%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token function">makeRandomData</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 function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| 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 literal-property property">data</span><span class="token operator">:</span> <span class="token function">makeRandomData</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 number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="configuration-of-transitions" tabindex="-1">Configuration of Transitions</h2> <p>Because adding and updating data will often require different animations, for example we would expect the data update animation to be shorter, ECharts distinguishes between the two animation configurations.</p> <ul><li>For adding data, we apply an enter animation, using <code>animationDuration</code>, <code>animationEasing</code>, and <code>animationDelay</code> to configure the duration, easing and delay of the animation respectively.</li> <li>For updating data, we will apply an update animation with <code>animationDurationUpdate</code>, <code>animationEasingUpdate</code>, and <code>animationDelayUpdate</code> configuring the duration, easing and delay of the animation respectively.</li></ul> <p>As you can see, the update animation configuration is the enter animation configuration with the <code>Update</code> suffix.</p> <blockquote><p>Each time using setOption in ECharts, the data will be diffed to the last updated data and three states are performed for the data based on the diff result: add, update and remove. This diff is based on the <code>name</code> of the data, for example, if the last update had three <code>names</code> of <code>'A'</code>, <code>'B'</code>, <code>'C'</code>, and the new update has become <code>'B'</code>, <code>'C'</code>, <code>'D'</code>, then the data <code>'B'</code>, <code>'C'</code> will be updated, the data <code>'A'</code> will be removed, and the data <code>' D'</code> will be added. If it is the first time <code>setOption</code>, because there is no old data, all data will be added. Depending on the three states ECharts will apply entry animation, update animation and leave animation respectively.</p></blockquote> <p>All these configurations can be set at the top level of <code>option</code> for all series and components, or separately for each series.</p> <p>If we want to turn off animations, we can simply set <code>option.animation</code> to <code>false</code>.</p> <h3 id="animation-duration" tabindex="-1">Animation Duration</h3> <p><code>animationDuration</code> and <code>animationDurationUpdate</code> are used to set the duration of the animation in <code>ms</code>. Setting a longer animation duration allows the user to see the effect of the transition animation more clearly, but we also need to be careful that too much time can make the user lose patience while waiting animation to be finished.</p> <p>A setting of <code>0</code> will turn the animation off, and this can be achieved by setting the corresponding configuration to <code>0</code> individually when we only want to turn off the enter animation or update animation.</p> <h3 id="animation-easing" tabindex="-1">Animation Easing</h3> <p>The <code>animationEasing</code> and <code>animationEasingUpdate</code> configuration items are used to set the animation's easing function, which is a function that inputs the animation time and outputs the animation progress.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token punctuation">(</span>t<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">number</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 common animation easing functions such as <code>'cubicIn'</code> and <code>'cubicOut'</code> are built into ECharts and can be used directly</p> <p>Built-in easing functions.</p> <iframe width="100%" height="400" src=""></iframe> <h3 id="animation-delay" tabindex="-1">Animation Delay</h3> <p>The <code>animationDelay</code> and <code>animationDelayUpdate</code> are used to set the time at which the animation delay starts, usually we will use a callback function to set different delays for different data to achieve the effect of staggered animations:</p> <div class="md-live layout-lr"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">var xAxisData = []; |
| var data1 = []; |
| var data2 = []; |
| for (var i = 0; i < 100; i++) { |
| xAxisData.push('A' + i); |
| data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5); |
| data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5); |
| } |
| option = { |
| legend: { |
| data: ['bar', 'bar2'] |
| }, |
| xAxis: { |
| data: xAxisData, |
| splitLine: { |
| show: false |
| } |
| }, |
| yAxis: {}, |
| series: [ |
| { |
| name: 'bar', |
| type: 'bar', |
| data: data1, |
| emphasis: { |
| focus: 'series' |
| }, |
| animationDelay: function(idx) { |
| return idx * 10; |
| } |
| }, |
| { |
| name: 'bar2', |
| type: 'bar', |
| data: data2, |
| emphasis: { |
| focus: 'series' |
| }, |
| animationDelay: function(idx) { |
| return idx * 10 + 100; |
| } |
| } |
| ], |
| animationEasing: 'elasticOut', |
| animationDelayUpdate: function(idx) { |
| return idx * 5; |
| } |
| };</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">var</span> xAxisData <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> |
| <span class="token keyword">var</span> data1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> |
| <span class="token keyword">var</span> data2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> |
| <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">100</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| xAxisData<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'A'</span> <span class="token operator">+</span> i<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| data1<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">sin</span><span class="token punctuation">(</span>i <span class="token operator">/</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>i <span class="token operator">/</span> <span class="token number">5</span> <span class="token operator">-</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">+</span> i <span class="token operator">/</span> <span class="token number">6</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| data2<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">cos</span><span class="token punctuation">(</span>i <span class="token operator">/</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>i <span class="token operator">/</span> <span class="token number">5</span> <span class="token operator">-</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">+</span> i <span class="token operator">/</span> <span class="token number">6</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">legend</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'bar'</span><span class="token punctuation">,</span> <span class="token string">'bar2'</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">data</span><span class="token operator">:</span> xAxisData<span class="token punctuation">,</span> |
| <span class="token literal-property property">splitLine</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">show</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 punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> data1<span class="token punctuation">,</span> |
| <span class="token literal-property property">emphasis</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">focus</span><span class="token operator">:</span> <span class="token string">'series'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token function-variable function">animationDelay</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">idx</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> idx <span class="token operator">*</span> <span class="token number">10</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'bar2'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> data2<span class="token punctuation">,</span> |
| <span class="token literal-property property">emphasis</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">focus</span><span class="token operator">:</span> <span class="token string">'series'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token function-variable function">animationDelay</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">idx</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> idx <span class="token operator">*</span> <span class="token number">10</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 literal-property property">animationEasing</span><span class="token operator">:</span> <span class="token string">'elasticOut'</span><span class="token punctuation">,</span> |
| <span class="token function-variable function">animationDelayUpdate</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">idx</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> idx <span class="token operator">*</span> <span class="token number">5</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="performance-optimization-of-animations" tabindex="-1">Performance Optimization of Animations</h2> <p>When the amount of data is particularly large, running animation can have performance issue, so we can set <code>animation: false</code> to turn off animation.</p> <p>For charts where the amount of data changes dynamically, we recommend using the <code>animationThreshold</code> configuration, which allows ECharts to automatically turn off animation when the number of graphs in the canvas exceeds this threshold to improve drawing performance. This is often an empirical value, and ECharts is usually capable of rendering thousands of graphs in real time (our default value is also given as 2000), but if your charts are complex, or your user environment is harsh and there is a lot of other complex code running on the page at the same time, it may be appropriate to adjust this value downwards to ensure the smoothness of the whole application.</p> <h2 id="listening-to-the-end-of-animation" tabindex="-1">Listening to the End of Animation</h2> <p>Sometimes we want to get the result of the current rendering, if no animation is used, ECharts will perform the rendering directly after <code>setOption</code> and we can use <code>getDataURL</code> method to get the rendering result synchronisely.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token keyword">const</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>dom<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| animation<span class="token operator">:</span> <span class="token boolean">false</span> |
| <span class="token comment">//...</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token comment">// can be executed directly and synchronously</span> |
| <span class="token keyword">const</span> dataUrl <span class="token operator">=</span> chart<span class="token punctuation">.</span><span class="token function">getDataURL</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>But if the chart is animated, executing <code>getDataURL</code> right away will give us the picture at the beginning of the animation, not the final result. So we need to know when the animation has finished and then execute <code>getDataURL</code> to get the result.</p> <p>If you are sure of the duration of the animation, a simpler and more brutal way is to delay the execution with <code>setTimeout</code> depending on the duration of the animation:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code>chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| animationDuration<span class="token operator">:</span> <span class="token number">1000</span> |
| <span class="token comment">//...</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| <span class="token keyword">const</span> dataUrl <span class="token operator">=</span> chart<span class="token punctuation">.</span><span class="token function">getDataURL</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 number">1000</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>Alternatively, we can use the <code>rendered</code> event provided by ECharts to determine that the ECharts have finished animating and stopped rendering</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code>chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| animationDuration<span class="token operator">:</span> <span class="token number">1000</span> |
| <span class="token comment">//...</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">onRendered</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">const</span> dataUrl <span class="token operator">=</span> chart<span class="token punctuation">.</span><span class="token function">getDataURL</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token comment">// ...</span> |
| <span class="token comment">// This event will also be triggered if there is a subsequent interaction and the interaction is redrawn, so it needs to be removed when you're done using it</span> |
| chart<span class="token punctuation">.</span><span class="token function">off</span><span class="token punctuation">(</span><span class="token string">'rendered'</span><span class="token punctuation">,</span> onRendered<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| chart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'rendered'</span><span class="token punctuation">,</span> onRendered<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">Contributors</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/how-to/animation/transition.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(t,e,i,a,n,d,o,r,l,s,h,c,g,p,m,u,C,I,f,b,A,w,B,y,K,v,G,k,X,R,Z,S,Y,H,W,V,F,J,D,T,E,x,O,L,U,z,M,N,Q,P,j,_,q,$,tt,et,it,at){return{layout:"default",data:[{html:'<h1 id="data-transition" tabindex="-1">Data Transition</h1>\n<p>Apache ECharts<sup>TM</sup> will apply transition on the position, scale, shape when adding, updating and removing data. It makes the chart smoother and shows relationships between data better. Often the developer does not need to worry about how to use the animations, but simply uses <code>setOption</code> to update the data, and ECharts will find the difference between the last data and automatically apply the most appropriate transition animation.</p>\n<p>For example, the following example shows the transition on a timed update of the pie chart data.</p>\n<md-live lang="js" code="\'ZnVuY3Rpb24gbWFrZVJhbmRvbURhdGEoKSB7CiAgcmV0dXJuIFsKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdBJwogICAgfSwKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdCJwogICAgfSwKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdDJwogICAgfQogIF07Cn0Kb3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgcmFkaXVzOiBbMCwgJzUwJSddLAogICAgICBkYXRhOiBtYWtlUmFuZG9tRGF0YSgpCiAgICB9CiAgXQp9OwoKc2V0SW50ZXJ2YWwoKCkgPT4gewogIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgIHNlcmllczogewogICAgICBkYXRhOiBtYWtlUmFuZG9tRGF0YSgpCiAgICB9CiAgfSk7Cn0sIDIwMDApOw\'" v-bind="{layout: \'lr\'}" />\n<h2 id="configuration-of-transitions" tabindex="-1">Configuration of Transitions</h2>\n<p>Because adding and updating data will often require different animations, for example we would expect the data update animation to be shorter, ECharts distinguishes between the two animation configurations.</p>\n<ul>\n<li>For adding data, we apply an enter animation, using <code>animationDuration</code>, <code>animationEasing</code>, and <code>animationDelay</code> to configure the duration, easing and delay of the animation respectively.</li>\n<li>For updating data, we will apply an update animation with <code>animationDurationUpdate</code>, <code>animationEasingUpdate</code>, and <code>animationDelayUpdate</code> configuring the duration, easing and delay of the animation respectively.</li>\n</ul>\n<p>As you can see, the update animation configuration is the enter animation configuration with the <code>Update</code> suffix.</p>\n<blockquote>\n<p>Each time using setOption in ECharts, the data will be diffed to the last updated data and three states are performed for the data based on the diff result: add, update and remove. This diff is based on the <code>name</code> of the data, for example, if the last update had three <code>names</code> of <code>\'A\'</code>, <code>\'B\'</code>, <code>\'C\'</code>, and the new update has become <code>\'B\'</code>, <code>\'C\'</code>, <code>\'D\'</code>, then the data <code>\'B\'</code>, <code>\'C\'</code> will be updated, the data <code>\'A\'</code> will be removed, and the data <code>\' D\'</code> will be added. If it is the first time <code>setOption</code>, because there is no old data, all data will be added. Depending on the three states ECharts will apply entry animation, update animation and leave animation respectively.</p>\n</blockquote>\n<p>All these configurations can be set at the top level of <code>option</code> for all series and components, or separately for each series.</p>\n<p>If we want to turn off animations, we can simply set <code>option.animation</code> to <code>false</code>.</p>\n<h3 id="animation-duration" tabindex="-1">Animation Duration</h3>\n<p><code>animationDuration</code> and <code>animationDurationUpdate</code> are used to set the duration of the animation in <code>ms</code>. Setting a longer animation duration allows the user to see the effect of the transition animation more clearly, but we also need to be careful that too much time can make the user lose patience while waiting animation to be finished.</p>\n<p>A setting of <code>0</code> will turn the animation off, and this can be achieved by setting the corresponding configuration to <code>0</code> individually when we only want to turn off the enter animation or update animation.</p>\n<h3 id="animation-easing" tabindex="-1">Animation Easing</h3>\n<p>The <code>animationEasing</code> and <code>animationEasingUpdate</code> configuration items are used to set the animation\'s easing function, which is a function that inputs the animation time and outputs the animation progress.</p>\n<md-code-block lang="ts" code="\'KHQ6IG51bWJlcikgPT4gbnVtYmVyOw\'" line-highlights="\'\'" />\n<p>The common animation easing functions such as <code>\'cubicIn\'</code> and <code>\'cubicOut\'</code> are built into ECharts and can be used directly</p>\n<p>Built-in easing functions.</p>\n<md-example src="line-easing" width="100%" height="400" />\n<h3 id="animation-delay" tabindex="-1">Animation Delay</h3>\n<p>The <code>animationDelay</code> and <code>animationDelayUpdate</code> are used to set the time at which the animation delay starts, usually we will use a callback function to set different delays for different data to achieve the effect of staggered animations:</p>\n<md-live lang="ts" code="\'dmFyIHhBeGlzRGF0YSA9IFtdOwp2YXIgZGF0YTEgPSBbXTsKdmFyIGRhdGEyID0gW107CmZvciAodmFyIGkgPSAwOyBpIDwgMTAwOyBpKyspIHsKICB4QXhpc0RhdGEucHVzaCgnQScgKyBpKTsKICBkYXRhMS5wdXNoKChNYXRoLnNpbihpIC8gNSkgKiAoaSAvIDUgLSAxMCkgKyBpIC8gNikgKiA1KTsKICBkYXRhMi5wdXNoKChNYXRoLmNvcyhpIC8gNSkgKiAoaSAvIDUgLSAxMCkgKyBpIC8gNikgKiA1KTsKfQpvcHRpb24gPSB7CiAgbGVnZW5kOiB7CiAgICBkYXRhOiBbJ2JhcicsICdiYXIyJ10KICB9LAogIHhBeGlzOiB7CiAgICBkYXRhOiB4QXhpc0RhdGEsCiAgICBzcGxpdExpbmU6IHsKICAgICAgc2hvdzogZmFsc2UKICAgIH0KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ2JhcicsCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBkYXRhMSwKICAgICAgZW1waGFzaXM6IHsKICAgICAgICBmb2N1czogJ3NlcmllcycKICAgICAgfSwKICAgICAgYW5pbWF0aW9uRGVsYXk6IGZ1bmN0aW9uKGlkeCkgewogICAgICAgIHJldHVybiBpZHggKiAxMDsKICAgICAgfQogICAgfSwKICAgIHsKICAgICAgbmFtZTogJ2JhcjInLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogZGF0YTIsCiAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgZm9jdXM6ICdzZXJpZXMnCiAgICAgIH0sCiAgICAgIGFuaW1hdGlvbkRlbGF5OiBmdW5jdGlvbihpZHgpIHsKICAgICAgICByZXR1cm4gaWR4ICogMTAgKyAxMDA7CiAgICAgIH0KICAgIH0KICBdLAogIGFuaW1hdGlvbkVhc2luZzogJ2VsYXN0aWNPdXQnLAogIGFuaW1hdGlvbkRlbGF5VXBkYXRlOiBmdW5jdGlvbihpZHgpIHsKICAgIHJldHVybiBpZHggKiA1OwogIH0KfTs\'" v-bind="{ layout: \'lr\' }" />\n<h2 id="performance-optimization-of-animations" tabindex="-1">Performance Optimization of Animations</h2>\n<p>When the amount of data is particularly large, running animation can have performance issue, so we can set <code>animation: false</code> to turn off animation.</p>\n<p>For charts where the amount of data changes dynamically, we recommend using the <code>animationThreshold</code> configuration, which allows ECharts to automatically turn off animation when the number of graphs in the canvas exceeds this threshold to improve drawing performance. This is often an empirical value, and ECharts is usually capable of rendering thousands of graphs in real time (our default value is also given as 2000), but if your charts are complex, or your user environment is harsh and there is a lot of other complex code running on the page at the same time, it may be appropriate to adjust this value downwards to ensure the smoothness of the whole application.</p>\n<h2 id="listening-to-the-end-of-animation" tabindex="-1">Listening to the End of Animation</h2>\n<p>Sometimes we want to get the result of the current rendering, if no animation is used, ECharts will perform the rendering directly after <code>setOption</code> and we can use <code>getDataURL</code> method to get the rendering result synchronisely.</p>\n<md-code-block lang="ts" code="\'Y29uc3QgY2hhcnQgPSBlY2hhcnRzLmluaXQoZG9tKTsKY2hhcnQuc2V0T3B0aW9uKHsKICBhbmltYXRpb246IGZhbHNlCiAgLy8uLi4KfSk7Ci8vIGNhbiBiZSBleGVjdXRlZCBkaXJlY3RseSBhbmQgc3luY2hyb25vdXNseQpjb25zdCBkYXRhVXJsID0gY2hhcnQuZ2V0RGF0YVVSTCgpOw\'" line-highlights="\'\'" />\n<p>But if the chart is animated, executing <code>getDataURL</code> right away will give us the picture at the beginning of the animation, not the final result. So we need to know when the animation has finished and then execute <code>getDataURL</code> to get the result.</p>\n<p>If you are sure of the duration of the animation, a simpler and more brutal way is to delay the execution with <code>setTimeout</code> depending on the duration of the animation:</p>\n<md-code-block lang="ts" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICBhbmltYXRpb25EdXJhdGlvbjogMTAwMAogIC8vLi4uCn0pOwpzZXRUaW1lb3V0KCgpID0-IHsKICBjb25zdCBkYXRhVXJsID0gY2hhcnQuZ2V0RGF0YVVSTCgpOwp9LCAxMDAwKTs\'" line-highlights="\'\'" />\n<p>Alternatively, we can use the <code>rendered</code> event provided by ECharts to determine that the ECharts have finished animating and stopped rendering</p>\n<md-code-block lang="ts" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICBhbmltYXRpb25EdXJhdGlvbjogMTAwMAogIC8vLi4uCn0pOwoKZnVuY3Rpb24gb25SZW5kZXJlZCgpIHsKICBjb25zdCBkYXRhVXJsID0gY2hhcnQuZ2V0RGF0YVVSTCgpOwogIC8vIC4uLgogIC8vIFRoaXMgZXZlbnQgd2lsbCBhbHNvIGJlIHRyaWdnZXJlZCBpZiB0aGVyZSBpcyBhIHN1YnNlcXVlbnQgaW50ZXJhY3Rpb24gYW5kIHRoZSBpbnRlcmFjdGlvbiBpcyByZWRyYXduLCBzbyBpdCBuZWVkcyB0byBiZSByZW1vdmVkIHdoZW4geW91J3JlIGRvbmUgdXNpbmcgaXQKICBjaGFydC5vZmYoJ3JlbmRlcmVkJywgb25SZW5kZXJlZCk7Cn0KY2hhcnQub24oJ3JlbmRlcmVkJywgb25SZW5kZXJlZCk7\'" line-highlights="\'\'" />\n',postPath:"en/how-to/animation/transition",title:"Data Transition - Animation - How To Guides"}],fetch:{},error:null,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:n,children:[{title:"获取 ECharts",dir:d},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:r,draft:t},{title:"寻求帮助",dir:l},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:h},{title:"v4 升级 v5 指南",dir:c},{title:5.2,dir:g},{title:5.3,dir:p},{title:5.4,dir:m}]}]},{title:"概念篇",dir:u,children:[{title:"图表容器及大小",dir:C},{title:"配置项",dir:I,draft:t},{title:"系列",dir:f,draft:t},{title:"样式",dir:b},{title:"数据集",dir:A},{title:"数据转换",dir:w},{title:"坐标系",dir:B,draft:t},{title:"坐标轴",dir:y},{title:"视觉映射",dir:i},{title:"图例",dir:K},{title:"事件与行为",dir:v}]},{title:"应用篇",dir:G,children:[{title:"常用图表类型",dir:k,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:X},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:Z},{title:"极坐标系柱状图",dir:S,draft:t},{title:"阶梯瀑布图",dir:Y},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:H,children:[{title:"基础折线图",dir:W},{title:"堆叠折线图",dir:V},{title:"区域面积图",dir:F},{title:"平滑曲线图",dir:J},{title:"阶梯线图",dir:D}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:T},{title:"圆环图",dir:E},{title:"南丁格尔图（玫瑰图）",dir:x}]},{title:"散点图",dir:O,children:[{title:"基础散点图",dir:L}]}]},{title:U,dir:e,draft:t},{title:"跨平台方案",dir:z,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:M},{title:"数据下钻",dir:N,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"动画",dir:P,children:[{title:"数据过渡动画",dir:j}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:t},{title:"智能指针吸附",dir:$}]}]},{title:"最佳实践",dir:tt,children:[{title:U,dir:e,draft:t},{title:et,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:at}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:n,children:[{title:"Download ECharts",dir:d},{title:"Import ECharts",dir:o},{title:"Resources",dir:r,draft:t},{title:"Get Help",dir:l},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:h},{title:"Migration from v4 to v5",dir:c},{title:5.2,dir:g},{title:5.3,dir:p},{title:5.4,dir:m}]}]},{title:"Concepts",dir:u,children:[{title:"Chart Container",dir:C},{title:"Chart Option",dir:I,draft:t},{title:"Series",dir:f,draft:t},{title:"Style",dir:b},{title:"Dataset",dir:A},{title:"Data Transform",dir:w},{title:"Coordinate",dir:B,draft:t},{title:"Axis",dir:y},{title:"Visual Mapping",dir:i},{title:"Legend",dir:K},{title:"Event and Action",dir:v}]},{title:"How To Guides",dir:G,children:[{title:"Common Charts",dir:k,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:X},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:Z},{title:"Bar Polar",dir:S,draft:t},{title:"Waterfall",dir:Y}]},{title:"Line",dir:H,children:[{title:"Basic Line",dir:W},{title:"Stacked Line",dir:V},{title:"Area Chart",dir:F},{title:"Smoothed Line",dir:J},{title:"Step Line",dir:D}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:T},{title:"Ring Style",dir:E},{title:"Rose Style",dir:x}]},{title:"Scatter",dir:O,children:[{title:"Basic Scatter",dir:L}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:z,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:M},{title:"Drilldown",dir:N,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Animation",dir:P,children:[{title:"Data Transition",dir:j}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:t},{title:"Intelligent Pointer Snapping",dir:$}]}]},{title:"Best Practices",dir:tt,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:et,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:at}]}]},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:t,routePath:"/en/how-to/animation/transition",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> |
