| <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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">Migration from v4 to v5</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-3-0" class="nav-link"><span class="title">5.3</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-4-0" class="nav-link"><span class="title">5.4</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Animation</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/animation/transition" class="nav-link"><span class="title">Data Transition</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-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="new-features-in-echarts-5" tabindex="-1">New features in ECharts 5</h1> <p>Data visualization has come a long way in the last few years. Developers no longer expect visualization products to be simple chart creation tools, but have more advanced needs in terms of interaction, performance, data processing, and more.</p> <p>Apache ECharts has always been committed to making it easier for developers to create flexible and rich visualizations. In the latest release of Apache ECharts 5, we have focused on enhancing the storytelling of charts, allowing developers to tell the story behind the data in a simpler way.</p> <img data-src="images/feature-v5/echarts-5-en.png" width="800px"> <p>"The core of Apache ECharts 5 is "Show, do not tell", which is a comprehensive upgrade of five topics and 15 features around the stroy telling of visualizations, allowing charts to better tell the story behind the data. It helps developers to create visualizations that meet the needs of various scenarios more easily.</p> <h2 id="storytelling" tabindex="-1">Storytelling</h2> <p>The importance of animation to human cognition cannot be overstated. In our previous work, we used initialization animations and transition animations to help users understand the connection between data transformations, making the appearance of charts and transformations seem less rigid. This time, we have even enhanced our animation capabilities, even more significantly. We hope to further exploit the role of animation to help users' cognition, and help them understand the story behind the chart more easily with the dynamic stroy function of the chart.</p> <h4 id="bar%2Fline-racing" tabindex="-1">Bar/Line Racing</h4> <p>Apache ECharts 5 adds support for dynamically sorted bar-racing and dynamically sorted line-racing charts to help developers easily create time-series charts that show changes in data over time and tell the evolution of data.</p> <iframe width="700" height="400" src=""></iframe> <iframe width="700" height="400" src=""></iframe> <p>The dynamic sorting chart shows the derivation of different categories in the ranking over time. The developer can enable this effect in ECharts with a few simple configuration code.</p> <h4 id="custom-series-animation" tabindex="-1">Custom Series Animation</h4> <p>In addition to dynamic sorting charts, Apache ECharts 5 provides even richer and more powerful animations in the custom series, supporting interpolation animations for label value text, transition animations for morph, combine, separate, and other effects of graphics.</p> <p>Imagine what amazing visualizations you can create with these dynamic effects!</p> <h2 id="visual-design" tabindex="-1">Visual Design</h2> <p>The role of visual design is not only to make the chart look better, but more importantly, a design that conforms to the principles of visualization can help users understand more quickly what the chart is trying to say and eliminate as much misunderstanding as possible from poor design.</p> <h4 id="overall-design" tabindex="-1">Overall Design</h4> <p>We have found that a large percentage of developers use the default theme style for ECharts, so it is important to have an elegant default theme design. In Apache ECharts 5, we redesigned the default theme style, optimizing it for different charts and components. For example, we took into account factors such as differentiation between colors, contrast with background colors, and harmony with adjacent colors, and ensured that people with color blindness could clearly distinguish data.</p> <img data-src="images/feature-v5/theme-color.png" width="400px"> <p>Let's look at the new version of the light and dark theme styles using the most commonly used bar chart as an example.</p> <img data-src="images/feature-v5/new-theme-light.png" width="500px"> <img data-src="images/feature-v5/new-theme-dark.png" width="500px"> <p>For the data area zoom, timeline and other interactive components, we also designed a new style and provide a better interactive experience:</p> <img data-src="images/feature-v5/dataZoom.png" width="500px"> <img data-src="images/feature-v5/timeline.png" width="500px"> <h4 id="label" tabindex="-1">Label</h4> <p>Labels are one of the core elements of a chart, and clear and unambiguous labels help users to have a more accurate understanding of the data. Apache ECharts 5 provides a variety of new labeling features that allow dense labels to be clearly displayed and accurately represented.</p> <p>Apache ECharts 5 can be enabled to automatically hide overlapping labels through a configuration item. For labels that exceed the display area, you can choose to automatically truncate or line break them. Dense pie chart labels now have a more aesthetically pleasing automatic layout.</p> <p>These features can help avoid text that is too dense and affects readability. And, no additional code needs to be written by the developer for them to take effect by default, greatly simplifying the development cost for developers.</p> <p>We also provide several configuration options to allow developers to actively control the layout strategy of tabs, such as tab dragging, overall display at the edge of the canvas, connecting with guide lines and graphical elements, and still linking to highlight the associated relationships.</p> <p>The new label feature allows you to have very clear label presentation even in a confined space mobile:</p> <img data-src="images/feature-v5/pie-label.png" width="400px"> <h4 id="time-axis" tabindex="-1">Time Axis</h4> <p>Apache ECharts 5 brings a time axis suitable for expressing timestamp scales. The default design of the time axis highlights important information more prominently and provides more flexible customization capabilities, allowing developers to tailor the time axis's label content to different needs.</p> <p>First of all, the time axis is no longer split absolutely evenly as before, but instead selects more meaningful points like year, month, day, and whole point to display, and can show different levels of scales at the same time. The <code>formatter</code> of labels supports templates for time (e.g. <code>{yyyy}-{MM}-{dd}</code>), and different <code>formatter</code> can be specified for labels with different time granularity, which can be combined with rich text labels to create eye-catching and diverse time effects.</p> <p>The display of the time scale at different dataZoom granularities.</p> <img data-src="images/feature-v5/time-axis.png" width="600px"> <img data-src="images/feature-v5/time-axis-2.png" width="600px"> <h4 id="tooltip" tabindex="-1">Tooltip</h4> <p>Tooltip is one of the most commonly used visualization components to help users interactively understand the details of data. In Apache ECharts 5, we have optimized the style of the tooltip, making the default display of the tooltip elegant and clear by adjusting the font style, color, arrow pointing to the graph, border color following the graph color, and other features. The rendering logic of rich text has been improved to ensure that the display is consistent with the HTML way, allowing users to choose different technical solutions to achieve the same effect in different scenarios.</p> <img data-src="images/feature-v5/new-tooltip.png" width="400px"> <img data-src="images/feature-v5/new-tooltip-2.png" width="400px"> <p>In addition to this, we have also added the ability to sort the list in the tip box by value size or category order this time.</p> <h4 id="gauge" tabindex="-1">Gauge</h4> <p>We have seen a lot of cool gauge charts created by community users, but the way they are configured is often complex and tricky. Therefore, we have upgraded the gauge to support image or vector path drawing pointers, anchor configurations, progress bars, rounded corner effects, and more.</p> <p>Different styles of gauge pointers.</p> <img data-src="images/feature-v5/gauge-pointer.png" width="600px"> <p>These upgrades not only allow developers to achieve cool effects with simpler configuration items, but also bring richer customization capabilities.</p> <iframe width="600" height="600" src=""></iframe> <h4 id="round-corner" tabindex="-1">Round Corner</h4> <p>Apache ECharts 5 supports round corner for pie charts, sunburst charts, and treemap charts. Don't underestimate the simplicity of the rounded corners configuration, but combine them with other effects to create a more personalized visualization.</p> <iframe width="400" height="400" src=""></iframe> <h2 id="interactivity" tabindex="-1">Interactivity</h2> <p>The interactivity of the visualization helps users explore the work and deepen their understanding of the main idea of the diagram.</p> <h4 id="multi-state" tabindex="-1">Multi-State</h4> <p>In ECharts 4, there were two interactive states, <code>emphasis</code> and <code>normal</code>, graph will enter the <code>emphasis</code> state when the mouse hovered to distinguish the data.</p> <p>This time in Apache ECharts 5, we have added a new effect of <strong>blur</strong> other non-related elements to the original mouse hover highlighting, so that the target data can be focused.</p> <p>For example, in this <a href="https://echarts.apache.org/examples/en/editor.html?c=bar-y-category-stack">bar chart</a> example, when the mouse hovers over a series, other non-related series will fade out, thus highlighting more clearly the comparison of data in the focused series. of data in the comparison. On diagrams with more complex data structures such as relationship, tree, sunburst, sankey, etc., it is also possible to see the connections between data by fading out non-related elements. Also, colors, shadows, and other styles that can be set in <code>emphasis</code> can now be set in <code>blur</code>.</p> <p>In addition, we've added <strong>click to select</strong> to all series, an interaction that was previously only available in a few series such as pie charts and maps, allowing developers to set it to single or multiple selection mode, and to listen to the <code>selectchanged</code> event to get all the selected shapes for further processing. As with <code>emphasis</code> and <code>blur</code>, the selection style can also be configured in <code>select</code>.</p> <h4 id="performance-improvements" tabindex="-1">Performance improvements</h4> <h5 id="dirty-rectangle-rendering" tabindex="-1">Dirty Rectangle Rendering</h5> <p>Apache ECharts 5 has new support for dirty rectangle rendering to address performance bottlenecks in large scenes with only local changes. When using the Canvas renderer, the dirty rectangle rendering technique detects and updates only the parts of the view that have changed, rather than any changes causing a complete redraw of the canvas. This can help improve rendering frame rates in some special scenarios, such as scenes where the mouse frequently triggers some graphical highlighting many times. In the past for such scenes, additional Canvas layers were used to optimize performance, but this approach is not universal for all scenes and does not work well for complex styles. Dirty Rectangle rendering does a good job of satisfying both performance and display correctness.</p> <p>A visual demonstration of a dirty rectangle, with the red boxed area redrawn for the frame.</p> <img data-src="images/feature-v5/dirty-rect.gif" width="500px"> <p>You can see the effect by enable dirty rectangle optimization on the new example page.</p> <h5 id="line-chart-performance-optimization-for-real-time-time-series-data" tabindex="-1">Line Chart Performance Optimization for Real-Time Time-Series Data</h5> <p>In addition, the performance of line graphs with large amounts of data has also seen a significant performance improvement. We often encounter the need for high-performance plotting of large amounts of real-time time-series data, which will be updated every hundreds or tens of milliseconds.</p> <p>Apache ECharts 5 deeply optimizes CPU consumption, memory usage, and initialization time in these scenarios, enabling real-time updates (less than 30ms per update) for millions of data, and even rendering within 1s for ten millions of data, with low memory usage and smooth tooltip interactions.</p> <h2 id="development-experience" tabindex="-1">Development Experience</h2> <p>We want such a powerful visualization tool to be used by more developers in a simpler way, so the developer experience is also a very important aspect for us.</p> <h4 id="datasets" tabindex="-1">Datasets</h4> <p>ECharts 5 enhances the data transformation capabilities of datasets, allowing developers to implement common data processing such as filtering, sorting, aggregating, histogram, simple clustering, regression, etc. in a simple way. Developers can use these functions in a uniform and declarative way, and can easily implement common data operations.</p> <h4 id="internationalization" tabindex="-1">Internationalization</h4> <p>The original internationalization implementation of ECharts takes the form of different distribution files packaged according to different language parameters. In this way, the dynamic language and main code are bound together, and the only way to switch languages when using ECharts is to reload different language versions of ECharts distributions.</p> <p>Therefore, starting with Apache ECharts 5, the dynamic language is separated from the main code. To switch languages, you only need to load the corresponding language, use the <code>registerLocale</code> function to mount the language object in a similar way to mount the theme, and then reinitialize it to complete the language switch.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// import the lang object and set when init</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> <h4 id="typescript-refactoring" tabindex="-1">TypeScript Refactoring</h4> <p>In order to continue to refactor and develop new features more safely and efficiently, we started the development of Apache ECharts 5 by rewriting the code using TypeScript. The strong typing brought by TypeScript gave us the confidence to refactor the code drastically to achieve more exciting features during the development of ECharts 5.</p> <p>For developers, we can also generate better and more code-compliant <code>DTS</code> type description files directly from TypeScript code. Until now, ECharts type description files have been maintained by community developers and published to <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/echarts">DefinitelyTyped</a>, which is a lot of work, so thanks for your contribution.</p> <p>In addition, if a developer's component is introduced on-demand, we provide a <code>ComposeOption</code> type method that can combine a configuration item type that contains only the introduced components, which can bring stricter type checking and help you detect unintroduced component types in advance.</p> <h2 id="accessibility" tabindex="-1">Accessibility</h2> <p>Apache ECharts has always taken accessibility design seriously, and we want to make the information conveyed by charts equally to be accessed. We also want to make this possible for chart developers at a very low development cost, thus making developers more willing to support the accessibility.</p> <p>In the last major release, we supported automatic intelligent generation of chart descriptions based on different chart types and data, making it very easy for developers to support DOM description information for charts. In ECharts 5, we have also made more accessibility improvements to help people with visual impairments better understand the chart content.</p> <h4 id="theme-colors" tabindex="-1">Theme Colors</h4> <p>We took accessibility into account when designing the new default theme, and we repeatedly tested the brightness and color values of the colors to help accessibility users clearly identify the chart data.</p> <p>Moreover, for developers with further accessibility needs, we also provide special high-contrast themes to further differentiate the data with higher contrast colors.</p> <h4 id="decal-patterns" tabindex="-1">Decal Patterns</h4> <p>ECharts 5 also provides a new feature of decals to help users further differentiate data by using patterns to assist with color representation.</p> <iframe width="600" height="350" src=""></iframe> <p>In addition, decal patterns can also help in some other scenarios, such as: helping to better distinguish data in printed materials like newspapers and books that have only a single color or very few colors; using graphical elements to facilitate a more intuitive understanding of the data by the user.</p> <iframe width="600" height="350" src=""></iframe> <h2 id="summary" tabindex="-1">Summary</h2> <p>In addition to the features described above, Apache ECharts has been improved in a very large number of details to help developers more easily create charts that good by default, are flexible in configuration, and tell the story behind the data with charts.</p> <p>Thank you to all the developers who have used ECharts, and even participated in community contributions, for making Apache ECharts 5 possible. We'll be working on future developments with even more enthusiasm, and we'll see you all in 6 with even more enthusiasm!</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/v5-feature.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/timonla" target="_blank" class="post-contributor"><img alt="timonla" src="https://avatars.githubusercontent.com/timonla?size=60" loading="lazy"> <span>timonla</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,n,r,o,s,d,l,h,c,p,m,g,f,u,y,b,v,w,x,C,k,E,T,z,A,I,S,D,R,P,W,L,B,G,F,M,V,j,O,q,H,Y,Z,_,J,N,U,K,Q,X,$,ee,te,ie,ae){return{layout:"default",data:[{html:'<h1 id="new-features-in-echarts-5" tabindex="-1">New features in ECharts 5</h1>\n<p>Data visualization has come a long way in the last few years. Developers no longer expect visualization products to be simple chart creation tools, but have more advanced needs in terms of interaction, performance, data processing, and more.</p>\n<p>Apache ECharts has always been committed to making it easier for developers to create flexible and rich visualizations. In the latest release of Apache ECharts 5, we have focused on enhancing the storytelling of charts, allowing developers to tell the story behind the data in a simpler way.</p>\n<img data-src="images/feature-v5/echarts-5-en.png" width="800px" />\n<p>"The core of Apache ECharts 5 is "Show, do not tell", which is a comprehensive upgrade of five topics and 15 features around the stroy telling of visualizations, allowing charts to better tell the story behind the data. It helps developers to create visualizations that meet the needs of various scenarios more easily.</p>\n<h2 id="storytelling" tabindex="-1">Storytelling</h2>\n<p>The importance of animation to human cognition cannot be overstated. In our previous work, we used initialization animations and transition animations to help users understand the connection between data transformations, making the appearance of charts and transformations seem less rigid. This time, we have even enhanced our animation capabilities, even more significantly. We hope to further exploit the role of animation to help users\' cognition, and help them understand the story behind the chart more easily with the dynamic stroy function of the chart.</p>\n<h4 id="bar%2Fline-racing" tabindex="-1">Bar/Line Racing</h4>\n<p>Apache ECharts 5 adds support for dynamically sorted bar-racing and dynamically sorted line-racing charts to help developers easily create time-series charts that show changes in data over time and tell the evolution of data.</p>\n<md-example src="bar-race-country" width="700" height="400" />\n<md-example src="line-race" width="700" height="400" />\n<p>The dynamic sorting chart shows the derivation of different categories in the ranking over time. The developer can enable this effect in ECharts with a few simple configuration code.</p>\n<h4 id="custom-series-animation" tabindex="-1">Custom Series Animation</h4>\n<p>In addition to dynamic sorting charts, Apache ECharts 5 provides even richer and more powerful animations in the custom series, supporting interpolation animations for label value text, transition animations for morph, combine, separate, and other effects of graphics.</p>\n<p>Imagine what amazing visualizations you can create with these dynamic effects!</p>\n<h2 id="visual-design" tabindex="-1">Visual Design</h2>\n<p>The role of visual design is not only to make the chart look better, but more importantly, a design that conforms to the principles of visualization can help users understand more quickly what the chart is trying to say and eliminate as much misunderstanding as possible from poor design.</p>\n<h4 id="overall-design" tabindex="-1">Overall Design</h4>\n<p>We have found that a large percentage of developers use the default theme style for ECharts, so it is important to have an elegant default theme design. In Apache ECharts 5, we redesigned the default theme style, optimizing it for different charts and components. For example, we took into account factors such as differentiation between colors, contrast with background colors, and harmony with adjacent colors, and ensured that people with color blindness could clearly distinguish data.</p>\n<img data-src="images/feature-v5/theme-color.png" width="400px" />\n<p>Let\'s look at the new version of the light and dark theme styles using the most commonly used bar chart as an example.</p>\n<img data-src="images/feature-v5/new-theme-light.png" width="500px" />\n<img data-src="images/feature-v5/new-theme-dark.png" width="500px" />\n<p>For the data area zoom, timeline and other interactive components, we also designed a new style and provide a better interactive experience:</p>\n<img data-src="images/feature-v5/dataZoom.png" width="500px" />\n<img data-src="images/feature-v5/timeline.png" width="500px" />\n<h4 id="label" tabindex="-1">Label</h4>\n<p>Labels are one of the core elements of a chart, and clear and unambiguous labels help users to have a more accurate understanding of the data. Apache ECharts 5 provides a variety of new labeling features that allow dense labels to be clearly displayed and accurately represented.</p>\n<p>Apache ECharts 5 can be enabled to automatically hide overlapping labels through a configuration item. For labels that exceed the display area, you can choose to automatically truncate or line break them. Dense pie chart labels now have a more aesthetically pleasing automatic layout.</p>\n<p>These features can help avoid text that is too dense and affects readability. And, no additional code needs to be written by the developer for them to take effect by default, greatly simplifying the development cost for developers.</p>\n<p>We also provide several configuration options to allow developers to actively control the layout strategy of tabs, such as tab dragging, overall display at the edge of the canvas, connecting with guide lines and graphical elements, and still linking to highlight the associated relationships.</p>\n<p>The new label feature allows you to have very clear label presentation even in a confined space mobile:</p>\n<img data-src="images/feature-v5/pie-label.png" width="400px" />\n<h4 id="time-axis" tabindex="-1">Time Axis</h4>\n<p>Apache ECharts 5 brings a time axis suitable for expressing timestamp scales. The default design of the time axis highlights important information more prominently and provides more flexible customization capabilities, allowing developers to tailor the time axis\'s label content to different needs.</p>\n<p>First of all, the time axis is no longer split absolutely evenly as before, but instead selects more meaningful points like year, month, day, and whole point to display, and can show different levels of scales at the same time. The <code>formatter</code> of labels supports templates for time (e.g. <code>{yyyy}-{MM}-{dd}</code>), and different <code>formatter</code> can be specified for labels with different time granularity, which can be combined with rich text labels to create eye-catching and diverse time effects.</p>\n<p>The display of the time scale at different dataZoom granularities.</p>\n<img data-src="images/feature-v5/time-axis.png" width="600px" />\n<img data-src="images/feature-v5/time-axis-2.png" width="600px" />\n<h4 id="tooltip" tabindex="-1">Tooltip</h4>\n<p>Tooltip is one of the most commonly used visualization components to help users interactively understand the details of data. In Apache ECharts 5, we have optimized the style of the tooltip, making the default display of the tooltip elegant and clear by adjusting the font style, color, arrow pointing to the graph, border color following the graph color, and other features. The rendering logic of rich text has been improved to ensure that the display is consistent with the HTML way, allowing users to choose different technical solutions to achieve the same effect in different scenarios.</p>\n<img data-src="images/feature-v5/new-tooltip.png" width="400px" />\n<img data-src="images/feature-v5/new-tooltip-2.png" width="400px" />\n<p>In addition to this, we have also added the ability to sort the list in the tip box by value size or category order this time.</p>\n<h4 id="gauge" tabindex="-1">Gauge</h4>\n<p>We have seen a lot of cool gauge charts created by community users, but the way they are configured is often complex and tricky. Therefore, we have upgraded the gauge to support image or vector path drawing pointers, anchor configurations, progress bars, rounded corner effects, and more.</p>\n<p>Different styles of gauge pointers.</p>\n<img data-src="images/feature-v5/gauge-pointer.png" width="600px" />\n<p>These upgrades not only allow developers to achieve cool effects with simpler configuration items, but also bring richer customization capabilities.</p>\n<md-example src="gauge-clock" width="600" height="600" />\n<h4 id="round-corner" tabindex="-1">Round Corner</h4>\n<p>Apache ECharts 5 supports round corner for pie charts, sunburst charts, and treemap charts. Don\'t underestimate the simplicity of the rounded corners configuration, but combine them with other effects to create a more personalized visualization.</p>\n<md-example src="sunburst-borderRadius" width="400" height="400" />\n<h2 id="interactivity" tabindex="-1">Interactivity</h2>\n<p>The interactivity of the visualization helps users explore the work and deepen their understanding of the main idea of the diagram.</p>\n<h4 id="multi-state" tabindex="-1">Multi-State</h4>\n<p>In ECharts 4, there were two interactive states, <code>emphasis</code> and <code>normal</code>, graph will enter the <code>emphasis</code> state when the mouse hovered to distinguish the data.</p>\n<p>This time in Apache ECharts 5, we have added a new effect of <strong>blur</strong> other non-related elements to the original mouse hover highlighting, so that the target data can be focused.</p>\n<p>For example, in this <a href="https://echarts.apache.org/examples/en/editor.html?c=bar-y-category-stack">bar chart</a> example, when the mouse hovers over a series, other non-related series will fade out, thus highlighting more clearly the comparison of data in the focused series. of data in the comparison. On diagrams with more complex data structures such as relationship, tree, sunburst, sankey, etc., it is also possible to see the connections between data by fading out non-related elements. Also, colors, shadows, and other styles that can be set in <code>emphasis</code> can now be set in <code>blur</code>.</p>\n<p>In addition, we\'ve added <strong>click to select</strong> to all series, an interaction that was previously only available in a few series such as pie charts and maps, allowing developers to set it to single or multiple selection mode, and to listen to the <code>selectchanged</code> event to get all the selected shapes for further processing. As with <code>emphasis</code> and <code>blur</code>, the selection style can also be configured in <code>select</code>.</p>\n<h4 id="performance-improvements" tabindex="-1">Performance improvements</h4>\n<h5 id="dirty-rectangle-rendering" tabindex="-1">Dirty Rectangle Rendering</h5>\n<p>Apache ECharts 5 has new support for dirty rectangle rendering to address performance bottlenecks in large scenes with only local changes. When using the Canvas renderer, the dirty rectangle rendering technique detects and updates only the parts of the view that have changed, rather than any changes causing a complete redraw of the canvas. This can help improve rendering frame rates in some special scenarios, such as scenes where the mouse frequently triggers some graphical highlighting many times. In the past for such scenes, additional Canvas layers were used to optimize performance, but this approach is not universal for all scenes and does not work well for complex styles. Dirty Rectangle rendering does a good job of satisfying both performance and display correctness.</p>\n<p>A visual demonstration of a dirty rectangle, with the red boxed area redrawn for the frame.</p>\n<img data-src="images/feature-v5/dirty-rect.gif" width="500px" />\n<p>You can see the effect by enable dirty rectangle optimization on the new example page.</p>\n<h5 id="line-chart-performance-optimization-for-real-time-time-series-data" tabindex="-1">Line Chart Performance Optimization for Real-Time Time-Series Data</h5>\n<p>In addition, the performance of line graphs with large amounts of data has also seen a significant performance improvement. We often encounter the need for high-performance plotting of large amounts of real-time time-series data, which will be updated every hundreds or tens of milliseconds.</p>\n<p>Apache ECharts 5 deeply optimizes CPU consumption, memory usage, and initialization time in these scenarios, enabling real-time updates (less than 30ms per update) for millions of data, and even rendering within 1s for ten millions of data, with low memory usage and smooth tooltip interactions.</p>\n<h2 id="development-experience" tabindex="-1">Development Experience</h2>\n<p>We want such a powerful visualization tool to be used by more developers in a simpler way, so the developer experience is also a very important aspect for us.</p>\n<h4 id="datasets" tabindex="-1">Datasets</h4>\n<p>ECharts 5 enhances the data transformation capabilities of datasets, allowing developers to implement common data processing such as filtering, sorting, aggregating, histogram, simple clustering, regression, etc. in a simple way. Developers can use these functions in a uniform and declarative way, and can easily implement common data operations.</p>\n<h4 id="internationalization" tabindex="-1">Internationalization</h4>\n<p>The original internationalization implementation of ECharts takes the form of different distribution files packaged according to different language parameters. In this way, the dynamic language and main code are bound together, and the only way to switch languages when using ECharts is to reload different language versions of ECharts distributions.</p>\n<p>Therefore, starting with Apache ECharts 5, the dynamic language is separated from the main code. To switch languages, you only need to load the corresponding language, use the <code>registerLocale</code> function to mount the language object in a similar way to mount the theme, and then reinitialize it to complete the language switch.</p>\n<md-code-block lang="js" code="\'Ly8gaW1wb3J0IHRoZSBsYW5nIG9iamVjdCBhbmQgc2V0IHdoZW4gaW5pdAplY2hhcnRzLnJlZ2lzdGVyTG9jYWxlKCdERScsIGxhbmcpOwplY2hhcnRzLmluaXQoRG9tRWxlbWVudCwgbnVsbCwgewogIGxvY2FsZTogJ0RFJwp9KTs\'" line-highlights="\'\'" />\n<h4 id="typescript-refactoring" tabindex="-1">TypeScript Refactoring</h4>\n<p>In order to continue to refactor and develop new features more safely and efficiently, we started the development of Apache ECharts 5 by rewriting the code using TypeScript. The strong typing brought by TypeScript gave us the confidence to refactor the code drastically to achieve more exciting features during the development of ECharts 5.</p>\n<p>For developers, we can also generate better and more code-compliant <code>DTS</code> type description files directly from TypeScript code. Until now, ECharts type description files have been maintained by community developers and published to <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/echarts">DefinitelyTyped</a>, which is a lot of work, so thanks for your contribution.</p>\n<p>In addition, if a developer\'s component is introduced on-demand, we provide a <code>ComposeOption</code> type method that can combine a configuration item type that contains only the introduced components, which can bring stricter type checking and help you detect unintroduced component types in advance.</p>\n<h2 id="accessibility" tabindex="-1">Accessibility</h2>\n<p>Apache ECharts has always taken accessibility design seriously, and we want to make the information conveyed by charts equally to be accessed. We also want to make this possible for chart developers at a very low development cost, thus making developers more willing to support the accessibility.</p>\n<p>In the last major release, we supported automatic intelligent generation of chart descriptions based on different chart types and data, making it very easy for developers to support DOM description information for charts. In ECharts 5, we have also made more accessibility improvements to help people with visual impairments better understand the chart content.</p>\n<h4 id="theme-colors" tabindex="-1">Theme Colors</h4>\n<p>We took accessibility into account when designing the new default theme, and we repeatedly tested the brightness and color values of the colors to help accessibility users clearly identify the chart data.</p>\n<p>Moreover, for developers with further accessibility needs, we also provide special high-contrast themes to further differentiate the data with higher contrast colors.</p>\n<h4 id="decal-patterns" tabindex="-1">Decal Patterns</h4>\n<p>ECharts 5 also provides a new feature of decals to help users further differentiate data by using patterns to assist with color representation.</p>\n<md-example src="doc-example/aria-decal-simple" width="600" height="350" />\n<p>In addition, decal patterns can also help in some other scenarios, such as: helping to better distinguish data in printed materials like newspapers and books that have only a single color or very few colors; using graphical elements to facilitate a more intuitive understanding of the data by the user.</p>\n<md-example src="doc-example/aria-decal-newspaper" width="600" height="350" />\n<h2 id="summary" tabindex="-1">Summary</h2>\n<p>In addition to the features described above, Apache ECharts has been improved in a very large number of details to help developers more easily create charts that good by default, are flexible in configuration, and tell the story behind the data with charts.</p>\n<p>Thank you to all the developers who have used ECharts, and even participated in community contributions, for making Apache ECharts 5 possible. We\'ll be working on future developments with even more enthusiasm, and we\'ll see you all in 6 with even more enthusiasm!</p>\n',postPath:"en/basics/release-note/v5-feature",title:"ECharts 5 Features - 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:n,children:[{title:"获取 ECharts",dir:r},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:s,draft:e},{title:"寻求帮助",dir:d},{title:"版本特性",dir:l,children:[{title:"ECharts 5 特性介绍",dir:h},{title:"v4 升级 v5 指南",dir:c},{title:5.2,dir:p},{title:5.3,dir:m},{title:5.4,dir:g}]}]},{title:"概念篇",dir:f,children:[{title:"图表容器及大小",dir:u},{title:"配置项",dir:y,draft:e},{title:"系列",dir:b,draft:e},{title:"样式",dir:v},{title:"数据集",dir:w},{title:"数据转换",dir:x},{title:"坐标系",dir:C,draft:e},{title:"坐标轴",dir:k},{title:"视觉映射",dir:i},{title:"图例",dir:E},{title:"事件与行为",dir:T}]},{title:"应用篇",dir:z,children:[{title:"常用图表类型",dir:A,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:I},{title:"堆叠柱状图",dir:S},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:R,draft:e},{title:"阶梯瀑布图",dir:P},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:W,children:[{title:"基础折线图",dir:L},{title:"堆叠折线图",dir:B},{title:"区域面积图",dir:G},{title:"平滑曲线图",dir:F},{title:"阶梯线图",dir:M}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:V},{title:"圆环图",dir:j},{title:"南丁格尔图（玫瑰图）",dir:O}]},{title:"散点图",dir:q,children:[{title:"基础散点图",dir:H}]}]},{title:Y,dir:t,draft:e},{title:"跨平台方案",dir:Z,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:_},{title:"数据下钻",dir:J,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:N}]},{title:"动画",dir:U,children:[{title:"数据过渡动画",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:X,draft:e},{title:"智能指针吸附",dir:$}]}]},{title:"最佳实践",dir:ee,children:[{title:Y,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:n,children:[{title:"Download ECharts",dir:r},{title:"Import ECharts",dir:o},{title:"Resources",dir:s,draft:e},{title:"Get Help",dir:d},{title:"What's New",dir:l,children:[{title:"ECharts 5 Features",dir:h},{title:"Migration from v4 to v5",dir:c},{title:5.2,dir:p},{title:5.3,dir:m},{title:5.4,dir:g}]}]},{title:"Concepts",dir:f,children:[{title:"Chart Container",dir:u},{title:"Chart Option",dir:y,draft:e},{title:"Series",dir:b,draft:e},{title:"Style",dir:v},{title:"Dataset",dir:w},{title:"Data Transform",dir:x},{title:"Coordinate",dir:C,draft:e},{title:"Axis",dir:k},{title:"Visual Mapping",dir:i},{title:"Legend",dir:E},{title:"Event and Action",dir:T}]},{title:"How To Guides",dir:z,children:[{title:"Common Charts",dir:A,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:I},{title:"Stacked Bar",dir:S},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:R,draft:e},{title:"Waterfall",dir:P}]},{title:"Line",dir:W,children:[{title:"Basic Line",dir:L},{title:"Stacked Line",dir:B},{title:"Area Chart",dir:G},{title:"Smoothed Line",dir:F},{title:"Step Line",dir:M}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:V},{title:"Ring Style",dir:j},{title:"Rose Style",dir:O}]},{title:"Scatter",dir:q,children:[{title:"Basic Scatter",dir:H}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:Z,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:_},{title:"Drilldown",dir:J,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:N}]},{title:"Animation",dir:U,children:[{title:"Data Transition",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:X,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/v5-feature",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> |
