| <!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>5.2 - What's New - Basics - 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-up"></span></a> <ul class="nav bd-sidenav level2"><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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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-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="what's-new-in-apache-echarts-5.2.0" tabindex="-1">What's New in Apache ECharts 5.2.0</h1> <h2 id="universal-transition" tabindex="-1">Universal Transition</h2> <p>Natural and smooth transition animations have been an important feature in Apache ECharts. By avoiding abrupt changes from data update, it not only improves the visual effect, but also provides the possibility to express the association and evolution of data. Therefore, in 5.2.0, we have further enhanced this animation capability. Next, we will see how this <strong>Universal Transition</strong> adds expressiveness and narrative power to the chart.</p> <p>In previous versions, transition animations had certain limitations: they could only be used for the position, size of the same shape, and they could only work on the same type of series. For example, the following example reflects the change in data percent through the change in sector shape in a pie chart.</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> <p>And starting with 5.2.0, we introduced universal transition, a more powerful animation feature. With that, transitions are no longer limited to between series of the same type. Now, we can use this cross-series morphing to animate between any type of series and any type of shapes.</p> <p>How cool would this be? Let's have a look!</p> <h3 id="morphing-transition-across-series" tabindex="-1">Morphing transition across series</h3> <p>With <code>universalTransition: true</code> set to enable universion transition feature, switching from pie charts to bar charts, or from bar charts to scatter charts, or even between more complex charts like Sunburst and Treemap, can be morphed naturally.</p> <p>As follows, switching between a pie chart and a bar chart.</p> <div class="md-live layout-bt"><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">const dataset = { |
| dimensions: ['name', 'score'], |
| source: [ |
| ['Hannah Krause', 314], |
| ['Zhao Qian', 351], |
| ['Jasmin Krause ', 287], |
| ['Li Lei', 219], |
| ['Karle Neumann', 253], |
| ['Mia Neumann', 165], |
| ['Böhm Fuchs', 318], |
| ['Han Meimei', 366] |
| ] |
| }; |
| const pieOption = { |
| dataset: [dataset], |
| series: [ |
| { |
| type: 'pie', |
| // associate the series to be animated by id |
| id: 'Score', |
| radius: [0, '50%'], |
| universalTransition: true, |
| animationDurationUpdate: 1000 |
| } |
| ] |
| }; |
| const barOption = { |
| dataset: [dataset], |
| xAxis: { |
| type: 'category' |
| }, |
| yAxis: {}, |
| series: [ |
| { |
| type: 'bar', |
| // associate the series to be animated by id |
| id: 'Score', |
| // Each data will have a different color |
| colorBy: 'data', |
| encode: { x: 'name', y: 'score' }, |
| universalTransition: true, |
| animationDurationUpdate: 1000 |
| } |
| ] |
| }; |
| |
| option = barOption; |
| |
| setInterval(() => { |
| option = option === pieOption ? barOption : pieOption; |
| // Use the notMerge form to remove the axes |
| myChart.setOption(option, true); |
| }, 2000);</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">const</span> dataset <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">dimensions</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'score'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">[</span><span class="token string">'Hannah Krause'</span><span class="token punctuation">,</span> <span class="token number">314</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Zhao Qian'</span><span class="token punctuation">,</span> <span class="token number">351</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Jasmin Krause '</span><span class="token punctuation">,</span> <span class="token number">287</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Li Lei'</span><span class="token punctuation">,</span> <span class="token number">219</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Karle Neumann'</span><span class="token punctuation">,</span> <span class="token number">253</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Mia Neumann'</span><span class="token punctuation">,</span> <span class="token number">165</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Böhm Fuchs'</span><span class="token punctuation">,</span> <span class="token number">318</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Han Meimei'</span><span class="token punctuation">,</span> <span class="token number">366</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">const</span> pieOption <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token punctuation">[</span>dataset<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">type</span><span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span> |
| <span class="token comment">// associate the series to be animated by id</span> |
| <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'Score'</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">universalTransition</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">animationDurationUpdate</span><span class="token operator">:</span> <span class="token number">1000</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">const</span> barOption <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token punctuation">[</span>dataset<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">type</span><span class="token operator">:</span> <span class="token string">'category'</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">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> |
| <span class="token comment">// associate the series to be animated by id</span> |
| <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'Score'</span><span class="token punctuation">,</span> |
| <span class="token comment">// Each data will have a different color</span> |
| <span class="token literal-property property">colorBy</span><span class="token operator">:</span> <span class="token string">'data'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">encode</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token string">'score'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">universalTransition</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">animationDurationUpdate</span><span class="token operator">:</span> <span class="token number">1000</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> barOption<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> |
| option <span class="token operator">=</span> option <span class="token operator">===</span> pieOption <span class="token operator">?</span> barOption <span class="token operator">:</span> pieOption<span class="token punctuation">;</span> |
| <span class="token comment">// Use the notMerge form to remove the axes</span> |
| myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">,</span> <span class="token boolean">true</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> <p>More transitions between common charts.</p> <p><img src alt data-src="images/5-2-0/universal-transition.gif"></p> <p>Such transitions are no longer limited to just the basic line, bar, and pie charts, but also between bars and maps:</p> <p><img src alt data-src="images/5-2-0/universal-transition-2.gif"></p> <p>or between Sunburst and Treemap, or even between very flexible custom series can be transitions.</p> <p><img src alt data-src="images/5-2-0/universal-transition-3.gif"></p> <blockquote><p>Note that you need to configure the series ids to ensure that there is a one-to-one correspondence between the series that need to be animated for the transition.</p></blockquote> <blockquote><p>Minimal bundle needs to import this feature manually.</p> <pre><code class="language-ts">import { UniversalTransition } from 'echarts/features'; |
| echarts.use([UniversalTransition]); |
| </code></pre></blockquote> <h3 id="data-split-and-merge-animations" tabindex="-1">Data split and merge animations</h3> <p>In addition to the common update of data values, sometimes we also encounter data aggregation, drill-down and other updates after interactions, when we can not directly apply one-to-one transitions, but need to use more animation effects like splitting and merging to express the transformation of data.</p> <p>In order to be able to express the possible many-to-many connections between data, in 5.2.0 we introduced a new concept <code>groupId</code>. We can set the group to the whole series via <a href="https://echarts.apache.org/option.html#series-bar.dataGroupId">series.dataGroupId</a>, or more fine-grained by <a href="https://echarts.apache.org/option.html#series-bar.dataGroupId">series.data.groupId</a> to set the group to which each data belongs. It's even easier if you use a <code>dataset</code> to manage the data, you can use <code>encode.itemGroupId</code> to specify a dimension encoded as <code>groupId</code>.</p> <p>For example, if we want to implement a drill-down animation for a bar chart, we can set the entire series of data after the drill-down to the same <code>groupId</code>, which then corresponds to the data before the drill-down</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">option = { |
| xAxis: { |
| data: ['Animals', 'Fruits', 'Cars'] |
| }, |
| yAxis: {}, |
| dataGroupId: '', |
| animationDurationUpdate: 500, |
| series: { |
| type: 'bar', |
| id: 'sales', |
| data: [ |
| { |
| value: 5, |
| groupId: 'animals' |
| }, |
| { |
| value: 2, |
| groupId: 'fruits' |
| }, |
| { |
| value: 4, |
| groupId: 'cars' |
| } |
| ], |
| universalTransition: { |
| enabled: true, |
| divideShape: 'clone' |
| } |
| } |
| }; |
| |
| const drilldownData = [ |
| { |
| dataGroupId: 'animals', |
| data: [ |
| ['Cats', 4], |
| ['Dogs', 2], |
| ['Cows', 1], |
| ['Sheep', 2], |
| ['Pigs', 1], |
| ['Cows', 1], |
| ['Sheep', 2], |
| ['Pigs', 1] |
| ] |
| }, |
| { |
| dataGroupId: 'fruits', |
| data: [ |
| ['Apples', 4], |
| ['Oranges', 2], |
| ['Oranges', 2] |
| ] |
| }, |
| { |
| dataGroupId: 'cars', |
| data: [ |
| ['Toyota', 4], |
| ['Opel', 2], |
| ['Volkswagen', 2], |
| ['Volkswagen', 2] |
| ] |
| } |
| ]; |
| |
| myChart.on('click', event => { |
| if (event.data) { |
| const subData = drilldownData.find(data => { |
| return data.dataGroupId === event.data.groupId; |
| }); |
| if (!subData) { |
| return; |
| } |
| myChart.setOption({ |
| xAxis: { |
| data: subData.data.map(item => { |
| return item[0]; |
| }) |
| }, |
| series: { |
| type: 'bar', |
| id: 'sales', |
| dataGroupId: subData.dataGroupId, |
| data: subData.data.map(item => { |
| return item[1]; |
| }), |
| universalTransition: { |
| enabled: true, |
| divideShape: 'clone' |
| } |
| }, |
| graphic: [ |
| { |
| type: 'text', |
| left: 50, |
| top: 20, |
| style: { |
| text: 'Back', |
| fontSize: 18 |
| }, |
| onclick: function() { |
| myChart.setOption(option, true); |
| } |
| } |
| ] |
| }); |
| } |
| });</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Animals'</span><span class="token punctuation">,</span> <span class="token string">'Fruits'</span><span class="token punctuation">,</span> <span class="token string">'Cars'</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">dataGroupId</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">animationDurationUpdate</span><span class="token operator">:</span> <span class="token number">500</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">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'sales'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">groupId</span><span class="token operator">:</span> <span class="token string">'animals'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">groupId</span><span class="token operator">:</span> <span class="token string">'fruits'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">groupId</span><span class="token operator">:</span> <span class="token string">'cars'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">universalTransition</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">enabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">divideShape</span><span class="token operator">:</span> <span class="token string">'clone'</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">const</span> drilldownData <span class="token operator">=</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">dataGroupId</span><span class="token operator">:</span> <span class="token string">'animals'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">[</span><span class="token string">'Cats'</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Dogs'</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 string">'Cows'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Sheep'</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 string">'Pigs'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Cows'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Sheep'</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 string">'Pigs'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">dataGroupId</span><span class="token operator">:</span> <span class="token string">'fruits'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">[</span><span class="token string">'Apples'</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Oranges'</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 string">'Oranges'</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 literal-property property">dataGroupId</span><span class="token operator">:</span> <span class="token string">'cars'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">[</span><span class="token string">'Toyota'</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Opel'</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 string">'Volkswagen'</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 string">'Volkswagen'</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> |
| |
| myChart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token parameter">event</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">const</span> subData <span class="token operator">=</span> drilldownData<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">data</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> data<span class="token punctuation">.</span>dataGroupId <span class="token operator">===</span> event<span class="token punctuation">.</span>data<span class="token punctuation">.</span>groupId<span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>subData<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> |
| 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">data</span><span class="token operator">:</span> subData<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> item<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 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 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">id</span><span class="token operator">:</span> <span class="token string">'sales'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">dataGroupId</span><span class="token operator">:</span> subData<span class="token punctuation">.</span>dataGroupId<span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> subData<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">universalTransition</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">enabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">divideShape</span><span class="token operator">:</span> <span class="token string">'clone'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">graphic</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">'text'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Back'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">18</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token function-variable function">onclick</span><span class="token operator">:</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>option<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>With <code>groupId</code>, we can also implement richer aggregation and drill-down animations.</p> <p>Aggregation of data.</p> <p><img src alt data-src="images/5-2-0/group-transition.gif"></p> <p>Drilling down of a single series into two series:</p> <p><img src alt data-src="images/5-2-0/group-transition-2.gif"></p> <p>Universal transition take the ability to express the relationships and evolution of data to a new level, giving wings to your visualization creation inspiration.</p> <p>At this point, we know you're already eager to try it out. But don't worry, there are even more new features in 5.2.0 that are worth checking out.</p> <h2 id="color-palette-picking-strategy" tabindex="-1">Color palette picking strategy</h2> <p>In the above universal transition example, you may have noticed that we use a <code>colorBy</code> configuration that was not available in the previous version. This configuration is also a new feature we added in this version to configure different granularity of color palette color picking for the series. This configuration currently supports two strategies.</p> <ul><li><code>'series'</code> assigns the colors in the palette by series, so that all data in the same series are in the same color.</li> <li><code>'data'</code> assigns colors in the palette according to data items, with each data item using a different color.</li></ul> <p>Previously, we fixed this strategy for each type of series, for example, the bar chart was fixed with <code>'series'</code> and the pie chart was fixed with <code>'data'</code>.</p> <p>And now with this new feature, we can assign a different color to each data item in the bar chart.</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">option = { |
| xAxis: { |
| type: 'category', |
| data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
| }, |
| yAxis: { |
| type: 'value' |
| }, |
| series: [ |
| { |
| data: [120, 200, 150, 80, 70, 110, 130], |
| type: 'bar', |
| colorBy: 'data' |
| } |
| ] |
| };</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</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">'Mon'</span><span class="token punctuation">,</span> <span class="token string">'Tue'</span><span class="token punctuation">,</span> <span class="token string">'Wed'</span><span class="token punctuation">,</span> <span class="token string">'Thu'</span><span class="token punctuation">,</span> <span class="token string">'Fri'</span><span class="token punctuation">,</span> <span class="token string">'Sat'</span><span class="token punctuation">,</span> <span class="token string">'Sun'</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">type</span><span class="token operator">:</span> <span class="token string">'value'</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">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">120</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">150</span><span class="token punctuation">,</span> <span class="token number">80</span><span class="token punctuation">,</span> <span class="token number">70</span><span class="token punctuation">,</span> <span class="token number">110</span><span class="token punctuation">,</span> <span class="token number">130</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">'bar'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">colorBy</span><span class="token operator">:</span> <span class="token string">'data'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>Or use one color uniformly in the pie chart.</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">option = { |
| series: { |
| type: 'pie', |
| colorBy: 'series', |
| radius: [0, '50%'], |
| itemStyle: { |
| borderColor: '#fff', |
| borderWidth: 1 |
| }, |
| data: [ |
| { |
| value: 335, |
| name: 'Direct Visit' |
| }, |
| { |
| value: 234, |
| name: 'Union Ad' |
| }, |
| { |
| value: 1548, |
| name: 'Search Engine' |
| } |
| ] |
| } |
| };</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</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">colorBy</span><span class="token operator">:</span> <span class="token string">'series'</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">itemStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">borderColor</span><span class="token operator">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">1</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">335</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Direct Visit'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">234</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Union Ad'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1548</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Search Engine'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>This configuration allows us to avoid the trouble of finding palette colors and setting them one by one, and may provide convenience in specific scenarios. We will further enhance this configuration later to provide more strategies.</p> <h2 id="labels-for-polar-bar-charts" tabindex="-1">Labels for polar bar charts</h2> <p>In this version we have implemented labels for bar charts on polar coordinates and support rich label positioning configurations. The following is a progress chart with labels displayed at the start points.</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">option = { |
| angleAxis: { |
| show: false, |
| max: 10 |
| }, |
| radiusAxis: { |
| show: false, |
| type: 'category', |
| data: ['AAA', 'BBB', 'CCC', 'DDD'] |
| }, |
| polar: {}, |
| series: [ |
| { |
| type: 'bar', |
| data: [3, 4, 5, 6], |
| colorBy: 'data', |
| roundCap: true, |
| label: { |
| show: true, |
| // Try changing it to 'insideStart' |
| position: 'start', |
| formatter: '{b}' |
| }, |
| coordinateSystem: 'polar' |
| } |
| ] |
| };</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">angleAxis</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 literal-property property">max</span><span class="token operator">:</span> <span class="token number">10</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">radiusAxis</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 literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</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">'AAA'</span><span class="token punctuation">,</span> <span class="token string">'BBB'</span><span class="token punctuation">,</span> <span class="token string">'CCC'</span><span class="token punctuation">,</span> <span class="token string">'DDD'</span><span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">polar</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">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">colorBy</span><span class="token operator">:</span> <span class="token string">'data'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">roundCap</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">label</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">true</span><span class="token punctuation">,</span> |
| <span class="token comment">// Try changing it to 'insideStart'</span> |
| <span class="token literal-property property">position</span><span class="token operator">:</span> <span class="token string">'start'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">formatter</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 literal-property property">coordinateSystem</span><span class="token operator">:</span> <span class="token string">'polar'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>More configurations for label positions.</p> <p><img src alt data-src="images/5-2-0/polar-bar-label.jpg"></p> <p>This flexible label position configuration item greatly enriches the expressiveness of the polar bar chart, allowing the text to clearly match the corresponding data.</p> <h2 id="pie-chart-style-for-empty-data" tabindex="-1">Pie chart style for empty data</h2> <p>In the previous version, if there was no data in the pie chart, the screen might be completely blank. Because there was no visual element, users may wonder if there was a bug.</p> <p>To solve this problem, in this version we will default to display a gray placeholder circle when there is no data to prevent the screen from being completely blank. We can configure the style of this placeholder circle with <code>emptyCircleStyle</code>.</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">option = { |
| series: [ |
| { |
| type: 'pie', |
| data: [], |
| // showEmptyCircle: false, |
| emptyCircleStyle: { |
| // change the style to empty circle |
| color: 'transparent', |
| borderColor: '#ddd', |
| borderWidth: 1 |
| } |
| } |
| ] |
| };</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">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">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token comment">// showEmptyCircle: false,</span> |
| <span class="token literal-property property">emptyCircleStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token comment">// change the style to empty circle</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'transparent'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderColor</span><span class="token operator">:</span> <span class="token string">'#ddd'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">1</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>If you don't want to show this gray circle, you can also set <code>showEmptyCircle: false</code> to turn it off.</p> <h2 id="performance-enhancements-for-high-dimensional-data" tabindex="-1">Performance enhancements for high-dimensional data</h2> <p>We have introduced <a href="https://echarts.apache.org/option.html#dataset">dataset</a> since 4.0 to manage chart data. However, in some extreme scenarios with particularly high-dimensional (>100) data, we may encounter some dramatic performance degradation, such as the following scenario of visualizing a thousand-dimensional data through a thousand series (<a href="https://github.com/apache/echarts/issues/11907">#11907</a>), which may even may lead to getting stuck.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">const</span> indices <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token function">Array</span><span class="token punctuation">(</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">_<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">index</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></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">const</span> option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</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">dataset</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token comment">// dimension: ['date', . . indices],</span> |
| <span class="token literal-property property">source</span><span class="token operator">:</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token function">Array</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 parameter">_<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">date</span><span class="token operator">:</span> i<span class="token punctuation">,</span> |
| <span class="token operator">...</span> <span class="token punctuation">.</span>indices<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| item<span class="token punctuation">[</span>next<span class="token punctuation">]</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 operator">*</span> <span class="token number">100</span><span class="token punctuation">;</span> |
| <span class="token keyword">return</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 punctuation">,</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> indices<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">index</span> <span class="token operator">=></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">'line'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> index <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>The reason for this performance problem is that we process the high-dimensional dataset at the bottom of each series as needed and save a copy of the processed data and the meta information about the dimensions of the data. This meant that the <code>1000 x 1000</code> dimensions had to be processed and saved in the example, which put a huge pressure on memory and garbage collection, resulting in a dramatic performance drop for high dimensions.</p> <p>In the new version we have optimized this problem so that all series share the dataset storage as much as possible (whether or not they do depends on how the series uses the data). |
| This optimization ensure that memory does not explode as the dataset dimensions and series grow, significantly improving initialization performance in this extreme scenario. The rendering time for the example just described has also been reduced to an acceptable 300 ms or less.</p> <p>It is not just this high-dimensional scenario that benefits from this optimization. When using a dataset with large amount of data, multiple series only process the data once because of data sharing, so it can also bring significant performance gains.</p> <h2 id="type-optimization-for-custom-series" tabindex="-1">Type optimization for custom series</h2> <p>Custom series provide a very flexible way to create series graphs. Compared to other series, the learning curve for custom series can be a bit steep. Therefore, in this release, we have further optimized the type of the core method <code>renderItem</code> in the custom series by making more precise inferences about the types of the parameters and return values of <code>renderItem</code>, so that it is possible to infer which properties of the elements can be set based on the type returned:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code>series <span class="token operator">=</span> <span class="token punctuation">{</span> |
| type<span class="token operator">:</span> <span class="token string">'custom'</span><span class="token punctuation">,</span> |
| <span class="token function">renderItem</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> <span class="token punctuation">{</span> |
| type<span class="token operator">:</span> <span class="token string">'group'</span><span class="token punctuation">,</span> |
| <span class="token comment">// The group type uses children to store children of other types</span> |
| children<span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| type<span class="token operator">:</span> <span class="token string">'circle'</span><span class="token punctuation">,</span> |
| <span class="token comment">// circle has the following configurable shape attributes</span> |
| shape<span class="token operator">:</span> <span class="token punctuation">{</span> r<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> cx<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> cy<span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token comment">// Configurable styles</span> |
| style<span class="token operator">:</span> <span class="token punctuation">{</span> fill<span class="token operator">:</span> <span class="token string">'red'</span> <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| type<span class="token operator">:</span> <span class="token string">'rect'</span><span class="token punctuation">,</span> |
| <span class="token comment">// rect has the following configurable shape properties</span> |
| shape<span class="token operator">:</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> width<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span> height<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> |
| type<span class="token operator">:</span> <span class="token string">'path'</span><span class="token punctuation">,</span> |
| <span class="token comment">// Custom path shapes</span> |
| shape<span class="token operator">:</span> <span class="token punctuation">{</span> d<span class="token operator">:</span> <span class="token string">'...'</span> <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token 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="summary" tabindex="-1">Summary</h2> <p>If you're interested in some of the features and optimizations in 5.2.0, you may want to update to the latest version of Apache ECharts and try it out for yourself.</p> <p>If you're interested in what's next for Apache ECharts, you can also follow our development plans at <a href="https://github.com/apache/echarts/milestones">GitHub Milestone</a>. Feel free to join us as a contributor (learn more at <a href="https://github.com/apache/echarts/wiki">Wiki</a>).</p> <h2 id="full-changelog" tabindex="-1">Full Changelog</h2> <p>View the <a href="https://echarts.apache.org//changelog.html#v5-2-0">Changelog</a></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/basics/release-note/5-2-0.md" title="Edit this Document" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">Edit this page on GitHub</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60" loading="lazy"> <span>pissang</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60" loading="lazy"> <span>Ovilia</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//fastly.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,a,o,g,n,r,s,d,l,I,C,c,h,A,p,m,b,w,u,f,B,y,G,v,Z,X,H,R,W,J,F,K,Y,S,k,V,N,L,x,z,T,D,U,O,M,E,Q,j,P,_,q,$,ee,te,ie,ae){return{layout:"default",data:[{html:'<h1 id="what\'s-new-in-apache-echarts-5.2.0" tabindex="-1">What\'s New in Apache ECharts 5.2.0</h1>\n<h2 id="universal-transition" tabindex="-1">Universal Transition</h2>\n<p>Natural and smooth transition animations have been an important feature in Apache ECharts. By avoiding abrupt changes from data update, it not only improves the visual effect, but also provides the possibility to express the association and evolution of data. Therefore, in 5.2.0, we have further enhanced this animation capability. Next, we will see how this <strong>Universal Transition</strong> adds expressiveness and narrative power to the chart.</p>\n<p>In previous versions, transition animations had certain limitations: they could only be used for the position, size of the same shape, and they could only work on the same type of series. For example, the following example reflects the change in data percent through the change in sector shape in a pie chart.</p>\n<md-live lang="js" code="\'ZnVuY3Rpb24gbWFrZVJhbmRvbURhdGEoKSB7CiAgcmV0dXJuIFsKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdBJwogICAgfSwKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdCJwogICAgfSwKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdDJwogICAgfQogIF07Cn0Kb3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgcmFkaXVzOiBbMCwgJzUwJSddLAogICAgICBkYXRhOiBtYWtlUmFuZG9tRGF0YSgpCiAgICB9CiAgXQp9OwoKc2V0SW50ZXJ2YWwoKCkgPT4gewogIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgIHNlcmllczogewogICAgICBkYXRhOiBtYWtlUmFuZG9tRGF0YSgpCiAgICB9CiAgfSk7Cn0sIDIwMDApOw\'" v-bind="{layout: \'lr\'}" />\n<p>And starting with 5.2.0, we introduced universal transition, a more powerful animation feature. With that, transitions are no longer limited to between series of the same type. Now, we can use this cross-series morphing to animate between any type of series and any type of shapes.</p>\n<p>How cool would this be? Let\'s have a look!</p>\n<h3 id="morphing-transition-across-series" tabindex="-1">Morphing transition across series</h3>\n<p>With <code>universalTransition: true</code> set to enable universion transition feature, switching from pie charts to bar charts, or from bar charts to scatter charts, or even between more complex charts like Sunburst and Treemap, can be morphed naturally.</p>\n<p>As follows, switching between a pie chart and a bar chart.</p>\n<md-live lang="js" code="\'Y29uc3QgZGF0YXNldCA9IHsKICBkaW1lbnNpb25zOiBbJ25hbWUnLCAnc2NvcmUnXSwKICBzb3VyY2U6IFsKICAgIFsnSGFubmFoIEtyYXVzZScsIDMxNF0sCiAgICBbJ1poYW8gUWlhbicsIDM1MV0sCiAgICBbJ0phc21pbiBLcmF1c2UgJywgMjg3XSwKICAgIFsnTGkgTGVpJywgMjE5XSwKICAgIFsnS2FybGUgTmV1bWFubicsIDI1M10sCiAgICBbJ01pYSBOZXVtYW5uJywgMTY1XSwKICAgIFsnQsO2aG0gRnVjaHMnLCAzMThdLAogICAgWydIYW4gTWVpbWVpJywgMzY2XQogIF0KfTsKY29uc3QgcGllT3B0aW9uID0gewogIGRhdGFzZXQ6IFtkYXRhc2V0XSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIC8vIGFzc29jaWF0ZSB0aGUgc2VyaWVzIHRvIGJlIGFuaW1hdGVkIGJ5IGlkCiAgICAgIGlkOiAnU2NvcmUnLAogICAgICByYWRpdXM6IFswLCAnNTAlJ10sCiAgICAgIHVuaXZlcnNhbFRyYW5zaXRpb246IHRydWUsCiAgICAgIGFuaW1hdGlvbkR1cmF0aW9uVXBkYXRlOiAxMDAwCiAgICB9CiAgXQp9Owpjb25zdCBiYXJPcHRpb24gPSB7CiAgZGF0YXNldDogW2RhdGFzZXRdLAogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICAvLyBhc3NvY2lhdGUgdGhlIHNlcmllcyB0byBiZSBhbmltYXRlZCBieSBpZAogICAgICBpZDogJ1Njb3JlJywKICAgICAgLy8gRWFjaCBkYXRhIHdpbGwgaGF2ZSBhIGRpZmZlcmVudCBjb2xvcgogICAgICBjb2xvckJ5OiAnZGF0YScsCiAgICAgIGVuY29kZTogeyB4OiAnbmFtZScsIHk6ICdzY29yZScgfSwKICAgICAgdW5pdmVyc2FsVHJhbnNpdGlvbjogdHJ1ZSwKICAgICAgYW5pbWF0aW9uRHVyYXRpb25VcGRhdGU6IDEwMDAKICAgIH0KICBdCn07CgpvcHRpb24gPSBiYXJPcHRpb247CgpzZXRJbnRlcnZhbCgoKSA9PiB7CiAgb3B0aW9uID0gb3B0aW9uID09PSBwaWVPcHRpb24gPyBiYXJPcHRpb24gOiBwaWVPcHRpb247CiAgLy8gVXNlIHRoZSBub3RNZXJnZSBmb3JtIHRvIHJlbW92ZSB0aGUgYXhlcwogIG15Q2hhcnQuc2V0T3B0aW9uKG9wdGlvbiwgdHJ1ZSk7Cn0sIDIwMDApOw\'" v-bind="{layout: \'bt\'}" />\n<p>More transitions between common charts.</p>\n<p><img src="" alt="" data-src="images/5-2-0/universal-transition.gif"></p>\n<p>Such transitions are no longer limited to just the basic line, bar, and pie charts, but also between bars and maps:</p>\n<p><img src="" alt="" data-src="images/5-2-0/universal-transition-2.gif"></p>\n<p>or between Sunburst and Treemap, or even between very flexible custom series can be transitions.</p>\n<p><img src="" alt="" data-src="images/5-2-0/universal-transition-3.gif"></p>\n<blockquote>\n<p>Note that you need to configure the series ids to ensure that there is a one-to-one correspondence between the series that need to be animated for the transition.</p>\n</blockquote>\n<blockquote>\n<p>Minimal bundle needs to import this feature manually.</p>\n<pre><code class="language-ts">import { UniversalTransition } from \'echarts/features\';\necharts.use([UniversalTransition]);\n</code></pre>\n</blockquote>\n<h3 id="data-split-and-merge-animations" tabindex="-1">Data split and merge animations</h3>\n<p>In addition to the common update of data values, sometimes we also encounter data aggregation, drill-down and other updates after interactions, when we can not directly apply one-to-one transitions, but need to use more animation effects like splitting and merging to express the transformation of data.</p>\n<p>In order to be able to express the possible many-to-many connections between data, in 5.2.0 we introduced a new concept <code>groupId</code>. We can set the group to the whole series via <a href="https://echarts.apache.org/option.html#series-bar.dataGroupId">series.dataGroupId</a>, or more fine-grained by <a href="https://echarts.apache.org/option.html#series-bar.dataGroupId">series.data.groupId</a> to set the group to which each data belongs. It\'s even easier if you use a <code>dataset</code> to manage the data, you can use <code>encode.itemGroupId</code> to specify a dimension encoded as <code>groupId</code>.</p>\n<p>For example, if we want to implement a drill-down animation for a bar chart, we can set the entire series of data after the drill-down to the same <code>groupId</code>, which then corresponds to the data before the drill-down</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0FuaW1hbHMnLCAnRnJ1aXRzJywgJ0NhcnMnXQogIH0sCiAgeUF4aXM6IHt9LAogIGRhdGFHcm91cElkOiAnJywKICBhbmltYXRpb25EdXJhdGlvblVwZGF0ZTogNTAwLAogIHNlcmllczogewogICAgdHlwZTogJ2JhcicsCiAgICBpZDogJ3NhbGVzJywKICAgIGRhdGE6IFsKICAgICAgewogICAgICAgIHZhbHVlOiA1LAogICAgICAgIGdyb3VwSWQ6ICdhbmltYWxzJwogICAgICB9LAogICAgICB7CiAgICAgICAgdmFsdWU6IDIsCiAgICAgICAgZ3JvdXBJZDogJ2ZydWl0cycKICAgICAgfSwKICAgICAgewogICAgICAgIHZhbHVlOiA0LAogICAgICAgIGdyb3VwSWQ6ICdjYXJzJwogICAgICB9CiAgICBdLAogICAgdW5pdmVyc2FsVHJhbnNpdGlvbjogewogICAgICBlbmFibGVkOiB0cnVlLAogICAgICBkaXZpZGVTaGFwZTogJ2Nsb25lJwogICAgfQogIH0KfTsKCmNvbnN0IGRyaWxsZG93bkRhdGEgPSBbCiAgewogICAgZGF0YUdyb3VwSWQ6ICdhbmltYWxzJywKICAgIGRhdGE6IFsKICAgICAgWydDYXRzJywgNF0sCiAgICAgIFsnRG9ncycsIDJdLAogICAgICBbJ0Nvd3MnLCAxXSwKICAgICAgWydTaGVlcCcsIDJdLAogICAgICBbJ1BpZ3MnLCAxXSwKICAgICAgWydDb3dzJywgMV0sCiAgICAgIFsnU2hlZXAnLCAyXSwKICAgICAgWydQaWdzJywgMV0KICAgIF0KICB9LAogIHsKICAgIGRhdGFHcm91cElkOiAnZnJ1aXRzJywKICAgIGRhdGE6IFsKICAgICAgWydBcHBsZXMnLCA0XSwKICAgICAgWydPcmFuZ2VzJywgMl0sCiAgICAgIFsnT3JhbmdlcycsIDJdCiAgICBdCiAgfSwKICB7CiAgICBkYXRhR3JvdXBJZDogJ2NhcnMnLAogICAgZGF0YTogWwogICAgICBbJ1RveW90YScsIDRdLAogICAgICBbJ09wZWwnLCAyXSwKICAgICAgWydWb2xrc3dhZ2VuJywgMl0sCiAgICAgIFsnVm9sa3N3YWdlbicsIDJdCiAgICBdCiAgfQpdOwoKbXlDaGFydC5vbignY2xpY2snLCBldmVudCA9PiB7CiAgaWYgKGV2ZW50LmRhdGEpIHsKICAgIGNvbnN0IHN1YkRhdGEgPSBkcmlsbGRvd25EYXRhLmZpbmQoZGF0YSA9PiB7CiAgICAgIHJldHVybiBkYXRhLmRhdGFHcm91cElkID09PSBldmVudC5kYXRhLmdyb3VwSWQ7CiAgICB9KTsKICAgIGlmICghc3ViRGF0YSkgewogICAgICByZXR1cm47CiAgICB9CiAgICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICAgIHhBeGlzOiB7CiAgICAgICAgZGF0YTogc3ViRGF0YS5kYXRhLm1hcChpdGVtID0-IHsKICAgICAgICAgIHJldHVybiBpdGVtWzBdOwogICAgICAgIH0pCiAgICAgIH0sCiAgICAgIHNlcmllczogewogICAgICAgIHR5cGU6ICdiYXInLAogICAgICAgIGlkOiAnc2FsZXMnLAogICAgICAgIGRhdGFHcm91cElkOiBzdWJEYXRhLmRhdGFHcm91cElkLAogICAgICAgIGRhdGE6IHN1YkRhdGEuZGF0YS5tYXAoaXRlbSA9PiB7CiAgICAgICAgICByZXR1cm4gaXRlbVsxXTsKICAgICAgICB9KSwKICAgICAgICB1bml2ZXJzYWxUcmFuc2l0aW9uOiB7CiAgICAgICAgICBlbmFibGVkOiB0cnVlLAogICAgICAgICAgZGl2aWRlU2hhcGU6ICdjbG9uZScKICAgICAgICB9CiAgICAgIH0sCiAgICAgIGdyYXBoaWM6IFsKICAgICAgICB7CiAgICAgICAgICB0eXBlOiAndGV4dCcsCiAgICAgICAgICBsZWZ0OiA1MCwKICAgICAgICAgIHRvcDogMjAsCiAgICAgICAgICBzdHlsZTogewogICAgICAgICAgICB0ZXh0OiAnQmFjaycsCiAgICAgICAgICAgIGZvbnRTaXplOiAxOAogICAgICAgICAgfSwKICAgICAgICAgIG9uY2xpY2s6IGZ1bmN0aW9uKCkgewogICAgICAgICAgICBteUNoYXJ0LnNldE9wdGlvbihvcHRpb24sIHRydWUpOwogICAgICAgICAgfQogICAgICAgIH0KICAgICAgXQogICAgfSk7CiAgfQp9KTs\'" v-bind="{layout: \'lr\'}" />\n<p>With <code>groupId</code>, we can also implement richer aggregation and drill-down animations.</p>\n<p>Aggregation of data.</p>\n<p><img src="" alt="" data-src="images/5-2-0/group-transition.gif"></p>\n<p>Drilling down of a single series into two series:</p>\n<p><img src="" alt="" data-src="images/5-2-0/group-transition-2.gif"></p>\n<p>Universal transition take the ability to express the relationships and evolution of data to a new level, giving wings to your visualization creation inspiration.</p>\n<p>At this point, we know you\'re already eager to try it out. But don\'t worry, there are even more new features in 5.2.0 that are worth checking out.</p>\n<h2 id="color-palette-picking-strategy" tabindex="-1">Color palette picking strategy</h2>\n<p>In the above universal transition example, you may have noticed that we use a <code>colorBy</code> configuration that was not available in the previous version. This configuration is also a new feature we added in this version to configure different granularity of color palette color picking for the series. This configuration currently supports two strategies.</p>\n<ul>\n<li><code>\'series\'</code> assigns the colors in the palette by series, so that all data in the same series are in the same color.</li>\n<li><code>\'data\'</code> assigns colors in the palette according to data items, with each data item using a different color.</li>\n</ul>\n<p>Previously, we fixed this strategy for each type of series, for example, the bar chart was fixed with <code>\'series\'</code> and the pie chart was fixed with <code>\'data\'</code>.</p>\n<p>And now with this new feature, we can assign a different color to each data item in the bar chart.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCcsICdTdW4nXQogIH0sCiAgeUF4aXM6IHsKICAgIHR5cGU6ICd2YWx1ZScKICB9LAogIHNlcmllczogWwogICAgewogICAgICBkYXRhOiBbMTIwLCAyMDAsIDE1MCwgODAsIDcwLCAxMTAsIDEzMF0sCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBjb2xvckJ5OiAnZGF0YScKICAgIH0KICBdCn07\'" v-bind="{layout: \'lr\'}" />\n<p>Or use one color uniformly in the pie chart.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgdHlwZTogJ3BpZScsCiAgICBjb2xvckJ5OiAnc2VyaWVzJywKICAgIHJhZGl1czogWzAsICc1MCUnXSwKICAgIGl0ZW1TdHlsZTogewogICAgICBib3JkZXJDb2xvcjogJyNmZmYnLAogICAgICBib3JkZXJXaWR0aDogMQogICAgfSwKICAgIGRhdGE6IFsKICAgICAgewogICAgICAgIHZhbHVlOiAzMzUsCiAgICAgICAgbmFtZTogJ0RpcmVjdCBWaXNpdCcKICAgICAgfSwKICAgICAgewogICAgICAgIHZhbHVlOiAyMzQsCiAgICAgICAgbmFtZTogJ1VuaW9uIEFkJwogICAgICB9LAogICAgICB7CiAgICAgICAgdmFsdWU6IDE1NDgsCiAgICAgICAgbmFtZTogJ1NlYXJjaCBFbmdpbmUnCiAgICAgIH0KICAgIF0KICB9Cn07\'" v-bind="{layout: \'lr\'}" />\n<p>This configuration allows us to avoid the trouble of finding palette colors and setting them one by one, and may provide convenience in specific scenarios. We will further enhance this configuration later to provide more strategies.</p>\n<h2 id="labels-for-polar-bar-charts" tabindex="-1">Labels for polar bar charts</h2>\n<p>In this version we have implemented labels for bar charts on polar coordinates and support rich label positioning configurations. The following is a progress chart with labels displayed at the start points.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGFuZ2xlQXhpczogewogICAgc2hvdzogZmFsc2UsCiAgICBtYXg6IDEwCiAgfSwKICByYWRpdXNBeGlzOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIHR5cGU6ICdjYXRlZ29yeScsCiAgICBkYXRhOiBbJ0FBQScsICdCQkInLCAnQ0NDJywgJ0RERCddCiAgfSwKICBwb2xhcjoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMywgNCwgNSwgNl0sCiAgICAgIGNvbG9yQnk6ICdkYXRhJywKICAgICAgcm91bmRDYXA6IHRydWUsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICAvLyBUcnkgY2hhbmdpbmcgaXQgdG8gJ2luc2lkZVN0YXJ0JwogICAgICAgIHBvc2l0aW9uOiAnc3RhcnQnLAogICAgICAgIGZvcm1hdHRlcjogJ3tifScKICAgICAgfSwKICAgICAgY29vcmRpbmF0ZVN5c3RlbTogJ3BvbGFyJwogICAgfQogIF0KfTs\'" v-bind="{layout: \'lr\'}" />\n<p>More configurations for label positions.</p>\n<p><img src="" alt="" data-src="images/5-2-0/polar-bar-label.jpg"></p>\n<p>This flexible label position configuration item greatly enriches the expressiveness of the polar bar chart, allowing the text to clearly match the corresponding data.</p>\n<h2 id="pie-chart-style-for-empty-data" tabindex="-1">Pie chart style for empty data</h2>\n<p>In the previous version, if there was no data in the pie chart, the screen might be completely blank. Because there was no visual element, users may wonder if there was a bug.</p>\n<p>To solve this problem, in this version we will default to display a gray placeholder circle when there is no data to prevent the screen from being completely blank. We can configure the style of this placeholder circle with <code>emptyCircleStyle</code>.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgZGF0YTogW10sCiAgICAgIC8vIHNob3dFbXB0eUNpcmNsZTogZmFsc2UsCiAgICAgIGVtcHR5Q2lyY2xlU3R5bGU6IHsKICAgICAgICAvLyBjaGFuZ2UgdGhlIHN0eWxlIHRvIGVtcHR5IGNpcmNsZQogICAgICAgIGNvbG9yOiAndHJhbnNwYXJlbnQnLAogICAgICAgIGJvcmRlckNvbG9yOiAnI2RkZCcsCiAgICAgICAgYm9yZGVyV2lkdGg6IDEKICAgICAgfQogICAgfQogIF0KfTs\'" v-bind="{layout: \'lr\'}" />\n<p>If you don\'t want to show this gray circle, you can also set <code>showEmptyCircle: false</code> to turn it off.</p>\n<h2 id="performance-enhancements-for-high-dimensional-data" tabindex="-1">Performance enhancements for high-dimensional data</h2>\n<p>We have introduced <a href="https://echarts.apache.org/option.html#dataset">dataset</a> since 4.0 to manage chart data. However, in some extreme scenarios with particularly high-dimensional (>100) data, we may encounter some dramatic performance degradation, such as the following scenario of visualizing a thousand-dimensional data through a thousand series (<a href="https://github.com/apache/echarts/issues/11907">#11907</a>), which may even may lead to getting stuck.</p>\n<md-code-block lang="js" code="\'Y29uc3QgaW5kaWNlcyA9IEFycmF5LmZyb20oQXJyYXkoMTAwMCksIChfLCBpKSA9PiB7CiAgcmV0dXJuIGBpbmRleCR7aX1gOwp9KTsKY29uc3Qgb3B0aW9uID0gewogIHhBeGlzOiB7IHR5cGU6ICdjYXRlZ29yeScgfSwKICB5QXhpczoge30sCiAgZGF0YXNldDogewogICAgLy8gZGltZW5zaW9uOiBbJ2RhdGUnLCAuIC4gaW5kaWNlc10sCiAgICBzb3VyY2U6IEFycmF5LmZyb20oQXJyYXkoMTApLCAoXywgaSkgPT4gewogICAgICByZXR1cm4gewogICAgICAgIGRhdGU6IGksCiAgICAgICAgLi4uIC5pbmRpY2VzLnJlZHVjZSgoaXRlbSwgbmV4dCkgPT4gewogICAgICAgICAgaXRlbVtuZXh0XSA9IE1hdGgucmFuZG9tKCkgKiAxMDA7CiAgICAgICAgICByZXR1cm4gaXRlbTsKICAgICAgICB9LCB7fSkKICAgICAgfTsKICAgIH0pCiAgfSwKICBzZXJpZXM6IGluZGljZXMubWFwKGluZGV4ID0-IHsKICAgIHJldHVybiB7IHR5cGU6ICdsaW5lJywgbmFtZTogaW5kZXggfTsKICB9KQp9Ow\'" line-highlights="\'\'" />\n<p>The reason for this performance problem is that we process the high-dimensional dataset at the bottom of each series as needed and save a copy of the processed data and the meta information about the dimensions of the data. This meant that the <code>1000 x 1000</code> dimensions had to be processed and saved in the example, which put a huge pressure on memory and garbage collection, resulting in a dramatic performance drop for high dimensions.</p>\n<p>In the new version we have optimized this problem so that all series share the dataset storage as much as possible (whether or not they do depends on how the series uses the data).\nThis optimization ensure that memory does not explode as the dataset dimensions and series grow, significantly improving initialization performance in this extreme scenario. The rendering time for the example just described has also been reduced to an acceptable 300 ms or less.</p>\n<p>It is not just this high-dimensional scenario that benefits from this optimization. When using a dataset with large amount of data, multiple series only process the data once because of data sharing, so it can also bring significant performance gains.</p>\n<h2 id="type-optimization-for-custom-series" tabindex="-1">Type optimization for custom series</h2>\n<p>Custom series provide a very flexible way to create series graphs. Compared to other series, the learning curve for custom series can be a bit steep. Therefore, in this release, we have further optimized the type of the core method <code>renderItem</code> in the custom series by making more precise inferences about the types of the parameters and return values of <code>renderItem</code>, so that it is possible to infer which properties of the elements can be set based on the type returned:</p>\n<md-code-block lang="ts" code="\'c2VyaWVzID0gewogIHR5cGU6ICdjdXN0b20nLAogIHJlbmRlckl0ZW0ocGFyYW1zKSB7CiAgICByZXR1cm4gewogICAgICB0eXBlOiAnZ3JvdXAnLAogICAgICAvLyBUaGUgZ3JvdXAgdHlwZSB1c2VzIGNoaWxkcmVuIHRvIHN0b3JlIGNoaWxkcmVuIG9mIG90aGVyIHR5cGVzCiAgICAgIGNoaWxkcmVuOiBbCiAgICAgICAgewogICAgICAgICAgdHlwZTogJ2NpcmNsZScsCiAgICAgICAgICAvLyBjaXJjbGUgaGFzIHRoZSBmb2xsb3dpbmcgY29uZmlndXJhYmxlIHNoYXBlIGF0dHJpYnV0ZXMKICAgICAgICAgIHNoYXBlOiB7IHI6IDEwLCBjeDogMCwgY3k6IDAgfSwKICAgICAgICAgIC8vIENvbmZpZ3VyYWJsZSBzdHlsZXMKICAgICAgICAgIHN0eWxlOiB7IGZpbGw6ICdyZWQnIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHR5cGU6ICdyZWN0JywKICAgICAgICAgIC8vIHJlY3QgaGFzIHRoZSBmb2xsb3dpbmcgY29uZmlndXJhYmxlIHNoYXBlIHByb3BlcnRpZXMKICAgICAgICAgIHNoYXBlOiB7IHg6IDAsIHk6IDAsIHdpZHRoOiAxMDAsIGhlaWdodDogMTAwIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHR5cGU6ICdwYXRoJywKICAgICAgICAgIC8vIEN1c3RvbSBwYXRoIHNoYXBlcwogICAgICAgICAgc2hhcGU6IHsgZDogJy4uLicgfQogICAgICAgIH0KICAgICAgXQogICAgfTsKICB9Cn07\'" line-highlights="\'\'" />\n<h2 id="summary" tabindex="-1">Summary</h2>\n<p>If you\'re interested in some of the features and optimizations in 5.2.0, you may want to update to the latest version of Apache ECharts and try it out for yourself.</p>\n<p>If you\'re interested in what\'s next for Apache ECharts, you can also follow our development plans at <a href="https://github.com/apache/echarts/milestones">GitHub Milestone</a>. Feel free to join us as a contributor (learn more at <a href="https://github.com/apache/echarts/wiki">Wiki</a>).</p>\n<h2 id="full-changelog" tabindex="-1">Full Changelog</h2>\n<p>View the <a href="https://echarts.apache.org//changelog.html#v5-2-0">Changelog</a></p>\n',postPath:"en/basics/release-note/5-2-0",title:"5.2 - What's New - Basics"}],fetch:{},error:null,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:o,children:[{title:"获取 ECharts",dir:g},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:r,draft:e},{title:"寻求帮助",dir:s},{title:"版本特性",dir:d,children:[{title:"ECharts 5 特性介绍",dir:l},{title:"v4 升级 v5 指南",dir:I},{title:5.2,dir:C},{title:5.3,dir:c},{title:5.4,dir:h}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:m,draft:e},{title:"系列",dir:b,draft:e},{title:"样式",dir:w},{title:"数据集",dir:u},{title:"数据转换",dir:f},{title:"坐标系",dir:B,draft:e},{title:"坐标轴",dir:y},{title:"视觉映射",dir:i},{title:"图例",dir:G},{title:"事件与行为",dir:v}]},{title:"应用篇",dir:Z,children:[{title:"常用图表类型",dir:X,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:H},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:W},{title:"极坐标系柱状图",dir:J,draft:e},{title:"阶梯瀑布图",dir:F},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:K,children:[{title:"基础折线图",dir:Y},{title:"堆叠折线图",dir:S},{title:"区域面积图",dir:k},{title:"平滑曲线图",dir:V},{title:"阶梯线图",dir:N}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:L},{title:"圆环图",dir:x},{title:"南丁格尔图（玫瑰图）",dir:z}]},{title:"散点图",dir:T,children:[{title:"基础散点图",dir:D}]}]},{title:U,dir:t,draft:e},{title:"跨平台方案",dir:O,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:M},{title:"数据下钻",dir:E,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"动画",dir:j,children:[{title:"数据过渡动画",dir:P}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:e},{title:"智能指针吸附",dir:$}]}]},{title:"最佳实践",dir:ee,children:[{title:U,dir:t,draft:e},{title:te,dir:ie},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ae}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:o,children:[{title:"Download ECharts",dir:g},{title:"Import ECharts",dir:n},{title:"Resources",dir:r,draft:e},{title:"Get Help",dir:s},{title:"What's New",dir:d,children:[{title:"ECharts 5 Features",dir:l},{title:"Migration from v4 to v5",dir:I},{title:5.2,dir:C},{title:5.3,dir:c},{title:5.4,dir:h}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:m,draft:e},{title:"Series",dir:b,draft:e},{title:"Style",dir:w},{title:"Dataset",dir:u},{title:"Data Transform",dir:f},{title:"Coordinate",dir:B,draft:e},{title:"Axis",dir:y},{title:"Visual Mapping",dir:i},{title:"Legend",dir:G},{title:"Event and Action",dir:v}]},{title:"How To Guides",dir:Z,children:[{title:"Common Charts",dir:X,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:H},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:W},{title:"Bar Polar",dir:J,draft:e},{title:"Waterfall",dir:F}]},{title:"Line",dir:K,children:[{title:"Basic Line",dir:Y},{title:"Stacked Line",dir:S},{title:"Area Chart",dir:k},{title:"Smoothed Line",dir:V},{title:"Step Line",dir:N}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:L},{title:"Ring Style",dir:x},{title:"Rose Style",dir:z}]},{title:"Scatter",dir:T,children:[{title:"Basic Scatter",dir:D}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:O,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:M},{title:"Drilldown",dir:E,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Animation",dir:j,children:[{title:"Data Transition",dir:P}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:e},{title:"Intelligent Pointer Snapping",dir:$}]}]},{title:"Best Practices",dir:ee,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:te,dir:ie},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ae}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:e,routePath:"/en/basics/release-note/5-2-0",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> |
