| <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?_v_=20240226" 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-input" 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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-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="/echarts-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><li class="nav-item"><a href="/echarts-handbook/en/basics/release-note/5-5-0" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">5.5</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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="apache-echarts-5.5.0-features" tabindex="-1">Apache ECharts 5.5.0 Features</h1> <h2 id="enhanced-esm-support" tabindex="-1">Enhanced ESM Support</h2> <p>This feature is a significant change to the default ESM package, specifically designed for developer testing and Node.js usage in module customization scenarios.</p> <p>Previously, ECharts only exported <code>*.esm</code> files in npm (in the lib directory of the npm package). While this worked well in bundlers, it didn’t perform as well in the Node.js runtime and some Node.js-based testing frameworks like vitest and jest.</p> <p>With this new feature, we’ve made several changes to improve this:</p> <ul><li>Added <code>"type": "module"</code> to package.json</li> <li>Added <code>"exports": {...}"</code> to package.json</li> <li>Added some <code>package.json</code> files to the sub-directory, which only contain <code>"type": "commonjs"</code>.</li></ul> <p>These changes mean that files like <code>echarts/core.js</code> can now be resolved as ESM in environments like pure Node.js, vitest, jest, and create-react-app.</p> <p>We’ve also ensured that this new feature is compatible with a variety of environments, including runtime (node/vitest/jest(create-react-app)/ssr/…) and bundlers (webpack/rollup/vite/esbuild/…).</p> <p>We’re excited about this new feature and believe it will significantly improve the developer experience.</p> <h2 id="server-side-rendering-%EF%BC%8B-lightweight-client-runtime" tabindex="-1">Server-Side Rendering ＋ Lightweight Client Runtime</h2> <p>Apache ECharts is powerful, but correspondingly, it has a large package size. We have made various efforts to improve this in previous versions. Developers can use TreeShaking to load parts of the code as needed, reducing the amount of code loaded. Starting from Apache ECharts version 5.3, we support a server-side SVG string rendering solution with zero dependencies, and support the initial animation of charts. In this way, using the result of server-side rendering as the first screen rendering can greatly reduce the first screen loading time.</p> <p>Although server-side rendering is an effective solution to reduce the package size, if some interactions need to be implemented on the client side, it is still necessary to load echarts.js, which may increase the loading time. For some scenarios that require faster page loading, this may not be an ideal choice.</p> <p>In version 5.5.0, we added a lightweight runtime for the client side, so the client does not need to load the full ECharts to implement some interactions. In this way, we can render charts on the server side, and then load the lightweight runtime on the client side to implement some common interactions. This means that only 4KB of lightweight runtime (1KB after gzip) is needed to implement charts with initial animations and some commonly used interaction forms. This improvement will greatly increase the page loading speed, especially for the mobile experience.</p> <p><img src alt data-src="images/5-5-0/ssr-example.png"></p> <p>Take this pie chart with a title as an example, if the client only packages the pie chart and title components, it needs 135KB after gzip; if it follows the server-side rendering solution, the rendering result SVG is 1 KB after gzip, and the client runtime is 1KB after gzip, only 1.5% of the former volume. In terms of interaction, the latter can also achieve initial animation, highlighting after the mouse moves to the chart element, and get click events, which can meet most of the common interaction needs.</p> <p>If you need to use this solution, the server-side code remains the same, but you need to make sure that the ECharts version is above 5.5.0.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token comment">// Server-side code</span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></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 lightweight client runtime must be used in conjunction with the server-side rendering results in SVG format, supporting the following interactions:</p> <ul><li>Initial animation of the chart (implementation principle: the SVG rendered by the server has CSS animation)</li> <li>Highlight style (implementation principle: the SVG rendered by the server has CSS animation)</li> <li>Dynamically change data (implementation principle: the lightweight runtime requests the server for secondary rendering)</li> <li>Click the legend to toggle whether the series is displayed (implementation principle: the lightweight runtime requests the server for secondary rendering)</li></ul> <p>As you can see, this can satisfy most interactive scenario needs. If more complex interactions are needed, the client needs to load <code>echarts.js</code> to implement complete functionality. For a complete introduction, please refer to <a href="en/how-to/cross-platform/server">Server-side Rendering ECharts Charts</a>.</p> <h2 id="data-drilldown-supports-transition-animation" tabindex="-1">Data Drilldown Supports Transition Animation</h2> <p>In version 5.5.0, we added the <code>childGroupId</code> configuration item, which can realize the transition animation function of data drilldown.</p> <p>In previous versions, we already support using <code>groupId</code> to represent the group to which the current data belongs. The newly added <code>childGroupId</code> can be used to express the group of the current data itself, forming a `parent-child-grandchild` relationship chain after being used in conjunction with <code>groupId</code>. When the user clicks on the data element in the chart, the chart will display the drilled down data in the form of transition animation.</p> <iframe width="100%" height="400" src=""></iframe> <p>Developers only need to specify <code>groupId</code> and <code>childGroupId</code>, and ECharts will automatically handle the hierarchical relationship and realize the transition animation.</p> <h2 id="pie-chart-supports-gaps-between-sectors" tabindex="-1">Pie Chart Supports Gaps Between Sectors</h2> <p>By setting gaps between the sectors of the pie chart, the data blocks of the pie chart can be clearer and form unique visual effects. See (<a href="https://echarts.apache.org/option.html#series-pie.padAngle">series-pie.padAngle</a>).</p> <iframe width="100%" height="400" src=""></iframe> <h2 id="pie-chart-and-polar-coordinate-system-support-end-angle" tabindex="-1">Pie Chart and Polar Coordinate System Support End Angle</h2> <p>The end angle configuration item allows us to make incomplete pie charts such as semi-circles. See (<a href="https://echarts.apache.org/option.html#series-pie.endAngle">series-pie.endAngle</a>).</p> <iframe width="100%" height="400" src=""></iframe> <p>The polar coordinate system also supports the end angle, which can create more diverse polar coordinate charts. See (<a href="https://echarts.apache.org/option.html#angleAxis.endAngle">angleAxis.endAngle</a>).</p> <iframe width="100%" height="400" src=""></iframe> <h2 id="added-min-max-sampling-method" tabindex="-1">Added <code>min-max</code> Sampling Method</h2> <p>The ECharts <a href="https://echarts.apache.org/option.html#series-line.sampling">sampling</a> configuration item allows for setting the downsampling strategy for line charts when the amount of data is far greater than the number of pixels, which can effectively optimize the drawing efficiency of the chart. In version 5.5.0, we added the <code>min-max</code> sampling method, which can display the extremes of the data more accurately while retaining the overall trend of the data.</p> <h2 id="added-two-languages--arabic-and-dutch" tabindex="-1">Added Two Languages: Arabic and Dutch</h2> <p>In version 5.5.0, we added support for two languages, Arabic (AR) and Dutch (NL). Developers can register new language packs through the <a href="https://echarts.apache.org/api.html#echarts.registerLocale">echarts.registerLocale</a> method.</p> <h2 id="tooltip-supports-specifying-container" tabindex="-1">Tooltip Supports Specifying Container</h2> <p>In previous versions, the Tooltip could only be inserted into the chart container or <code>document.body</code>. Now, you can specify the container through <a href="https://echarts.apache.org/option.html#tooltip.appendTo">tooltip.appendTo</a>, so you can control the position of the tooltip more flexibly.</p> <h2 id="alignment-mode-of-maximum-and-minimum-labels-on-axis" tabindex="-1">Alignment Mode of Maximum and Minimum Labels on Axis</h2> <p>In version 5.5.0, we added <a href="https://echarts.apache.org/option.html#xAxis.axisLabel.alignMinLabel">axisLabel.alignMinLabel</a> and <a href="https://echarts.apache.org/option.html#xAxis.axisLabel.alignMaxLabel">axisLabel.alignMaxLabel</a> configuration items, which can control the alignment mode of the maximum and minimum labels on the axis. If the drawing area of the chart is relatively large and you don't want the axis label to overflow, you can align the maximum and minimum labels to the right and left, respectively.</p> <h2 id="pictorial-bar-chart-supports-clipping" tabindex="-1">Pictorial Bar Chart Supports Clipping</h2> <p>The pictorial bar chart may exceed the drawing area. If you want to avoid this, you can clip it through the <a href="https://echarts.apache.org/option.html#series-pictorialBar.clip">series-pictorialBar.clip</a> configuration item.</p> <h2 id="added-dataindex-parameter-for-tooltip-valueformatter" tabindex="-1">Added <code>dataIndex</code> Parameter For Tooltip <code>valueFormatter</code></h2> <p><code>valueFormatter</code> can be used to customize the value part of the tooltip content, and now an <code>dataIndex</code> parameter has been added, which can be used to obtain the index of the current data.</p> <h2 id="full-changelog" tabindex="-1">Full Changelog</h2> <p>View the <a href="https://echarts.apache.org/changelog.html#v5-5-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-5-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/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60" loading="lazy"> <span>Ovilia</span></a><a href="https://github.com/plainheart" target="_blank" class="post-contributor"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60" loading="lazy"> <span>plainheart</span></a></div></div></div></div></div></div></div></div></div></div><script>window.__NUXT__=function(e,t,i,a,r,n,d,o,l,s,h,c,p,g,m,u,f,b,I,w,C,y,v,A,G,x,B,Z,V,N,W,S,k,H,X,z,T,L,R,K,Y,J,j,P,D,E,F,M,Q,U,q,O,_,$,ee,te,ie,ae){return{layout:"default",data:[{html:'<h1 id="apache-echarts-5.5.0-features" tabindex="-1">Apache ECharts 5.5.0 Features</h1>\n<h2 id="enhanced-esm-support" tabindex="-1">Enhanced ESM Support</h2>\n<p>This feature is a significant change to the default ESM package, specifically designed for developer testing and Node.js usage in module customization scenarios.</p>\n<p>Previously, ECharts only exported <code>*.esm</code> files in npm (in the lib directory of the npm package). While this worked well in bundlers, it didn’t perform as well in the Node.js runtime and some Node.js-based testing frameworks like vitest and jest.</p>\n<p>With this new feature, we’ve made several changes to improve this:</p>\n<ul>\n<li>Added <code>"type": "module"</code> to package.json</li>\n<li>Added <code>"exports": {...}"</code> to package.json</li>\n<li>Added some <code>package.json</code> files to the sub-directory, which only contain <code>"type": "commonjs"</code>.</li>\n</ul>\n<p>These changes mean that files like <code>echarts/core.js</code> can now be resolved as ESM in environments like pure Node.js, vitest, jest, and create-react-app.</p>\n<p>We’ve also ensured that this new feature is compatible with a variety of environments, including runtime (node/vitest/jest(create-react-app)/ssr/…) and bundlers (webpack/rollup/vite/esbuild/…).</p>\n<p>We’re excited about this new feature and believe it will significantly improve the developer experience.</p>\n<h2 id="server-side-rendering-%EF%BC%8B-lightweight-client-runtime" tabindex="-1">Server-Side Rendering ＋ Lightweight Client Runtime</h2>\n<p>Apache ECharts is powerful, but correspondingly, it has a large package size. We have made various efforts to improve this in previous versions. Developers can use TreeShaking to load parts of the code as needed, reducing the amount of code loaded. Starting from Apache ECharts version 5.3, we support a server-side SVG string rendering solution with zero dependencies, and support the initial animation of charts. In this way, using the result of server-side rendering as the first screen rendering can greatly reduce the first screen loading time.</p>\n<p>Although server-side rendering is an effective solution to reduce the package size, if some interactions need to be implemented on the client side, it is still necessary to load echarts.js, which may increase the loading time. For some scenarios that require faster page loading, this may not be an ideal choice.</p>\n<p>In version 5.5.0, we added a lightweight runtime for the client side, so the client does not need to load the full ECharts to implement some interactions. In this way, we can render charts on the server side, and then load the lightweight runtime on the client side to implement some common interactions. This means that only 4KB of lightweight runtime (1KB after gzip) is needed to implement charts with initial animations and some commonly used interaction forms. This improvement will greatly increase the page loading speed, especially for the mobile experience.</p>\n<p><img src="" alt="" data-src="images/5-5-0/ssr-example.png"></p>\n<p>Take this pie chart with a title as an example, if the client only packages the pie chart and title components, it needs 135KB after gzip; if it follows the server-side rendering solution, the rendering result SVG is 1 KB after gzip, and the client runtime is 1KB after gzip, only 1.5% of the former volume. In terms of interaction, the latter can also achieve initial animation, highlighting after the mouse moves to the chart element, and get click events, which can meet most of the common interaction needs.</p>\n<p>If you need to use this solution, the server-side code remains the same, but you need to make sure that the ECharts version is above 5.5.0.</p>\n<md-code-block lang="ts" code="\'Ly8gU2VydmVyLXNpZGUgY29kZQpjb25zdCBlY2hhcnRzID0gcmVxdWlyZSgnZWNoYXJ0cycpOwoKLy8gSW4gU1NSIG1vZGUgdGhlIGZpcnN0IGNvbnRhaW5lciBwYXJhbWV0ZXIgaXMgbm90IHJlcXVpcmVkCmxldCBjaGFydCA9IGVjaGFydHMuaW5pdChudWxsLCBudWxsLCB7CiAgcmVuZGVyZXI6ICdzdmcnLCAvLyBtdXN0IHVzZSBTVkcgcmVuZGVyaW5nIG1vZGUKICBzc3I6IHRydWUsIC8vIGVuYWJsZSBTU1IKICB3aWR0aDogNDAwLCAvLyBuZWVkIHRvIHNwZWNpZnkgaGVpZ2h0IGFuZCB3aWR0aAogIGhlaWdodDogMzAwCn0pOwoKLy8gdXNlIHNldE9wdGlvbiBhcyBub3JtYWwKY2hhcnQuc2V0T3B0aW9uKHsKICAvLy4uLgp9KTsKCi8vIE91dHB1dCBhIHN0cmluZwpjb25zdCBzdmdTdHIgPSBjaGFydC5yZW5kZXJUb1NWR1N0cmluZygpOwoKLy8gRGlzcG9zZSBpdCB0byByZWxlYXNlIG1lbW9yeQpjaGFydC5kaXNwb3NlKCk7CmNoYXJ0ID0gbnVsbDsKCi8vIFJlc3BvbnNlIHRvIHRoZSBicm93c2VyICh1c2luZyBFeHByZXNzLmpzIGFzIGV4YW1wbGUpOgpyZXMud3JpdGVIZWFkKDIwMCwgewogICdDb250ZW50LVR5cGUnOiAnYXBwbGljYXRpb24veG1sJwp9KTsKcmVzLndyaXRlKHN2Z1N0cik7CnJlcy5lbmQoKTs\'" line-highlights="\'\'" />\n<p>The client adds the obtained SVG string to the container and binds the lightweight runtime:</p>\n<md-code-block lang="html" code="\'PGRpdiBpZD0iY2hhcnQtY29udGFpbmVyIiBzdHlsZT0id2lkdGg6ODAwcHg7aGVpZ2h0OjYwMHB4Ij48L2Rpdj4KCjxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2VjaGFydHMvc3NyL2NsaWVudC9kaXN0L2luZGV4Lm1pbi5qcyI-PC9zY3JpcHQ-CjxzY3JpcHQ-CmNvbnN0IHNzckNsaWVudCA9IHdpbmRvd1snZWNoYXJ0cy1zc3ItY2xpZW50J107Cgpjb25zdCBpc1Nlcmllc1Nob3duID0gewogIGE6IHRydWUsCiAgYjogdHJ1ZQp9OwoKZnVuY3Rpb24gdXBkYXRlQ2hhcnQoc3ZnU3RyKSB7CiAgY29uc3QgY29udGFpbmVyID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2NoYXJ0LWNvbnRhaW5lcicpOwogIGNvbnRhaW5lci5pbm5lckhUTUwgPSBzdmdTdHI7CgogIC8vIFVzZSBsaWdodHdlaWdodCBydW50aW1lIHRvIGdpdmUgdGhlIGNoYXJ0IGludGVyYWN0aXZlIGNhcGFiaWxpdGllcwogIHNzckNsaWVudC5oeWRyYXRlKGNvbnRhaW5lciwgewogICAgb246IHsKICAgICAgY2xpY2s6IChwYXJhbXMpID0-IHsKICAgICAgICBpZiAocGFyYW1zLnNzclR5cGUgPT09ICdsZWdlbmQnKSB7CiAgICAgICAgICAvLyBDbGljayB0aGUgbGVnZW5kIGVsZW1lbnQsIHJlcXVlc3QgdGhlIHNlcnZlciBmb3Igc2Vjb25kYXJ5IHJlbmRlcmluZwogICAgICAgICAgaXNTZXJpZXNTaG93bltwYXJhbXMuc2VyaWVzTmFtZV0gPSAhaXNTZXJpZXNTaG93bltwYXJhbXMuc2VyaWVzTmFtZV07CiAgICAgICAgICBmZXRjaCgnLi4uP3Nlcmllcz0nICsgSlNPTi5zdHJpbmdpZnkoaXNTZXJpZXNTaG93bikpCiAgICAgICAgICAgIC50aGVuKHJlcyA9PiByZXMudGV4dCgpKQogICAgICAgICAgICAudGhlbihzdmdTdHIgPT4gewogICAgICAgICAgICAgIHVwZGF0ZUNoYXJ0KHN2Z1N0cik7CiAgICAgICAgICAgIH0pOwogICAgICAgIH0KICAgICAgfQogICAgfQogIH0pOwp9CgovLyBHZXQgdGhlIFNWRyBzdHJpbmcgcmVuZGVyZWQgYnkgdGhlIHNlcnZlciB0aHJvdWdoIEFKQVggcmVxdWVzdApmZXRjaCgnLi4uJykKICAudGhlbihyZXMgPT4gcmVzLnRleHQoKSkKICAudGhlbihzdmdTdHIgPT4gewogICAgdXBkYXRlQ2hhcnQoc3ZnU3RyKTsKICB9KTsKPC9zY3JpcHQ-\'" line-highlights="\'\'" />\n<p>The lightweight client runtime must be used in conjunction with the server-side rendering results in SVG format, supporting the following interactions:</p>\n<ul>\n<li>Initial animation of the chart (implementation principle: the SVG rendered by the server has CSS animation)</li>\n<li>Highlight style (implementation principle: the SVG rendered by the server has CSS animation)</li>\n<li>Dynamically change data (implementation principle: the lightweight runtime requests the server for secondary rendering)</li>\n<li>Click the legend to toggle whether the series is displayed (implementation principle: the lightweight runtime requests the server for secondary rendering)</li>\n</ul>\n<p>As you can see, this can satisfy most interactive scenario needs. If more complex interactions are needed, the client needs to load <code>echarts.js</code> to implement complete functionality. For a complete introduction, please refer to <a href="en/how-to/cross-platform/server">Server-side Rendering ECharts Charts</a>.</p>\n<h2 id="data-drilldown-supports-transition-animation" tabindex="-1">Data Drilldown Supports Transition Animation</h2>\n<p>In version 5.5.0, we added the <code>childGroupId</code> configuration item, which can realize the transition animation function of data drilldown.</p>\n<p>In previous versions, we already support using <code>groupId</code> to represent the group to which the current data belongs. The newly added <code>childGroupId</code> can be used to express the group of the current data itself, forming a `parent-child-grandchild` relationship chain after being used in conjunction with <code>groupId</code>. When the user clicks on the data element in the chart, the chart will display the drilled down data in the form of transition animation.</p>\n<md-example src="bar-multi-drilldown" width="100%" height="400" />\n<p>Developers only need to specify <code>groupId</code> and <code>childGroupId</code>, and ECharts will automatically handle the hierarchical relationship and realize the transition animation.</p>\n<h2 id="pie-chart-supports-gaps-between-sectors" tabindex="-1">Pie Chart Supports Gaps Between Sectors</h2>\n<p>By setting gaps between the sectors of the pie chart, the data blocks of the pie chart can be clearer and form unique visual effects. See (<a href="https://echarts.apache.org/option.html#series-pie.padAngle">series-pie.padAngle</a>).</p>\n<md-example src="pie-padAngle" width="100%" height="400" />\n<h2 id="pie-chart-and-polar-coordinate-system-support-end-angle" tabindex="-1">Pie Chart and Polar Coordinate System Support End Angle</h2>\n<p>The end angle configuration item allows us to make incomplete pie charts such as semi-circles. See (<a href="https://echarts.apache.org/option.html#series-pie.endAngle">series-pie.endAngle</a>).</p>\n<md-example src="pie-half-donut" width="100%" height="400" />\n<p>The polar coordinate system also supports the end angle, which can create more diverse polar coordinate charts. See (<a href="https://echarts.apache.org/option.html#angleAxis.endAngle">angleAxis.endAngle</a>).</p>\n<md-example src="polar-endAngle" width="100%" height="400" />\n<h2 id="added-min-max-sampling-method" tabindex="-1">Added <code>min-max</code> Sampling Method</h2>\n<p>The ECharts <a href="https://echarts.apache.org/option.html#series-line.sampling">sampling</a> configuration item allows for setting the downsampling strategy for line charts when the amount of data is far greater than the number of pixels, which can effectively optimize the drawing efficiency of the chart. In version 5.5.0, we added the <code>min-max</code> sampling method, which can display the extremes of the data more accurately while retaining the overall trend of the data.</p>\n<h2 id="added-two-languages--arabic-and-dutch" tabindex="-1">Added Two Languages: Arabic and Dutch</h2>\n<p>In version 5.5.0, we added support for two languages, Arabic (AR) and Dutch (NL). Developers can register new language packs through the <a href="https://echarts.apache.org/api.html#echarts.registerLocale">echarts.registerLocale</a> method.</p>\n<h2 id="tooltip-supports-specifying-container" tabindex="-1">Tooltip Supports Specifying Container</h2>\n<p>In previous versions, the Tooltip could only be inserted into the chart container or <code>document.body</code>. Now, you can specify the container through <a href="https://echarts.apache.org/option.html#tooltip.appendTo">tooltip.appendTo</a>, so you can control the position of the tooltip more flexibly.</p>\n<h2 id="alignment-mode-of-maximum-and-minimum-labels-on-axis" tabindex="-1">Alignment Mode of Maximum and Minimum Labels on Axis</h2>\n<p>In version 5.5.0, we added <a href="https://echarts.apache.org/option.html#xAxis.axisLabel.alignMinLabel">axisLabel.alignMinLabel</a> and <a href="https://echarts.apache.org/option.html#xAxis.axisLabel.alignMaxLabel">axisLabel.alignMaxLabel</a> configuration items, which can control the alignment mode of the maximum and minimum labels on the axis. If the drawing area of the chart is relatively large and you don\'t want the axis label to overflow, you can align the maximum and minimum labels to the right and left, respectively.</p>\n<h2 id="pictorial-bar-chart-supports-clipping" tabindex="-1">Pictorial Bar Chart Supports Clipping</h2>\n<p>The pictorial bar chart may exceed the drawing area. If you want to avoid this, you can clip it through the <a href="https://echarts.apache.org/option.html#series-pictorialBar.clip">series-pictorialBar.clip</a> configuration item.</p>\n<h2 id="added-dataindex-parameter-for-tooltip-valueformatter" tabindex="-1">Added <code>dataIndex</code> Parameter For Tooltip <code>valueFormatter</code></h2>\n<p><code>valueFormatter</code> can be used to customize the value part of the tooltip content, and now an <code>dataIndex</code> parameter has been added, which can be used to obtain the index of the current data.</p>\n<h2 id="full-changelog" tabindex="-1">Full Changelog</h2>\n<p>View the <a href="https://echarts.apache.org/changelog.html#v5-5-0">Changelog</a></p>\n',postPath:"en/basics/release-note/5-5-0",title:"5.5 - 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:r,children:[{title:"获取 ECharts",dir:n},{title:"在项目中引入 ECharts",dir:d},{title:"资源列表",dir:o,draft:e},{title:"寻求帮助",dir:l},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:h},{title:"v4 升级 v5 指南",dir:c},{title:5.2,dir:p},{title:5.3,dir:g},{title:5.4,dir:m},{title:5.5,dir:u}]}]},{title:"概念篇",dir:f,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:I,draft:e},{title:"系列",dir:w,draft:e},{title:"样式",dir:C},{title:"数据集",dir:y},{title:"数据转换",dir:v},{title:"坐标系",dir:A,draft:e},{title:"坐标轴",dir:G},{title:"视觉映射",dir:i},{title:"图例",dir:x},{title:"事件与行为",dir:B}]},{title:"应用篇",dir:Z,children:[{title:"常用图表类型",dir:V,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:N},{title:"堆叠柱状图",dir:W},{title:"动态排序柱状图",dir:S},{title:"极坐标系柱状图",dir:k,draft:e},{title:"阶梯瀑布图",dir:H},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:X,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:T},{title:"区域面积图",dir:L},{title:"平滑曲线图",dir:R},{title:"阶梯线图",dir:K}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:Y},{title:"圆环图",dir:J},{title:"南丁格尔图（玫瑰图）",dir:j}]},{title:"散点图",dir:P,children:[{title:"基础散点图",dir:D}]}]},{title:"移动端优化",dir:t,draft:e},{title:"跨平台方案",dir:E,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:F},{title:"数据下钻",dir:M,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"动画",dir:U,children:[{title:"数据过渡动画",dir:q}]},{title:"交互",dir:O,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e},{title:"智能指针吸附",dir:$}]}]},{title:"最佳实践",dir:ee,children:[{title:"移动端优化",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:r,children:[{title:"Download ECharts",dir:n},{title:"Import ECharts",dir:d},{title:"Resources",dir:o,draft:e},{title:"Get Help",dir:l},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:h},{title:"Migration from v4 to v5",dir:c},{title:5.2,dir:p},{title:5.3,dir:g},{title:5.4,dir:m},{title:5.5,dir:u}]}]},{title:"Concepts",dir:f,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:I,draft:e},{title:"Series",dir:w,draft:e},{title:"Style",dir:C},{title:"Dataset",dir:y},{title:"Data Transform",dir:v},{title:"Coordinate",dir:A,draft:e},{title:"Axis",dir:G},{title:"Visual Mapping",dir:i},{title:"Legend",dir:x},{title:"Event and Action",dir:B}]},{title:"How To Guides",dir:Z,children:[{title:"Common Charts",dir:V,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:N},{title:"Stacked Bar",dir:W},{title:"Bar Racing",dir:S},{title:"Bar Polar",dir:k,draft:e},{title:"Waterfall",dir:H}]},{title:"Line",dir:X,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:T},{title:"Area Chart",dir:L},{title:"Smoothed Line",dir:R},{title:"Step Line",dir:K}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:Y},{title:"Ring Style",dir:J},{title:"Rose Style",dir:j}]},{title:"Scatter",dir:P,children:[{title:"Basic Scatter",dir:D}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:E,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:F},{title:"Drilldown",dir:M,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Animation",dir:U,children:[{title:"Data Transition",dir:q}]},{title:"Interaction",dir:O,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,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:"/echarts-handbook",rootPath:"https://apache.github.io/echarts-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-5-0",config:{_app:{basePath:"/echarts-handbook/",assetsPath:"/echarts-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","5-5-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="/echarts-handbook/_nuxt/0323e7b.js" defer></script><script src="/echarts-handbook/_nuxt/js/bbca8d7f75f3cc39fb47.js" defer></script><script src="/echarts-handbook/_nuxt/js/9d86a6602b3f4dd6c979.js" defer></script><script src="/echarts-handbook/_nuxt/js/fa73816a85b29fbf7562.js" defer></script><script src="/echarts-handbook/_nuxt/js/b964c20bb1562bc48da6.js" defer></script><script src="/echarts-handbook/_nuxt/js/d28cad802cfdf9e4dbad.js" defer></script><noscript data-n-head="ssr" data-body="true"><div class="no-script"><strong>很抱歉，Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript> |
