<!doctype html>
<html data-n-head-ssr>
  <head>
    <link rel="stylesheet" type="text/css" href="https://fastly.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://fastly.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
    <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
    <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content=""><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://fastly.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/b561b82.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/f74f8c0f406ea2522d04.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8b5c6d8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e96421e0f27cc5a35348.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/35be9a3.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/d6226697ecb43e03cd0d.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/5da5a8e.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/2ce97fcdefb3b7b018fe.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/a9c5fa4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/4f3ab71f990e271ccbe4.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/8b5c6d8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/35be9a3.css"><link rel="stylesheet" href="/handbook/_nuxt/css/5da5a8e.css"><link rel="stylesheet" href="/handbook/_nuxt/css/a9c5fa4.css">
  </head>
  <body>
    <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">Migration from v4 to v5</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-3-0" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">5.3</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><!----></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="apache-echarts-5.3.0-features" tabindex="-1">Apache ECharts 5.3.0 Features</h1> <p>Apache ECharts 5.3.0 includes significant enhancements to animation expressiveness, rendering performance, and server-side rendering. It also adds long-awaited features from the community, such as automatic alignment of multi-axis ticks, tooltip value formatting, and map projection.</p> <h2 id="keyframe-animations" tabindex="-1">Keyframe Animations</h2> <p>Previously, ECharts animations were focused on transition animations for creating, updating, and removing elements, which often only had a start state and an end state. In order to express more complex animations, we introduced new keyframe animations for custom series and graphics components in 5.3.0.</p> <p>Here is a simple effect of a breathing animation implemented via keyframe animation</p> <div class="md-live layout-lr"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
  graphic: {
    type: 'circle',
    shape: { r: 100 },
    left: 'center',
    top: 'center',
    keyframeAnimation: [
      {
        duration: 3000,
        loop: true,
        keyframes: [
          {
            percent: 0.5,
            easing: 'sinusoidalInOut',
            scaleX: 0.1,
            scaleY: 0.1
          },
          {
            percent: 1,
            easing: 'sinusoidalInOut',
            scaleX: 1,
            scaleY: 1
          }
        ]
      }
    ]
  }
};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
  graphic<span class="token operator">:</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> <span class="token string">'circle'</span><span class="token punctuation">,</span>
    shape<span class="token operator">:</span> <span class="token punctuation">{</span> r<span class="token operator">:</span> <span class="token number">100</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    left<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
    top<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
    keyframeAnimation<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        duration<span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span>
        loop<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        keyframes<span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            percent<span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span>
            easing<span class="token operator">:</span> <span class="token string">'sinusoidalInOut'</span><span class="token punctuation">,</span>
            scaleX<span class="token operator">:</span> <span class="token number">0.1</span><span class="token punctuation">,</span>
            scaleY<span class="token operator">:</span> <span class="token number">0.1</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            percent<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
            easing<span class="token operator">:</span> <span class="token string">'sinusoidalInOut'</span><span class="token punctuation">,</span>
            scaleX<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
            scaleY<span class="token operator">:</span> <span class="token number">1</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>In keyframe animation you can configure the animation duration, delay, easing, whether to loop or not, the position, easing, and graphic properties of each keyframe. You can also set multiple keyframe animations for each element at the same time with different configurations. The flexible configuration allows us to achieve very complex animation effects, and here are a few scenarios where keyframe animation can be applied.</p> <h3 id="custom-loading-animations" tabindex="-1">Custom Loading Animations</h3> <p>ECharts has a built-in loading animation by default, which can be displayed by calling <code>showLoading</code>. More loading animation effects have been frequently asked in the community. Now with keyframe animations, we can use the <a href="https://echarts.apache.org/option.html#graphic">graphic</a> component with keyframe animations to achieve any loading animation effect we want.</p> <p>Here is an example of the text stroke animation.</p> <div class="md-live layout-lr"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
  graphic: {
    elements: [
      {
        type: 'text',
        left: 'center',
        top: 'center',
        style: {
          text: 'Apache ECharts',
          fontSize: 40,
          fontWeight: 'bold',
          lineDash: [0, 200],
          lineDashOffset: 0,
          fill: 'transparent',
          stroke: '#000',
          lineWidth: 1
        },
        keyframeAnimation: {
          duration: 3000,
          loop: true,
          keyframes: [
            {
              percent: 0.7,
              style: {
                fill: 'transparent',
                lineDashOffset: 200,
                lineDash: [200, 0]
              }
            },
            {
              // Stop for a while.
              percent: 0.8,
              style: {
                fill: 'transparent'
              }
            },
            {
              percent: 1,
              style: {
                fill: 'black'
              }
            }
          ]
        }
      }
    ]
  }
};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
  graphic<span class="token operator">:</span> <span class="token punctuation">{</span>
    elements<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'text'</span><span class="token punctuation">,</span>
        left<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
        top<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
        style<span class="token operator">:</span> <span class="token punctuation">{</span>
          text<span class="token operator">:</span> <span class="token string">'Apache ECharts'</span><span class="token punctuation">,</span>
          fontSize<span class="token operator">:</span> <span class="token number">40</span><span class="token punctuation">,</span>
          fontWeight<span class="token operator">:</span> <span class="token string">'bold'</span><span class="token punctuation">,</span>
          lineDash<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          lineDashOffset<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
          fill<span class="token operator">:</span> <span class="token string">'transparent'</span><span class="token punctuation">,</span>
          stroke<span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span>
          lineWidth<span class="token operator">:</span> <span class="token number">1</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        keyframeAnimation<span class="token operator">:</span> <span class="token punctuation">{</span>
          duration<span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span>
          loop<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
          keyframes<span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
              percent<span class="token operator">:</span> <span class="token number">0.7</span><span class="token punctuation">,</span>
              style<span class="token operator">:</span> <span class="token punctuation">{</span>
                fill<span class="token operator">:</span> <span class="token string">'transparent'</span><span class="token punctuation">,</span>
                lineDashOffset<span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
                lineDash<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span>
              <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
              <span class="token comment">// Stop for a while.</span>
              percent<span class="token operator">:</span> <span class="token number">0.8</span><span class="token punctuation">,</span>
              style<span class="token operator">:</span> <span class="token punctuation">{</span>
                fill<span class="token operator">:</span> <span class="token string">'transparent'</span>
              <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
              percent<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
              style<span class="token operator">:</span> <span class="token punctuation">{</span>
                fill<span class="token operator">:</span> <span class="token string">'black'</span>
              <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>Or animate columns.</p> <div class="md-live layout-lr"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">const columns = [];
for (let i = 0; i &lt; 7; i++) {
  columns.push({
    type: 'rect',
    x: i * 20,
    shape: {
      x: 0,
      y: -40,
      width: 10,
      height: 80
    },
    style: {
      fill: '#5470c6'
    },
    keyframeAnimation: {
      duration: 1000,
      delay: i * 200,
      loop: true,
      keyframes: [
        {
          percent: 0.5,
          scaleY: 0.1,
          easing: 'cubicIn'
        },
        {
          percent: 1,
          scaleY: 1,
          easing: 'cubicOut'
        }
      ]
    }
  });
}
option = {
  graphic: {
    elements: [
      {
        type: 'group',
        left: 'center',
        top: 'center',
        children: columns
      }
    ]
  }
};</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">7</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  columns<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    type<span class="token operator">:</span> <span class="token string">'rect'</span><span class="token punctuation">,</span>
    x<span class="token operator">:</span> i <span class="token operator">*</span> <span class="token number">20</span><span class="token punctuation">,</span>
    shape<span class="token operator">:</span> <span class="token punctuation">{</span>
      x<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
      y<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">40</span><span class="token punctuation">,</span>
      width<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
      height<span class="token operator">:</span> <span class="token number">80</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    style<span class="token operator">:</span> <span class="token punctuation">{</span>
      fill<span class="token operator">:</span> <span class="token string">'#5470c6'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    keyframeAnimation<span class="token operator">:</span> <span class="token punctuation">{</span>
      duration<span class="token operator">:</span> <span class="token number">1000</span><span class="token punctuation">,</span>
      delay<span class="token operator">:</span> i <span class="token operator">*</span> <span class="token number">200</span><span class="token punctuation">,</span>
      loop<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      keyframes<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
          percent<span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span>
          scaleY<span class="token operator">:</span> <span class="token number">0.1</span><span class="token punctuation">,</span>
          easing<span class="token operator">:</span> <span class="token string">'cubicIn'</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          percent<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
          scaleY<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
          easing<span class="token operator">:</span> <span class="token string">'cubicOut'</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
option <span class="token operator">=</span> <span class="token punctuation">{</span>
  graphic<span class="token operator">:</span> <span class="token punctuation">{</span>
    elements<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'group'</span><span class="token punctuation">,</span>
        left<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
        top<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
        children<span class="token operator">:</span> columns
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h3 id="extending-richer-animation-effects-in-the-chart" tabindex="-1">Extending Richer Animation Effects in the Chart</h3> <p>Scatter charts with animation effects have long been a feature of ECharts. Developers can use the <a href="https://echarts.apache.org/option.html#series-effectScatter">effectScatter</a> series to implement dynamic scatter charts with ripple effects, which make charts more interesting and also serve to highlight the user. As with loading animations, developers often ask for more animation effects. Now we can achieve more complex effects by using keyframe animations in our <a href="https://echarts.apache.org/option.html#series-custom">custom</a> series.</p> <p>For example, the following example animates the pins drawn by the custom series on the SVG map with a jumping effect, along with a ripple animation.</p> <div class="md-live layout-lr"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" readonly class="prism-editor__textarea">fetch(
  'https://fastly.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/geo/Map_of_Iceland.svg'
)
  .then(response => response.text())
  .then(svg => {
    echarts.registerMap('iceland_svg', { svg: svg });
    option = {
      geo: {
        map: 'iceland_svg',
        left: 0,
        right: 0
      },
      series: {
        type: 'custom',
        coordinateSystem: 'geo',
        geoIndex: 0,
        zlevel: 1,
        data: [
          [488, 459, 100],
          [770, 757, 30],
          [1180, 743, 80],
          [894, 1188, 61],
          [1372, 477, 70],
          [1378, 935, 81]
        ],
        renderItem(params, api) {
          const coord = api.coord([
            api.value(0, params.dataIndex),
            api.value(1, params.dataIndex)
          ]);

          const circles = [];
          for (let i = 0; i &lt; 5; i++) {
            circles.push({
              type: 'circle',
              shape: {
                cx: 0,
                cy: 0,
                r: 30
              },
              style: {
                stroke: 'red',
                fill: 'none',
                lineWidth: 2
              },
              // Ripple animation
              keyframeAnimation: {
                duration: 4000,
                loop: true,
                delay: (-i / 4) * 4000,
                keyframes: [
                  {
                    percent: 0,
                    scaleX: 0,
                    scaleY: 0,
                    style: {
                      opacity: 1
                    }
                  },
                  {
                    percent: 1,
                    scaleX: 1,
                    scaleY: 0.4,
                    style: {
                      opacity: 0
                    }
                  }
                ]
              }
            });
          }
          return {
            type: 'group',
            x: coord[0],
            y: coord[1],
            children: [
              ...circles,
              {
                type: 'path',
                shape: {
                  d:
                    'M16 0c-5.523 0-10 4.477-10 10 0 10 10 22 10 22s10-12 10-22c0-5.523-4.477-10-10-10zM16 16c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6z',
                  x: -10,
                  y: -35,
                  width: 20,
                  height: 40
                },
                style: {
                  fill: 'red'
                },
                // Jump animation.
                keyframeAnimation: {
                  duration: 1000,
                  loop: true,
                  delay: Math.random() * 1000,
                  keyframes: [
                    {
                      y: -10,
                      percent: 0.5,
                      easing: 'cubicOut'
                    },
                    {
                      y: 0,
                      percent: 1,
                      easing: 'bounceOut'
                    }
                  ]
                }
              }
            ]
          };
        }
      }
    };

    myChart.setOption(option);
  });</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token function">fetch</span><span class="token punctuation">(</span>
  <span class="token string">'https://fastly.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/geo/Map_of_Iceland.svg'</span>
<span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=></span> response<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">svg</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
    echarts<span class="token punctuation">.</span><span class="token function">registerMap</span><span class="token punctuation">(</span><span class="token string">'iceland_svg'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> svg<span class="token operator">:</span> svg <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    option <span class="token operator">=</span> <span class="token punctuation">{</span>
      geo<span class="token operator">:</span> <span class="token punctuation">{</span>
        map<span class="token operator">:</span> <span class="token string">'iceland_svg'</span><span class="token punctuation">,</span>
        left<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
        right<span class="token operator">:</span> <span class="token number">0</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      series<span class="token operator">:</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'custom'</span><span class="token punctuation">,</span>
        coordinateSystem<span class="token operator">:</span> <span class="token string">'geo'</span><span class="token punctuation">,</span>
        geoIndex<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
        zlevel<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
        data<span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">[</span><span class="token number">488</span><span class="token punctuation">,</span> <span class="token number">459</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">[</span><span class="token number">770</span><span class="token punctuation">,</span> <span class="token number">757</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">[</span><span class="token number">1180</span><span class="token punctuation">,</span> <span class="token number">743</span><span class="token punctuation">,</span> <span class="token number">80</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">[</span><span class="token number">894</span><span class="token punctuation">,</span> <span class="token number">1188</span><span class="token punctuation">,</span> <span class="token number">61</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">[</span><span class="token number">1372</span><span class="token punctuation">,</span> <span class="token number">477</span><span class="token punctuation">,</span> <span class="token number">70</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">[</span><span class="token number">1378</span><span class="token punctuation">,</span> <span class="token number">935</span><span class="token punctuation">,</span> <span class="token number">81</span><span class="token punctuation">]</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token function">renderItem</span><span class="token punctuation">(</span><span class="token parameter">params<span class="token punctuation">,</span> api</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">const</span> coord <span class="token operator">=</span> api<span class="token punctuation">.</span><span class="token function">coord</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
            api<span class="token punctuation">.</span><span class="token function">value</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> params<span class="token punctuation">.</span>dataIndex<span class="token punctuation">)</span><span class="token punctuation">,</span>
            api<span class="token punctuation">.</span><span class="token function">value</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> params<span class="token punctuation">.</span>dataIndex<span class="token punctuation">)</span>
          <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

          <span class="token keyword">const</span> circles <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
          <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">5</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            circles<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
              type<span class="token operator">:</span> <span class="token string">'circle'</span><span class="token punctuation">,</span>
              shape<span class="token operator">:</span> <span class="token punctuation">{</span>
                cx<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
                cy<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
                r<span class="token operator">:</span> <span class="token number">30</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
              style<span class="token operator">:</span> <span class="token punctuation">{</span>
                stroke<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span>
                fill<span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span>
                lineWidth<span class="token operator">:</span> <span class="token number">2</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
              <span class="token comment">// Ripple animation</span>
              keyframeAnimation<span class="token operator">:</span> <span class="token punctuation">{</span>
                duration<span class="token operator">:</span> <span class="token number">4000</span><span class="token punctuation">,</span>
                loop<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                delay<span class="token operator">:</span> <span class="token punctuation">(</span><span class="token operator">-</span>i <span class="token operator">/</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">4000</span><span class="token punctuation">,</span>
                keyframes<span class="token operator">:</span> <span class="token punctuation">[</span>
                  <span class="token punctuation">{</span>
                    percent<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
                    scaleX<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
                    scaleY<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
                    style<span class="token operator">:</span> <span class="token punctuation">{</span>
                      opacity<span class="token operator">:</span> <span class="token number">1</span>
                    <span class="token punctuation">}</span>
                  <span class="token punctuation">}</span><span class="token punctuation">,</span>
                  <span class="token punctuation">{</span>
                    percent<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
                    scaleX<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
                    scaleY<span class="token operator">:</span> <span class="token number">0.4</span><span class="token punctuation">,</span>
                    style<span class="token operator">:</span> <span class="token punctuation">{</span>
                      opacity<span class="token operator">:</span> <span class="token number">0</span>
                    <span class="token punctuation">}</span>
                  <span class="token punctuation">}</span>
                <span class="token punctuation">]</span>
              <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span>
          <span class="token keyword">return</span> <span class="token punctuation">{</span>
            type<span class="token operator">:</span> <span class="token string">'group'</span><span class="token punctuation">,</span>
            x<span class="token operator">:</span> coord<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
            y<span class="token operator">:</span> coord<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
            children<span class="token operator">:</span> <span class="token punctuation">[</span>
              <span class="token operator">...</span>circles<span class="token punctuation">,</span>
              <span class="token punctuation">{</span>
                type<span class="token operator">:</span> <span class="token string">'path'</span><span class="token punctuation">,</span>
                shape<span class="token operator">:</span> <span class="token punctuation">{</span>
                  d<span class="token operator">:</span>
                    <span class="token string">'M16 0c-5.523 0-10 4.477-10 10 0 10 10 22 10 22s10-12 10-22c0-5.523-4.477-10-10-10zM16 16c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6z'</span><span class="token punctuation">,</span>
                  x<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">10</span><span class="token punctuation">,</span>
                  y<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">35</span><span class="token punctuation">,</span>
                  width<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
                  height<span class="token operator">:</span> <span class="token number">40</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                style<span class="token operator">:</span> <span class="token punctuation">{</span>
                  fill<span class="token operator">:</span> <span class="token string">'red'</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token comment">// Jump animation.</span>
                keyframeAnimation<span class="token operator">:</span> <span class="token punctuation">{</span>
                  duration<span class="token operator">:</span> <span class="token number">1000</span><span class="token punctuation">,</span>
                  loop<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                  delay<span class="token operator">:</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">1000</span><span class="token punctuation">,</span>
                  keyframes<span class="token operator">:</span> <span class="token punctuation">[</span>
                    <span class="token punctuation">{</span>
                      y<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">10</span><span class="token punctuation">,</span>
                      percent<span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span>
                      easing<span class="token operator">:</span> <span class="token string">'cubicOut'</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>
                      y<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
                      percent<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
                      easing<span class="token operator">:</span> <span class="token string">'bounceOut'</span>
                    <span class="token punctuation">}</span>
                  <span class="token punctuation">]</span>
                <span class="token punctuation">}</span>
              <span class="token punctuation">}</span>
            <span class="token punctuation">]</span>
          <span class="token punctuation">}</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h3 id="loading-lottie-animations" tabindex="-1">Loading Lottie animations</h3> <p>In order to fully exploit the power of new keyframe animations, Yi Shen from the ECharts team wrote a <a href="https://github.com/pissang/lottie-parser">Lottie animation parsing library</a> that can parse Lottie animation files into the ECharts graphics format for rendering. Combined with Lottie's expressive power we can introduce more amazing animations to our projects:</p> <iframe src="https://codesandbox.io/embed/eager-ives-yiqn7?fontsize=14&hidenavigation=1&theme=dark&codemirror=1" title="eager-ives-yiqn7" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr- spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" style="width:100%;height:500px;border:0;border-radius:4px;overflow:hidden"></iframe> <h2 id="graphical-component-transition-animations" tabindex="-1">Graphical component transition animations</h2> <p>We have provided more flexible transition animation configurations for elements returned in the custom series in 5.0. The <code>transition</code>, <code>enterFrom</code>, and <code>leaveTo</code> configuration items allow you to configure which properties of each element will have transition animations and how they will be animated when the graphic is created and removed. Here is an example.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">function</span> <span class="token function">renderItem</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">//...</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    <span class="token comment">//...</span>
    x<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
    <span class="token comment">// 'style', 'x', 'y' will be animated</span>
    transition<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'style'</span><span class="token punctuation">,</span> <span class="token string">'x'</span><span class="token punctuation">,</span> <span class="token string">'y'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    enterFrom<span class="token operator">:</span> <span class="token punctuation">{</span>
      style<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// Fade in</span>
        opacity<span class="token operator">:</span> <span class="token number">0</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token comment">// Fly in from the left</span>
      x<span class="token operator">:</span> <span class="token number">0</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    leaveTo<span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token comment">// Fade out</span>
      opacity<span class="token operator">:</span> <span class="token number">0</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// Fly out to the right</span>
    x<span class="token operator">:</span> <span class="token number">200</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>In 5.3.0 we extended the configuration of these transition animations to the graphic component, with made additional enhancements.</p> <p>If you don't want to write out each property to be animated, you can now directly configure <code>transition: 'all'</code> to animate all properties.</p> <p>We also added <code>enterAnimation</code>, <code>updateAnimation</code>, and <code>leaveAnimation</code> to configure the <code>duration</code>, <code>delay</code>, and <code>easing</code> of the entry, update, and exit animations for each graphic, respectively. Gradient colors now also support animations.</p> <h2 id="new-svg-renderer" tabindex="-1">New SVG renderer</h2> <p>In 5.3.0 we refactored our SVG renderer, which delivers 2x ~ 10x performance improvements, and even tens of times in some special scenes.</p> <p>Previously, we updated the SVG renderer directly from the render queue to the DOM, but since zrender's graphics properties were not one-to-one with the DOM, we had to implement very complex diff logic in the middle, which was error-prone and did not provide the best performance in some scenarios. In this version, we reconstruct the full rendering to VDOM first, and then patch the VDOM to DOM to finish the rendering. Full rendering avoids potential bugs caused by complex diff logic, and the one-to-one correspondence between VDOM and DOM ensures that updates are minimal when patching, resulting in a huge performance boost.</p> <p><a href="https://echarts.apache.org/examples/zh/editor.html?c=geo-svg-scatter-simple&renderer=svg">This example</a> gives you an intuitive impression of the performance improvement. The new version is much smoother than the previous version when dragging the chart in SVG mode.</p> <table><thead><tr><th style="text-align:center">5.2.2 (Before)</th> <th style="text-align:center">5.3.0 (After)</th></tr></thead> <tbody><tr><td style="text-align:center"><img src alt="before" data-src="images/5-3-0/svg-before.gif"></td> <td style="text-align:center"><img src alt="after" data-src="images/5-3-0/svg-after.gif"></td></tr></tbody></table> <p>In addition to the performance improvement, we can do more things with the rendered VDOM, such as server-side rendering, which will be described below.</p> <h2 id="server-side-rendering-with-zero-dependencies" tabindex="-1">Server-side Rendering with Zero Dependencies</h2> <p>In previous versions, ECharts could also implement server-side rendering, but it had to rely on <a href="https://github.com/Automattic/node-canvas">node-canvas</a>, or <a href="https://github.com/jsdom/jsdom">JSDOM</a> if you were using SVG mode to simulate the DOM environment. These dependencies not only bring additional size and usage requirements, but also affect performance.</p> <p>This new SVG renderer allows us to get the string from the intermediate rendered VDOM, bringing completely zero-dependency server-side rendering and outputting a more refined SVG string integrated CSS animation.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token keyword">const</span> echarts <span class="token operator">=</span> <span class="token keyword">require</span><span class="token punctuation">(</span><span class="token string">'echarts'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// In SSR mode the first parameter does not need to be passed in as a DOM object</span>
<span class="token keyword">const</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  renderer<span class="token operator">:</span> <span class="token string">'svg'</span><span class="token punctuation">,</span> <span class="token comment">// must use SVG mode</span>
  ssr<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// enable SSR</span>
  width<span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span> <span class="token comment">// need to specify height and width</span>
  height<span class="token operator">:</span> <span class="token number">300</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// setOption as normal</span>
chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
    data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Mon'</span><span class="token punctuation">,</span> <span class="token string">'Tue'</span><span class="token punctuation">,</span> <span class="token string">'Wed'</span><span class="token punctuation">,</span> <span class="token string">'Thu'</span><span class="token punctuation">,</span> <span class="token string">'Fri'</span><span class="token punctuation">,</span> <span class="token string">'Sat'</span><span class="token punctuation">,</span> <span class="token string">'Sun'</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> <span class="token string">'value'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  series<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">120</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">150</span><span class="token punctuation">,</span> <span class="token number">80</span><span class="token punctuation">,</span> <span class="token number">70</span><span class="token punctuation">,</span> <span class="token number">110</span><span class="token punctuation">,</span> <span class="token number">130</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      type<span class="token operator">:</span> <span class="token string">'bar'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// Output string</span>
<span class="token keyword">const</span> svgStr <span class="token operator">=</span> chart<span class="token punctuation">.</span><span class="token function">renderToSVGString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>We build the simplest NodeJS server in CodeSandbox and then use the ECharts server to render the effect as follows</p> <iframe src="https://codesandbox.io/embed/heuristic-leftpad-oq23t?autoresize=1&codemirror=1&fontsize=12&hidenavigation=1&&theme= dark" title="heuristic-leftpad-oq23t" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr- spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" style="width:100%;height:400px;border:0;border-radius:4px;overflow:hidden"></iframe> <h2 id="customizing-map-projections" tabindex="-1">Customizing Map Projections</h2> <p>Maps have always been a very widely used component in ECharts. Typically a map component uses GeoJSON formatted data with latitude and longitude stored. ECharts then calculates the appropriate display area and maps the latitude and longitude linearly to that area. This is the simplest way to project a map. However, the simple linear projection does not work for complex map scenarios, such as using <a href="https://en.wikipedia.org/wiki/Albers_projection">Albers</a> projection to solve the distortion problem in linear projection, or having the Pacific in the middle of the world map, etc.</p> <p>So in 5.3.0 we introduced extending map projection. It tells ECharts how to project coordinates and how to calculate latitude and longitude from the projected coordinates via the <code>project</code> and <code>unproject</code> methods. The following is a simple example of using the Mercator projection.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code>series <span class="token operator">=</span> <span class="token punctuation">{</span>
  type<span class="token operator">:</span> <span class="token string">'map'</span><span class="token punctuation">,</span>
  projection<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">project</span><span class="token operator">:</span> point <span class="token operator">=></span> <span class="token punctuation">[</span>
      <span class="token punctuation">(</span>point<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">/</span> <span class="token number">180</span><span class="token punctuation">)</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span><span class="token punctuation">,</span>
      <span class="token operator">-</span>Math<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">tan</span><span class="token punctuation">(</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token constant">PI</span> <span class="token operator">/</span> <span class="token number">2</span> <span class="token operator">+</span> <span class="token punctuation">(</span>point<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">/</span> <span class="token number">180</span><span class="token punctuation">)</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token function-variable function">unproject</span><span class="token operator">:</span> point <span class="token operator">=></span> <span class="token punctuation">[</span>
      <span class="token punctuation">(</span>point<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">*</span> <span class="token number">180</span><span class="token punctuation">)</span> <span class="token operator">/</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span><span class="token punctuation">,</span>
      <span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token number">2</span> <span class="token operator">*</span> <span class="token number">180</span><span class="token punctuation">)</span> <span class="token operator">/</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span><span class="token punctuation">)</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token function">atan</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">exp</span><span class="token punctuation">(</span>point<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">90</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>In addition to implementing our own projection formula, we can also use projections implementations provided by third-party libraries such as <a href="https://github.com/d3/d3-geo">d3-geo</a>.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token keyword">const</span> projection <span class="token operator">=</span> d3<span class="token punctuation">.</span><span class="token function">geoConicEqualArea</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>
series <span class="token operator">=</span> <span class="token punctuation">{</span>
  type<span class="token operator">:</span> <span class="token string">'map'</span><span class="token punctuation">,</span>
  projection<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">project</span><span class="token operator">:</span> point <span class="token operator">=></span> <span class="token function">projection</span><span class="token punctuation">(</span>point<span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token function-variable function">unproject</span><span class="token operator">:</span> point <span class="token operator">=></span> projection<span class="token punctuation">.</span><span class="token function">invert</span><span class="token punctuation">(</span>point<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>In conjunction with the new global transition animation feature added in 5.2, we can animate the transition between different projection effects: !</p> <p><img src alt="map-projection-animation" data-src="images/5-3-0/map-projection.gif"></p> <p>In addition to the map projection, we have made the following two enhancements to the map in this release.</p> <ul><li>Provided <code>'LineString'</code> and <code>'MultiLineString'</code> support for GeoJSON data.</li> <li>Changed the calculation of the default label position from the center of the bounding box to the centroid of the largest area for more accurate results.</li></ul> <h2 id="ticks-alignment-of-multiple-axes" tabindex="-1">Ticks Alignment of Multiple Axes</h2> <p>Ticks alignment of multiple axes is a long-standing requirement in the community, and we can see many articles in the community on how to implement axis alignment in ECharts, which is usually troublesome and limited.</p> <p>In 5.3.0, we finally introduced the feature of aligning ticks on the <code>'value'</code> and <code>'log'</code> axes. You can configure <code>alignTicks: true</code> in the axis that needs to be aligned. The axis will then adjust its own ticks according to the first axis's ticks, enabling automatic alignment.</p> <div class="md-live layout-bt"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {},
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: 'Precipitation',
      alignTicks: true,
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    {
      type: 'value',
      name: 'Temperature',
      axisLabel: {
        formatter: '{value} °C'
      }
    }
  ],
  series: [
    {
      name: 'Evaporation',
      type: 'bar',
      // prettier-ignore
      data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
    },
    {
      name: 'Precipitation',
      type: 'bar',
      // prettier-ignore
      data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
    },
    {
      name: 'Temperature',
      type: 'line',
      yAxisIndex: 1,
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    }
  ]
};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
  tooltip<span class="token operator">:</span> <span class="token punctuation">{</span>
    trigger<span class="token operator">:</span> <span class="token string">'axis'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  legend<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  xAxis<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
      data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Mon'</span><span class="token punctuation">,</span> <span class="token string">'Tue'</span><span class="token punctuation">,</span> <span class="token string">'Wed'</span><span class="token punctuation">,</span> <span class="token string">'Thu'</span><span class="token punctuation">,</span> <span class="token string">'Fri'</span><span class="token punctuation">,</span> <span class="token string">'Sat'</span><span class="token punctuation">,</span> <span class="token string">'Sun'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      axisPointer<span class="token operator">:</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'shadow'</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  yAxis<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      type<span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">'Precipitation'</span><span class="token punctuation">,</span>
      alignTicks<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      axisLabel<span class="token operator">:</span> <span class="token punctuation">{</span>
        formatter<span class="token operator">:</span> <span class="token string">'{value} ml'</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      type<span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">'Temperature'</span><span class="token punctuation">,</span>
      axisLabel<span class="token operator">:</span> <span class="token punctuation">{</span>
        formatter<span class="token operator">:</span> <span class="token string">'{value} °C'</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  series<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      name<span class="token operator">:</span> <span class="token string">'Evaporation'</span><span class="token punctuation">,</span>
      type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
      <span class="token comment">// prettier-ignore</span>
      data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">2.0</span><span class="token punctuation">,</span> <span class="token number">4.9</span><span class="token punctuation">,</span> <span class="token number">7.0</span><span class="token punctuation">,</span> <span class="token number">23.2</span><span class="token punctuation">,</span> <span class="token number">25.6</span><span class="token punctuation">,</span> <span class="token number">76.7</span><span class="token punctuation">,</span> <span class="token number">135.6</span><span class="token punctuation">,</span> <span class="token number">162.2</span><span class="token punctuation">,</span> <span class="token number">32.6</span><span class="token punctuation">,</span> <span class="token number">20.0</span><span class="token punctuation">,</span> <span class="token number">6.4</span><span class="token punctuation">,</span> <span class="token number">3.3</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      name<span class="token operator">:</span> <span class="token string">'Precipitation'</span><span class="token punctuation">,</span>
      type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
      <span class="token comment">// prettier-ignore</span>
      data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">2.6</span><span class="token punctuation">,</span> <span class="token number">5.9</span><span class="token punctuation">,</span> <span class="token number">9.0</span><span class="token punctuation">,</span> <span class="token number">26.4</span><span class="token punctuation">,</span> <span class="token number">28.7</span><span class="token punctuation">,</span> <span class="token number">70.7</span><span class="token punctuation">,</span> <span class="token number">175.6</span><span class="token punctuation">,</span> <span class="token number">182.2</span><span class="token punctuation">,</span> <span class="token number">48.7</span><span class="token punctuation">,</span> <span class="token number">18.8</span><span class="token punctuation">,</span> <span class="token number">6.0</span><span class="token punctuation">,</span> <span class="token number">2.3</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      name<span class="token operator">:</span> <span class="token string">'Temperature'</span><span class="token punctuation">,</span>
      type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
      yAxisIndex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
      data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">2.0</span><span class="token punctuation">,</span> <span class="token number">2.2</span><span class="token punctuation">,</span> <span class="token number">3.3</span><span class="token punctuation">,</span> <span class="token number">4.5</span><span class="token punctuation">,</span> <span class="token number">6.3</span><span class="token punctuation">,</span> <span class="token number">10.2</span><span class="token punctuation">,</span> <span class="token number">20.3</span><span class="token punctuation">,</span> <span class="token number">23.4</span><span class="token punctuation">,</span> <span class="token number">23.0</span><span class="token punctuation">,</span> <span class="token number">16.5</span><span class="token punctuation">,</span> <span class="token number">12.0</span><span class="token punctuation">,</span> <span class="token number">6.2</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="disable-emphasis-and-select-state" tabindex="-1">Disable Emphasis and Select State</h2> <p>The <code>emphasis</code> state in ECharts provides feedback to the user when the mouse is over an element, but in a chart with a large number of elements, the highlighting animation can cause performance issues. In particular, highlighting triggered by <a href="https://echarts.apache.org/option.html#tooltip">tooltip</a> or <a href="https://echarts.apache.org/option.html#tooltip">legend</a> component linkage can highlight multiple elements at the same time.</p> <p>Therefore, in this release we have added <code>emphasis.disabled</code> configuration. If you don't need the highlighting feedback and you are concerned about the interactivity, you can disable the <code>emphasis</code> state with this option.</p> <p>For the <code>select</code> state, we have also added <code>select.disabled</code>. This option can be used to configure some of the data to be unselectable.</p> <h2 id="support-for-selecting-entire-series" tabindex="-1">Support for Selecting Entire Series</h2> <p>As of 5.3.0 we support configuring <code>selectedMode</code> to <code>'series'</code> to enable selection of all data in a series.</p> <h2 id="formatting-of-values-in-tooltip" tabindex="-1">Formatting of Values in Tooltip</h2> <p>Tooltips can be used to display more detailed information about the data item when the user hovers it. ECharts also provides a <code>formatter</code> callback function to give developers more flexibility to customize the content of the tooltip.</p> <p>However, we found that most of the time, developers only needed to format the value part of the tooltip, such as fixed precision, prefixed with <code>$</code>, etc. Previously, in order to format the number, developers had to rewrite the entire content of the tooltip with <code>formatter</code>. Especially after 5.0, ECharts hint boxes have become more complex and beautiful, so rewriting them becomes costly and difficult to achieve the default results.</p> <p>So in this version, we have added a <code>valueFormatter</code> configuration to the tooltip for formatting the value part.</p> <p>As in the axis alignment example, we can add the °C and ml suffixes to the value part of the tooltip.</p> <div class="md-live layout-bt"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {},
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: 'Precipitation',
      alignTicks: true,
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    {
      type: 'value',
      name: 'Temperature',
      axisLabel: {
        formatter: '{value} °C'
      }
    }
  ],
  series: [
    {
      name: 'Evaporation',
      type: 'bar',
      tooltip: {
        valueFormatter: value => value + ' ml'
      },
      // prettier-ignore
      data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
    },
    {
      name: 'Precipitation',
      type: 'bar',
      tooltip: {
        valueFormatter: value => value + ' ml'
      },
      // prettier-ignore
      data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
    },
    {
      name: 'Temperature',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: value => value + ' °C'
      },
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    }
  ]
};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
  tooltip<span class="token operator">:</span> <span class="token punctuation">{</span>
    trigger<span class="token operator">:</span> <span class="token string">'axis'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  legend<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  xAxis<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
      data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Mon'</span><span class="token punctuation">,</span> <span class="token string">'Tue'</span><span class="token punctuation">,</span> <span class="token string">'Wed'</span><span class="token punctuation">,</span> <span class="token string">'Thu'</span><span class="token punctuation">,</span> <span class="token string">'Fri'</span><span class="token punctuation">,</span> <span class="token string">'Sat'</span><span class="token punctuation">,</span> <span class="token string">'Sun'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      axisPointer<span class="token operator">:</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'shadow'</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  yAxis<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      type<span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">'Precipitation'</span><span class="token punctuation">,</span>
      alignTicks<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      axisLabel<span class="token operator">:</span> <span class="token punctuation">{</span>
        formatter<span class="token operator">:</span> <span class="token string">'{value} ml'</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      type<span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">'Temperature'</span><span class="token punctuation">,</span>
      axisLabel<span class="token operator">:</span> <span class="token punctuation">{</span>
        formatter<span class="token operator">:</span> <span class="token string">'{value} °C'</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  series<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      name<span class="token operator">:</span> <span class="token string">'Evaporation'</span><span class="token punctuation">,</span>
      type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
      tooltip<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">valueFormatter</span><span class="token operator">:</span> <span class="token parameter">value</span> <span class="token operator">=></span> value <span class="token operator">+</span> <span class="token string">' ml'</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token comment">// prettier-ignore</span>
      data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">2.0</span><span class="token punctuation">,</span> <span class="token number">4.9</span><span class="token punctuation">,</span> <span class="token number">7.0</span><span class="token punctuation">,</span> <span class="token number">23.2</span><span class="token punctuation">,</span> <span class="token number">25.6</span><span class="token punctuation">,</span> <span class="token number">76.7</span><span class="token punctuation">,</span> <span class="token number">135.6</span><span class="token punctuation">,</span> <span class="token number">162.2</span><span class="token punctuation">,</span> <span class="token number">32.6</span><span class="token punctuation">,</span> <span class="token number">20.0</span><span class="token punctuation">,</span> <span class="token number">6.4</span><span class="token punctuation">,</span> <span class="token number">3.3</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      name<span class="token operator">:</span> <span class="token string">'Precipitation'</span><span class="token punctuation">,</span>
      type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
      tooltip<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">valueFormatter</span><span class="token operator">:</span> <span class="token parameter">value</span> <span class="token operator">=></span> value <span class="token operator">+</span> <span class="token string">' ml'</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token comment">// prettier-ignore</span>
      data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">2.6</span><span class="token punctuation">,</span> <span class="token number">5.9</span><span class="token punctuation">,</span> <span class="token number">9.0</span><span class="token punctuation">,</span> <span class="token number">26.4</span><span class="token punctuation">,</span> <span class="token number">28.7</span><span class="token punctuation">,</span> <span class="token number">70.7</span><span class="token punctuation">,</span> <span class="token number">175.6</span><span class="token punctuation">,</span> <span class="token number">182.2</span><span class="token punctuation">,</span> <span class="token number">48.7</span><span class="token punctuation">,</span> <span class="token number">18.8</span><span class="token punctuation">,</span> <span class="token number">6.0</span><span class="token punctuation">,</span> <span class="token number">2.3</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      name<span class="token operator">:</span> <span class="token string">'Temperature'</span><span class="token punctuation">,</span>
      type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
      yAxisIndex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
      tooltip<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">valueFormatter</span><span class="token operator">:</span> <span class="token parameter">value</span> <span class="token operator">=></span> value <span class="token operator">+</span> <span class="token string">' °C'</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">2.0</span><span class="token punctuation">,</span> <span class="token number">2.2</span><span class="token punctuation">,</span> <span class="token number">3.3</span><span class="token punctuation">,</span> <span class="token number">4.5</span><span class="token punctuation">,</span> <span class="token number">6.3</span><span class="token punctuation">,</span> <span class="token number">10.2</span><span class="token punctuation">,</span> <span class="token number">20.3</span><span class="token punctuation">,</span> <span class="token number">23.4</span><span class="token punctuation">,</span> <span class="token number">23.0</span><span class="token punctuation">,</span> <span class="token number">16.5</span><span class="token punctuation">,</span> <span class="token number">12.0</span><span class="token punctuation">,</span> <span class="token number">6.2</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>Each series can configure its own <code>valueFormatter</code> according to its own value format.</p> <h2 id="more-flexible-sector-corner-radius" tabindex="-1">More Flexible Sector Corner Radius</h2> <p>In 5.0 we have added rounded corners configuration for sectors, which can make pie charts, sunburst charts more interesting. Previously, we only supported the inner and outer radius separately, this time we go a step further and support the four corners of the sector to be configured with different corner radius to bring more flexible display.</p> <div class="md-live layout-lr"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['30%', '70%'],
      roseType: 'angle',
      itemStyle: {
        borderRadius: [20, 5, 5, 10],
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false
      },
      data: [
        { value: 800, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 400, name: 'Video Ads' }
      ]
    }
  ]
};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
  tooltip<span class="token operator">:</span> <span class="token punctuation">{</span>
    trigger<span class="token operator">:</span> <span class="token string">'item'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  legend<span class="token operator">:</span> <span class="token punctuation">{</span>
    top<span class="token operator">:</span> <span class="token string">'5%'</span><span class="token punctuation">,</span>
    left<span class="token operator">:</span> <span class="token string">'center'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  series<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      name<span class="token operator">:</span> <span class="token string">'Access From'</span><span class="token punctuation">,</span>
      type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
      radius<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'30%'</span><span class="token punctuation">,</span> <span class="token string">'70%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      roseType<span class="token operator">:</span> <span class="token string">'angle'</span><span class="token punctuation">,</span>
      itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
        borderRadius<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        borderColor<span class="token operator">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span>
        borderWidth<span class="token operator">:</span> <span class="token number">2</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      label<span class="token operator">:</span> <span class="token punctuation">{</span>
        show<span class="token operator">:</span> <span class="token boolean">false</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      data<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">800</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Search Engine'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">735</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Direct'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">580</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Email'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">484</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Union Ads'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Video Ads'</span> <span class="token punctuation">}</span>
      <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="complex-label-optimization-for-pie-charts" tabindex="-1">Complex Label Optimization for Pie charts</h2> <p>Pie charts have always been one of the most complex charts on the label display in ECharts. We have been optimizing the layout and display of the pie chart labels for a long time.</p> <p>This time, we have done a deep optimization for pie chart labels that use text wrapping, background colors, rich text, and other complex layouts. In the adaptive width, container overflow, guide line calculation than before there are better results:</p> <table><thead><tr><th style="text-align:center">5.2.2 (Before)</th> <th style="text-align:center">5.3.0 (After)</th></tr></thead> <tbody><tr><td style="text-align:center"><img src alt="before" data-src="images/5-3-0/pie-label-before.png"></td> <td style="text-align:center"><img src alt="after" data-src="images/5-3-0/pie-label-after.png"></td></tr> <tr><td style="text-align:center"><img src alt="before" data-src="images/5-3-0/pie-label-before2.png"></td> <td style="text-align:center"><img src alt="after" data-src="images/5-3-0/pie-label-after2.png"></td></tr></tbody></table> <h2 id="bar-chart-large-mode-optimization" tabindex="-1">bar chart large mode optimization</h2> <p>In the cases of a large amount of data (> 2k), we support bar charts to speed up rendering and improve interactive performance by turning on <a href="https://echarts.apache.org/option.html#series-bar.large">large</a> mode. But previously the layout of bar charts in <a href="https://echarts.apache.org/option.html#series-bar.large">large</a> mode was simple and did not support the layout after stacking multiple series. In 5.3.0, we have optimized the layout of <a href="https://echarts.apache.org/option.html#series-bar.large">large</a> mode to be consistent with the normal mode. We can optimize the performance of the bar chart in more scenarios by turning on <a href="https://echarts.apache.org/option.html#series-bar.large">large</a>.</p> <p>In addition, the optimized bar chart layout also fixes the bug of incorrect stacking on non-linear axes like logarithmic axes.</p> <h2 id="breaking-changes" tabindex="-1">Breaking Changes</h2> <h3 id="registermap-and-getmap-methods-need-to-be-used-only-after-the-map-chart-is-imported" tabindex="-1">registerMap and getMap methods need to be used only after the map chart is imported</h3> <p>To reduce the size of the minimum bundle, we removed the map data management methods <code>getMap</code> and <code>registerMap</code> from the core module.</p> <p>If you are <a href="https://echarts.apache.org/handbook/en/basics/import/#importing-required-charts-and-components-to-have-minimal-bundle">only importing necessary charts and components</a>, you need to ensure that you have imported <code>GeoComponent</code> or <code>MapChart</code> before you can register map data with <code>registerMap</code>.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts/core'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> MapChart <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/charts'</span><span class="token punctuation">;</span>

echarts<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">[</span>MapChart<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// You must import the MapChart with the `use` method before you can register the map with registerMap</span>
echarts<span class="token punctuation">.</span><span class="token function">registerMap</span><span class="token punctuation">(</span><span class="token string">'world'</span><span class="token punctuation">,</span> worldJSON<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>If you are using <code>import * as echarts from 'echarts'</code> to import the whole package, this change will not affect you in any way.</p> <h3 id="removing-the-default-bolding-emphasis-effect-in-the-line-chart" tabindex="-1">Removing the default bolding emphasis effect in the line chart</h3> <p>We introduced the default bolding emphasis effect for line charts in 5.0, but the community feedback was that this didn't looks well in many scenarios. So in this version we changed this effect from on by default to off by default. You can enable it by:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code>series <span class="token operator">=</span> <span class="token punctuation">{</span>
  type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
  <span class="token comment">//...</span>
  emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
    lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
      width<span class="token operator">:</span> <span class="token string">'bolder'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></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-3-0.md" title="Edit this Document" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">Edit this page on GitHub</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <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"> <span>plainheart</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,g,i,t,I,C,o,a,A,n,r,d,s,l,c,h,m,p,b,w,u,f,y,B,v,G,Z,W,H,L,M,K,V,x,J,Y,N,X,D,S,R,F,k,O,z,j,T,U,Q,E,P,q,_,$,ee,ge,ie,te,Ie){return{layout:"default",data:[{html:'<h1 id="apache-echarts-5.3.0-features" tabindex="-1">Apache ECharts 5.3.0 Features</h1>\n<p>Apache ECharts 5.3.0 includes significant enhancements to animation expressiveness, rendering performance, and server-side rendering. It also adds long-awaited features from the community, such as automatic alignment of multi-axis ticks, tooltip value formatting, and map projection.</p>\n<h2 id="keyframe-animations" tabindex="-1">Keyframe Animations</h2>\n<p>Previously, ECharts animations were focused on transition animations for creating, updating, and removing elements, which often only had a start state and an end state. In order to express more complex animations, we introduced new keyframe animations for custom series and graphics components in 5.3.0.</p>\n<p>Here is a simple effect of a breathing animation implemented via keyframe animation</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGdyYXBoaWM6IHsKICAgIHR5cGU6ICdjaXJjbGUnLAogICAgc2hhcGU6IHsgcjogMTAwIH0sCiAgICBsZWZ0OiAnY2VudGVyJywKICAgIHRvcDogJ2NlbnRlcicsCiAgICBrZXlmcmFtZUFuaW1hdGlvbjogWwogICAgICB7CiAgICAgICAgZHVyYXRpb246IDMwMDAsCiAgICAgICAgbG9vcDogdHJ1ZSwKICAgICAgICBrZXlmcmFtZXM6IFsKICAgICAgICAgIHsKICAgICAgICAgICAgcGVyY2VudDogMC41LAogICAgICAgICAgICBlYXNpbmc6ICdzaW51c29pZGFsSW5PdXQnLAogICAgICAgICAgICBzY2FsZVg6IDAuMSwKICAgICAgICAgICAgc2NhbGVZOiAwLjEKICAgICAgICAgIH0sCiAgICAgICAgICB7CiAgICAgICAgICAgIHBlcmNlbnQ6IDEsCiAgICAgICAgICAgIGVhc2luZzogJ3NpbnVzb2lkYWxJbk91dCcsCiAgICAgICAgICAgIHNjYWxlWDogMSwKICAgICAgICAgICAgc2NhbGVZOiAxCiAgICAgICAgICB9CiAgICAgICAgXQogICAgICB9CiAgICBdCiAgfQp9Ow\'" v-bind="{layout: \'lr\', height:300}" />\n<p>In keyframe animation you can configure the animation duration, delay, easing, whether to loop or not, the position, easing, and graphic properties of each keyframe. You can also set multiple keyframe animations for each element at the same time with different configurations. The flexible configuration allows us to achieve very complex animation effects, and here are a few scenarios where keyframe animation can be applied.</p>\n<h3 id="custom-loading-animations" tabindex="-1">Custom Loading Animations</h3>\n<p>ECharts has a built-in loading animation by default, which can be displayed by calling <code>showLoading</code>. More loading animation effects have been frequently asked in the community. Now with keyframe animations, we can use the <a href="https://echarts.apache.org/option.html#graphic">graphic</a> component with keyframe animations to achieve any loading animation effect we want.</p>\n<p>Here is an example of the text stroke animation.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGdyYXBoaWM6IHsKICAgIGVsZW1lbnRzOiBbCiAgICAgIHsKICAgICAgICB0eXBlOiAndGV4dCcsCiAgICAgICAgbGVmdDogJ2NlbnRlcicsCiAgICAgICAgdG9wOiAnY2VudGVyJywKICAgICAgICBzdHlsZTogewogICAgICAgICAgdGV4dDogJ0FwYWNoZSBFQ2hhcnRzJywKICAgICAgICAgIGZvbnRTaXplOiA0MCwKICAgICAgICAgIGZvbnRXZWlnaHQ6ICdib2xkJywKICAgICAgICAgIGxpbmVEYXNoOiBbMCwgMjAwXSwKICAgICAgICAgIGxpbmVEYXNoT2Zmc2V0OiAwLAogICAgICAgICAgZmlsbDogJ3RyYW5zcGFyZW50JywKICAgICAgICAgIHN0cm9rZTogJyMwMDAnLAogICAgICAgICAgbGluZVdpZHRoOiAxCiAgICAgICAgfSwKICAgICAgICBrZXlmcmFtZUFuaW1hdGlvbjogewogICAgICAgICAgZHVyYXRpb246IDMwMDAsCiAgICAgICAgICBsb29wOiB0cnVlLAogICAgICAgICAga2V5ZnJhbWVzOiBbCiAgICAgICAgICAgIHsKICAgICAgICAgICAgICBwZXJjZW50OiAwLjcsCiAgICAgICAgICAgICAgc3R5bGU6IHsKICAgICAgICAgICAgICAgIGZpbGw6ICd0cmFuc3BhcmVudCcsCiAgICAgICAgICAgICAgICBsaW5lRGFzaE9mZnNldDogMjAwLAogICAgICAgICAgICAgICAgbGluZURhc2g6IFsyMDAsIDBdCiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9LAogICAgICAgICAgICB7CiAgICAgICAgICAgICAgLy8gU3RvcCBmb3IgYSB3aGlsZS4KICAgICAgICAgICAgICBwZXJjZW50OiAwLjgsCiAgICAgICAgICAgICAgc3R5bGU6IHsKICAgICAgICAgICAgICAgIGZpbGw6ICd0cmFuc3BhcmVudCcKICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0sCiAgICAgICAgICAgIHsKICAgICAgICAgICAgICBwZXJjZW50OiAxLAogICAgICAgICAgICAgIHN0eWxlOiB7CiAgICAgICAgICAgICAgICBmaWxsOiAnYmxhY2snCiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICBdCiAgICAgICAgfQogICAgICB9CiAgICBdCiAgfQp9Ow\'" v-bind="{layout: \'lr\', height:300}" />\n<p>Or animate columns.</p>\n<md-live lang="js" code="\'Y29uc3QgY29sdW1ucyA9IFtdOwpmb3IgKGxldCBpID0gMDsgaSA8IDc7IGkrKykgewogIGNvbHVtbnMucHVzaCh7CiAgICB0eXBlOiAncmVjdCcsCiAgICB4OiBpICogMjAsCiAgICBzaGFwZTogewogICAgICB4OiAwLAogICAgICB5OiAtNDAsCiAgICAgIHdpZHRoOiAxMCwKICAgICAgaGVpZ2h0OiA4MAogICAgfSwKICAgIHN0eWxlOiB7CiAgICAgIGZpbGw6ICcjNTQ3MGM2JwogICAgfSwKICAgIGtleWZyYW1lQW5pbWF0aW9uOiB7CiAgICAgIGR1cmF0aW9uOiAxMDAwLAogICAgICBkZWxheTogaSAqIDIwMCwKICAgICAgbG9vcDogdHJ1ZSwKICAgICAga2V5ZnJhbWVzOiBbCiAgICAgICAgewogICAgICAgICAgcGVyY2VudDogMC41LAogICAgICAgICAgc2NhbGVZOiAwLjEsCiAgICAgICAgICBlYXNpbmc6ICdjdWJpY0luJwogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgcGVyY2VudDogMSwKICAgICAgICAgIHNjYWxlWTogMSwKICAgICAgICAgIGVhc2luZzogJ2N1YmljT3V0JwogICAgICAgIH0KICAgICAgXQogICAgfQogIH0pOwp9Cm9wdGlvbiA9IHsKICBncmFwaGljOiB7CiAgICBlbGVtZW50czogWwogICAgICB7CiAgICAgICAgdHlwZTogJ2dyb3VwJywKICAgICAgICBsZWZ0OiAnY2VudGVyJywKICAgICAgICB0b3A6ICdjZW50ZXInLAogICAgICAgIGNoaWxkcmVuOiBjb2x1bW5zCiAgICAgIH0KICAgIF0KICB9Cn07\'" v-bind="{layout: \'lr\', height:300}" />\n<h3 id="extending-richer-animation-effects-in-the-chart" tabindex="-1">Extending Richer Animation Effects in the Chart</h3>\n<p>Scatter charts with animation effects have long been a feature of ECharts. Developers can use the <a href="https://echarts.apache.org/option.html#series-effectScatter">effectScatter</a> series to implement dynamic scatter charts with ripple effects, which make charts more interesting and also serve to highlight the user. As with loading animations, developers often ask for more animation effects. Now we can achieve more complex effects by using keyframe animations in our <a href="https://echarts.apache.org/option.html#series-custom">custom</a> series.</p>\n<p>For example, the following example animates the pins drawn by the custom series on the SVG map with a jumping effect, along with a ripple animation.</p>\n\x3c!-- <md-example src="geo-svg-custom-effect" width="100%" height="500" /> --\x3e\n<md-live lang="js" code="\'ZmV0Y2goCiAgJ2h0dHBzOi8vZmFzdGx5LmpzZGVsaXZyLm5ldC9naC9hcGFjaGUvZWNoYXJ0cy13ZWJzaXRlQGFzZi1zaXRlL2V4YW1wbGVzL2RhdGEvYXNzZXQvZ2VvL01hcF9vZl9JY2VsYW5kLnN2ZycKKQogIC50aGVuKHJlc3BvbnNlID0-IHJlc3BvbnNlLnRleHQoKSkKICAudGhlbihzdmcgPT4gewogICAgZWNoYXJ0cy5yZWdpc3Rlck1hcCgnaWNlbGFuZF9zdmcnLCB7IHN2Zzogc3ZnIH0pOwogICAgb3B0aW9uID0gewogICAgICBnZW86IHsKICAgICAgICBtYXA6ICdpY2VsYW5kX3N2ZycsCiAgICAgICAgbGVmdDogMCwKICAgICAgICByaWdodDogMAogICAgICB9LAogICAgICBzZXJpZXM6IHsKICAgICAgICB0eXBlOiAnY3VzdG9tJywKICAgICAgICBjb29yZGluYXRlU3lzdGVtOiAnZ2VvJywKICAgICAgICBnZW9JbmRleDogMCwKICAgICAgICB6bGV2ZWw6IDEsCiAgICAgICAgZGF0YTogWwogICAgICAgICAgWzQ4OCwgNDU5LCAxMDBdLAogICAgICAgICAgWzc3MCwgNzU3LCAzMF0sCiAgICAgICAgICBbMTE4MCwgNzQzLCA4MF0sCiAgICAgICAgICBbODk0LCAxMTg4LCA2MV0sCiAgICAgICAgICBbMTM3MiwgNDc3LCA3MF0sCiAgICAgICAgICBbMTM3OCwgOTM1LCA4MV0KICAgICAgICBdLAogICAgICAgIHJlbmRlckl0ZW0ocGFyYW1zLCBhcGkpIHsKICAgICAgICAgIGNvbnN0IGNvb3JkID0gYXBpLmNvb3JkKFsKICAgICAgICAgICAgYXBpLnZhbHVlKDAsIHBhcmFtcy5kYXRhSW5kZXgpLAogICAgICAgICAgICBhcGkudmFsdWUoMSwgcGFyYW1zLmRhdGFJbmRleCkKICAgICAgICAgIF0pOwoKICAgICAgICAgIGNvbnN0IGNpcmNsZXMgPSBbXTsKICAgICAgICAgIGZvciAobGV0IGkgPSAwOyBpIDwgNTsgaSsrKSB7CiAgICAgICAgICAgIGNpcmNsZXMucHVzaCh7CiAgICAgICAgICAgICAgdHlwZTogJ2NpcmNsZScsCiAgICAgICAgICAgICAgc2hhcGU6IHsKICAgICAgICAgICAgICAgIGN4OiAwLAogICAgICAgICAgICAgICAgY3k6IDAsCiAgICAgICAgICAgICAgICByOiAzMAogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgc3R5bGU6IHsKICAgICAgICAgICAgICAgIHN0cm9rZTogJ3JlZCcsCiAgICAgICAgICAgICAgICBmaWxsOiAnbm9uZScsCiAgICAgICAgICAgICAgICBsaW5lV2lkdGg6IDIKICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgIC8vIFJpcHBsZSBhbmltYXRpb24KICAgICAgICAgICAgICBrZXlmcmFtZUFuaW1hdGlvbjogewogICAgICAgICAgICAgICAgZHVyYXRpb246IDQwMDAsCiAgICAgICAgICAgICAgICBsb29wOiB0cnVlLAogICAgICAgICAgICAgICAgZGVsYXk6ICgtaSAvIDQpICogNDAwMCwKICAgICAgICAgICAgICAgIGtleWZyYW1lczogWwogICAgICAgICAgICAgICAgICB7CiAgICAgICAgICAgICAgICAgICAgcGVyY2VudDogMCwKICAgICAgICAgICAgICAgICAgICBzY2FsZVg6IDAsCiAgICAgICAgICAgICAgICAgICAgc2NhbGVZOiAwLAogICAgICAgICAgICAgICAgICAgIHN0eWxlOiB7CiAgICAgICAgICAgICAgICAgICAgICBvcGFjaXR5OiAxCiAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgICAgICB7CiAgICAgICAgICAgICAgICAgICAgcGVyY2VudDogMSwKICAgICAgICAgICAgICAgICAgICBzY2FsZVg6IDEsCiAgICAgICAgICAgICAgICAgICAgc2NhbGVZOiAwLjQsCiAgICAgICAgICAgICAgICAgICAgc3R5bGU6IHsKICAgICAgICAgICAgICAgICAgICAgIG9wYWNpdHk6IDAKICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgIF0KICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0pOwogICAgICAgICAgfQogICAgICAgICAgcmV0dXJuIHsKICAgICAgICAgICAgdHlwZTogJ2dyb3VwJywKICAgICAgICAgICAgeDogY29vcmRbMF0sCiAgICAgICAgICAgIHk6IGNvb3JkWzFdLAogICAgICAgICAgICBjaGlsZHJlbjogWwogICAgICAgICAgICAgIC4uLmNpcmNsZXMsCiAgICAgICAgICAgICAgewogICAgICAgICAgICAgICAgdHlwZTogJ3BhdGgnLAogICAgICAgICAgICAgICAgc2hhcGU6IHsKICAgICAgICAgICAgICAgICAgZDoKICAgICAgICAgICAgICAgICAgICAnTTE2IDBjLTUuNTIzIDAtMTAgNC40NzctMTAgMTAgMCAxMCAxMCAyMiAxMCAyMnMxMC0xMiAxMC0yMmMwLTUuNTIzLTQuNDc3LTEwLTEwLTEwek0xNiAxNmMtMy4zMTQgMC02LTIuNjg2LTYtNnMyLjY4Ni02IDYtNiA2IDIuNjg2IDYgNi0yLjY4NiA2LTYgNnonLAogICAgICAgICAgICAgICAgICB4OiAtMTAsCiAgICAgICAgICAgICAgICAgIHk6IC0zNSwKICAgICAgICAgICAgICAgICAgd2lkdGg6IDIwLAogICAgICAgICAgICAgICAgICBoZWlnaHQ6IDQwCiAgICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgICAgc3R5bGU6IHsKICAgICAgICAgICAgICAgICAgZmlsbDogJ3JlZCcKICAgICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgICAvLyBKdW1wIGFuaW1hdGlvbi4KICAgICAgICAgICAgICAgIGtleWZyYW1lQW5pbWF0aW9uOiB7CiAgICAgICAgICAgICAgICAgIGR1cmF0aW9uOiAxMDAwLAogICAgICAgICAgICAgICAgICBsb29wOiB0cnVlLAogICAgICAgICAgICAgICAgICBkZWxheTogTWF0aC5yYW5kb20oKSAqIDEwMDAsCiAgICAgICAgICAgICAgICAgIGtleWZyYW1lczogWwogICAgICAgICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgICAgICAgIHk6IC0xMCwKICAgICAgICAgICAgICAgICAgICAgIHBlcmNlbnQ6IDAuNSwKICAgICAgICAgICAgICAgICAgICAgIGVhc2luZzogJ2N1YmljT3V0JwogICAgICAgICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgICAgICAgewogICAgICAgICAgICAgICAgICAgICAgeTogMCwKICAgICAgICAgICAgICAgICAgICAgIHBlcmNlbnQ6IDEsCiAgICAgICAgICAgICAgICAgICAgICBlYXNpbmc6ICdib3VuY2VPdXQnCiAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICBdCiAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgfQogICAgICAgICAgICBdCiAgICAgICAgICB9OwogICAgICAgIH0KICAgICAgfQogICAgfTsKCiAgICBteUNoYXJ0LnNldE9wdGlvbihvcHRpb24pOwogIH0pOw\'" v-bind="{layout: \'lr\', readOnly: true }" />\n<h3 id="loading-lottie-animations" tabindex="-1">Loading Lottie animations</h3>\n<p>In order to fully exploit the power of new keyframe animations, Yi Shen from the ECharts team wrote a <a href="https://github.com/pissang/lottie-parser">Lottie animation parsing library</a> that can parse Lottie animation files into the ECharts graphics format for rendering. Combined with Lottie\'s expressive power we can introduce more amazing animations to our projects:</p>\n<iframe src="https://codesandbox.io/embed/eager-ives-yiqn7?fontsize=14&hidenavigation=1&theme=dark&codemirror=1"\n     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"\n     title="eager-ives-yiqn7"\n     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr- spatial-tracking"\n     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"\n   ></iframe>\n<h2 id="graphical-component-transition-animations" tabindex="-1">Graphical component transition animations</h2>\n<p>We have provided more flexible transition animation configurations for elements returned in the custom series in 5.0. The <code>transition</code>, <code>enterFrom</code>, and <code>leaveTo</code> configuration items allow you to configure which properties of each element will have transition animations and how they will be animated when the graphic is created and removed. Here is an example.</p>\n<md-code-block lang="js" code="\'ZnVuY3Rpb24gcmVuZGVySXRlbSgpIHsKICAvLy4uLgogIHJldHVybiB7CiAgICAvLy4uLgogICAgeDogMTAwLAogICAgLy8gJ3N0eWxlJywgJ3gnLCAneScgd2lsbCBiZSBhbmltYXRlZAogICAgdHJhbnNpdGlvbjogWydzdHlsZScsICd4JywgJ3knXSwKICAgIGVudGVyRnJvbTogewogICAgICBzdHlsZTogewogICAgICAgIC8vIEZhZGUgaW4KICAgICAgICBvcGFjaXR5OiAwCiAgICAgIH0sCiAgICAgIC8vIEZseSBpbiBmcm9tIHRoZSBsZWZ0CiAgICAgIHg6IDAKICAgIH0sCiAgICBsZWF2ZVRvOiB7CiAgICAgIC8vIEZhZGUgb3V0CiAgICAgIG9wYWNpdHk6IDAKICAgIH0sCiAgICAvLyBGbHkgb3V0IHRvIHRoZSByaWdodAogICAgeDogMjAwCiAgfTsKfQ\'" line-highlights="\'\'" />\n<p>In 5.3.0 we extended the configuration of these transition animations to the graphic component, with made additional enhancements.</p>\n<p>If you don\'t want to write out each property to be animated, you can now directly configure <code>transition: \'all\'</code> to animate all properties.</p>\n<p>We also added <code>enterAnimation</code>, <code>updateAnimation</code>, and <code>leaveAnimation</code> to configure the <code>duration</code>, <code>delay</code>, and <code>easing</code> of the entry, update, and exit animations for each graphic, respectively. Gradient colors now also support animations.</p>\n<h2 id="new-svg-renderer" tabindex="-1">New SVG renderer</h2>\n<p>In 5.3.0 we refactored our SVG renderer, which delivers 2x ~ 10x performance improvements, and even tens of times in some special scenes.</p>\n<p>Previously, we updated the SVG renderer directly from the render queue to the DOM, but since zrender\'s graphics properties were not one-to-one with the DOM, we had to implement very complex diff logic in the middle, which was error-prone and did not provide the best performance in some scenarios. In this version, we reconstruct the full rendering to VDOM first, and then patch the VDOM to DOM to finish the rendering. Full rendering avoids potential bugs caused by complex diff logic, and the one-to-one correspondence between VDOM and DOM ensures that updates are minimal when patching, resulting in a huge performance boost.</p>\n<p><a href="https://echarts.apache.org/examples/zh/editor.html?c=geo-svg-scatter-simple&amp;renderer=svg">This example</a> gives you an intuitive impression of the performance improvement. The new version is much smoother than the previous version when dragging the chart in SVG mode.</p>\n<table>\n<thead>\n<tr>\n<th style="text-align:center">5.2.2 (Before)</th>\n<th style="text-align:center">5.3.0 (After)</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style="text-align:center"><img src="" alt="before" data-src="images/5-3-0/svg-before.gif"></td>\n<td style="text-align:center"><img src="" alt="after" data-src="images/5-3-0/svg-after.gif"></td>\n</tr>\n</tbody>\n</table>\n<p>In addition to the performance improvement, we can do more things with the rendered VDOM, such as server-side rendering, which will be described below.</p>\n<h2 id="server-side-rendering-with-zero-dependencies" tabindex="-1">Server-side Rendering with Zero Dependencies</h2>\n<p>In previous versions, ECharts could also implement server-side rendering, but it had to rely on <a href="https://github.com/Automattic/node-canvas">node-canvas</a>, or <a href="https://github.com/jsdom/jsdom">JSDOM</a> if you were using SVG mode to simulate the DOM environment. These dependencies not only bring additional size and usage requirements, but also affect performance.</p>\n<p>This new SVG renderer allows us to get the string from the intermediate rendered VDOM, bringing completely zero-dependency server-side rendering and outputting a more refined SVG string integrated CSS animation.</p>\n<md-code-block lang="ts" code="\'Y29uc3QgZWNoYXJ0cyA9IHJlcXVpcmUoJ2VjaGFydHMnKTsKCi8vIEluIFNTUiBtb2RlIHRoZSBmaXJzdCBwYXJhbWV0ZXIgZG9lcyBub3QgbmVlZCB0byBiZSBwYXNzZWQgaW4gYXMgYSBET00gb2JqZWN0CmNvbnN0IGNoYXJ0ID0gZWNoYXJ0cy5pbml0KG51bGwsIG51bGwsIHsKICByZW5kZXJlcjogJ3N2ZycsIC8vIG11c3QgdXNlIFNWRyBtb2RlCiAgc3NyOiB0cnVlLCAvLyBlbmFibGUgU1NSCiAgd2lkdGg6IDQwMCwgLy8gbmVlZCB0byBzcGVjaWZ5IGhlaWdodCBhbmQgd2lkdGgKICBoZWlnaHQ6IDMwMAp9KTsKCi8vIHNldE9wdGlvbiBhcyBub3JtYWwKY2hhcnQuc2V0T3B0aW9uKHsKICB4QXhpczogewogICAgdHlwZTogJ2NhdGVnb3J5JywKICAgIGRhdGE6IFsnTW9uJywgJ1R1ZScsICdXZWQnLCAnVGh1JywgJ0ZyaScsICdTYXQnLCAnU3VuJ10KICB9LAogIHlBeGlzOiB7CiAgICB0eXBlOiAndmFsdWUnCiAgfSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgZGF0YTogWzEyMCwgMjAwLCAxNTAsIDgwLCA3MCwgMTEwLCAxMzBdLAogICAgICB0eXBlOiAnYmFyJwogICAgfQogIF0KfSk7CgovLyBPdXRwdXQgc3RyaW5nCmNvbnN0IHN2Z1N0ciA9IGNoYXJ0LnJlbmRlclRvU1ZHU3RyaW5nKCk7\'" line-highlights="\'\'" />\n<p>We build the simplest NodeJS server in CodeSandbox and then use the ECharts server to render the effect as follows</p>\n<iframe src="https://codesandbox.io/embed/heuristic-leftpad-oq23t?autoresize=1&codemirror=1&fontsize=12&hidenavigation=1&&theme= dark"\n     style="width:100%; height:400px; border:0; border-radius: 4px; overflow:hidden;"\n     title="heuristic-leftpad-oq23t"\n     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr- spatial-tracking"\n     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"\n   ></iframe>\n<h2 id="customizing-map-projections" tabindex="-1">Customizing Map Projections</h2>\n<p>Maps have always been a very widely used component in ECharts. Typically a map component uses GeoJSON formatted data with latitude and longitude stored. ECharts then calculates the appropriate display area and maps the latitude and longitude linearly to that area. This is the simplest way to project a map. However, the simple linear projection does not work for complex map scenarios, such as using <a href="https://en.wikipedia.org/wiki/Albers_projection">Albers</a> projection to solve the distortion problem in linear projection, or having the Pacific in the middle of the world map, etc.</p>\n<p>So in 5.3.0 we introduced extending map projection. It tells ECharts how to project coordinates and how to calculate latitude and longitude from the projected coordinates via the <code>project</code> and <code>unproject</code> methods. The following is a simple example of using the Mercator projection.</p>\n<md-code-block lang="ts" code="\'c2VyaWVzID0gewogIHR5cGU6ICdtYXAnLAogIHByb2plY3Rpb246IHsKICAgIHByb2plY3Q6IHBvaW50ID0-IFsKICAgICAgKHBvaW50WzBdIC8gMTgwKSAqIE1hdGguUEksCiAgICAgIC1NYXRoLmxvZyhNYXRoLnRhbigoTWF0aC5QSSAvIDIgKyAocG9pbnRbMV0gLyAxODApICogTWF0aC5QSSkgLyAyKSkKICAgIF0sCiAgICB1bnByb2plY3Q6IHBvaW50ID0-IFsKICAgICAgKHBvaW50WzBdICogMTgwKSAvIE1hdGguUEksCiAgICAgICgoMiAqIDE4MCkgLyBNYXRoLlBJKSAqIE1hdGguYXRhbihNYXRoLmV4cChwb2ludFsxXSkpIC0gOTAKICAgIF0KICB9Cn07\'" line-highlights="\'\'" />\n<p>In addition to implementing our own projection formula, we can also use projections implementations provided by third-party libraries such as <a href="https://github.com/d3/d3-geo">d3-geo</a>.</p>\n<md-code-block lang="ts" code="\'Y29uc3QgcHJvamVjdGlvbiA9IGQzLmdlb0NvbmljRXF1YWxBcmVhKCk7Ci8vIC4uLgpzZXJpZXMgPSB7CiAgdHlwZTogJ21hcCcsCiAgcHJvamVjdGlvbjogewogICAgcHJvamVjdDogcG9pbnQgPT4gcHJvamVjdGlvbihwb2ludCksCiAgICB1bnByb2plY3Q6IHBvaW50ID0-IHByb2plY3Rpb24uaW52ZXJ0KHBvaW50KQogIH0KfTs\'" line-highlights="\'\'" />\n<p>In conjunction with the new global transition animation feature added in 5.2, we can animate the transition between different projection effects: !</p>\n<p><img src="" alt="map-projection-animation" data-src="images/5-3-0/map-projection.gif"></p>\n<p>In addition to the map projection, we have made the following two enhancements to the map in this release.</p>\n<ul>\n<li>Provided <code>\'LineString\'</code> and <code>\'MultiLineString\'</code> support for GeoJSON data.</li>\n<li>Changed the calculation of the default label position from the center of the bounding box to the centroid of the largest area for more accurate results.</li>\n</ul>\n<h2 id="ticks-alignment-of-multiple-axes" tabindex="-1">Ticks Alignment of Multiple Axes</h2>\n<p>Ticks alignment of multiple axes is a long-standing requirement in the community, and we can see many articles in the community on how to implement axis alignment in ECharts, which is usually troublesome and limited.</p>\n<p>In 5.3.0, we finally introduced the feature of aligning ticks on the <code>\'value\'</code> and <code>\'log\'</code> axes. You can configure <code>alignTicks: true</code> in the axis that needs to be aligned. The axis will then adjust its own ticks according to the first axis\'s ticks, enabling automatic alignment.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRvb2x0aXA6IHsKICAgIHRyaWdnZXI6ICdheGlzJwogIH0sCiAgbGVnZW5kOiB7fSwKICB4QXhpczogWwogICAgewogICAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddLAogICAgICBheGlzUG9pbnRlcjogewogICAgICAgIHR5cGU6ICdzaGFkb3cnCiAgICAgIH0KICAgIH0KICBdLAogIHlBeGlzOiBbCiAgICB7CiAgICAgIHR5cGU6ICd2YWx1ZScsCiAgICAgIG5hbWU6ICdQcmVjaXBpdGF0aW9uJywKICAgICAgYWxpZ25UaWNrczogdHJ1ZSwKICAgICAgYXhpc0xhYmVsOiB7CiAgICAgICAgZm9ybWF0dGVyOiAne3ZhbHVlfSBtbCcKICAgICAgfQogICAgfSwKICAgIHsKICAgICAgdHlwZTogJ3ZhbHVlJywKICAgICAgbmFtZTogJ1RlbXBlcmF0dXJlJywKICAgICAgYXhpc0xhYmVsOiB7CiAgICAgICAgZm9ybWF0dGVyOiAne3ZhbHVlfSDCsEMnCiAgICAgIH0KICAgIH0KICBdLAogIHNlcmllczogWwogICAgewogICAgICBuYW1lOiAnRXZhcG9yYXRpb24nLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgLy8gcHJldHRpZXItaWdub3JlCiAgICAgIGRhdGE6IFsyLjAsIDQuOSwgNy4wLCAyMy4yLCAyNS42LCA3Ni43LCAxMzUuNiwgMTYyLjIsIDMyLjYsIDIwLjAsIDYuNCwgMy4zXQogICAgfSwKICAgIHsKICAgICAgbmFtZTogJ1ByZWNpcGl0YXRpb24nLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgLy8gcHJldHRpZXItaWdub3JlCiAgICAgIGRhdGE6IFsyLjYsIDUuOSwgOS4wLCAyNi40LCAyOC43LCA3MC43LCAxNzUuNiwgMTgyLjIsIDQ4LjcsIDE4LjgsIDYuMCwgMi4zXQogICAgfSwKICAgIHsKICAgICAgbmFtZTogJ1RlbXBlcmF0dXJlJywKICAgICAgdHlwZTogJ2xpbmUnLAogICAgICB5QXhpc0luZGV4OiAxLAogICAgICBkYXRhOiBbMi4wLCAyLjIsIDMuMywgNC41LCA2LjMsIDEwLjIsIDIwLjMsIDIzLjQsIDIzLjAsIDE2LjUsIDEyLjAsIDYuMl0KICAgIH0KICBdCn07\'" v-bind="{ layout: \'bt\' }" />\n<h2 id="disable-emphasis-and-select-state" tabindex="-1">Disable Emphasis and Select State</h2>\n<p>The <code>emphasis</code> state in ECharts provides feedback to the user when the mouse is over an element, but in a chart with a large number of elements, the highlighting animation can cause performance issues. In particular, highlighting triggered by <a href="https://echarts.apache.org/option.html#tooltip">tooltip</a> or <a href="https://echarts.apache.org/option.html#tooltip">legend</a> component linkage can highlight multiple elements at the same time.</p>\n<p>Therefore, in this release we have added <code>emphasis.disabled</code> configuration. If you don\'t need the highlighting feedback and you are concerned about the interactivity, you can disable the <code>emphasis</code> state with this option.</p>\n<p>For the <code>select</code> state, we have also added <code>select.disabled</code>. This option can be used to configure some of the data to be unselectable.</p>\n<h2 id="support-for-selecting-entire-series" tabindex="-1">Support for Selecting Entire Series</h2>\n<p>As of 5.3.0 we support configuring <code>selectedMode</code> to <code>\'series\'</code> to enable selection of all data in a series.</p>\n<h2 id="formatting-of-values-in-tooltip" tabindex="-1">Formatting of Values in Tooltip</h2>\n<p>Tooltips can be used to display more detailed information about the data item when the user hovers it. ECharts also provides a <code>formatter</code> callback function to give developers more flexibility to customize the content of the tooltip.</p>\n<p>However, we found that most of the time, developers only needed to format the value part of the tooltip, such as fixed precision, prefixed with <code>$</code>, etc. Previously, in order to format the number, developers had to rewrite the entire content of the tooltip with <code>formatter</code>. Especially after 5.0, ECharts hint boxes have become more complex and beautiful, so rewriting them becomes costly and difficult to achieve the default results.</p>\n<p>So in this version, we have added a <code>valueFormatter</code> configuration to the tooltip for formatting the value part.</p>\n<p>As in the axis alignment example, we can add the °C and ml suffixes to the value part of the tooltip.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRvb2x0aXA6IHsKICAgIHRyaWdnZXI6ICdheGlzJwogIH0sCiAgbGVnZW5kOiB7fSwKICB4QXhpczogWwogICAgewogICAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddLAogICAgICBheGlzUG9pbnRlcjogewogICAgICAgIHR5cGU6ICdzaGFkb3cnCiAgICAgIH0KICAgIH0KICBdLAogIHlBeGlzOiBbCiAgICB7CiAgICAgIHR5cGU6ICd2YWx1ZScsCiAgICAgIG5hbWU6ICdQcmVjaXBpdGF0aW9uJywKICAgICAgYWxpZ25UaWNrczogdHJ1ZSwKICAgICAgYXhpc0xhYmVsOiB7CiAgICAgICAgZm9ybWF0dGVyOiAne3ZhbHVlfSBtbCcKICAgICAgfQogICAgfSwKICAgIHsKICAgICAgdHlwZTogJ3ZhbHVlJywKICAgICAgbmFtZTogJ1RlbXBlcmF0dXJlJywKICAgICAgYXhpc0xhYmVsOiB7CiAgICAgICAgZm9ybWF0dGVyOiAne3ZhbHVlfSDCsEMnCiAgICAgIH0KICAgIH0KICBdLAogIHNlcmllczogWwogICAgewogICAgICBuYW1lOiAnRXZhcG9yYXRpb24nLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgdG9vbHRpcDogewogICAgICAgIHZhbHVlRm9ybWF0dGVyOiB2YWx1ZSA9PiB2YWx1ZSArICcgbWwnCiAgICAgIH0sCiAgICAgIC8vIHByZXR0aWVyLWlnbm9yZQogICAgICBkYXRhOiBbMi4wLCA0LjksIDcuMCwgMjMuMiwgMjUuNiwgNzYuNywgMTM1LjYsIDE2Mi4yLCAzMi42LCAyMC4wLCA2LjQsIDMuM10KICAgIH0sCiAgICB7CiAgICAgIG5hbWU6ICdQcmVjaXBpdGF0aW9uJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHRvb2x0aXA6IHsKICAgICAgICB2YWx1ZUZvcm1hdHRlcjogdmFsdWUgPT4gdmFsdWUgKyAnIG1sJwogICAgICB9LAogICAgICAvLyBwcmV0dGllci1pZ25vcmUKICAgICAgZGF0YTogWzIuNiwgNS45LCA5LjAsIDI2LjQsIDI4LjcsIDcwLjcsIDE3NS42LCAxODIuMiwgNDguNywgMTguOCwgNi4wLCAyLjNdCiAgICB9LAogICAgewogICAgICBuYW1lOiAnVGVtcGVyYXR1cmUnLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHlBeGlzSW5kZXg6IDEsCiAgICAgIHRvb2x0aXA6IHsKICAgICAgICB2YWx1ZUZvcm1hdHRlcjogdmFsdWUgPT4gdmFsdWUgKyAnIMKwQycKICAgICAgfSwKICAgICAgZGF0YTogWzIuMCwgMi4yLCAzLjMsIDQuNSwgNi4zLCAxMC4yLCAyMC4zLCAyMy40LCAyMy4wLCAxNi41LCAxMi4wLCA2LjJdCiAgICB9CiAgXQp9Ow\'" v-bind="{ layout: \'bt\' }" />\n<p>Each series can configure its own <code>valueFormatter</code> according to its own value format.</p>\n<h2 id="more-flexible-sector-corner-radius" tabindex="-1">More Flexible Sector Corner Radius</h2>\n<p>In 5.0 we have added rounded corners configuration for sectors, which can make pie charts, sunburst charts more interesting. Previously, we only supported the inner and outer radius separately, this time we go a step further and support the four corners of the sector to be configured with different corner radius to bring more flexible display.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRvb2x0aXA6IHsKICAgIHRyaWdnZXI6ICdpdGVtJwogIH0sCiAgbGVnZW5kOiB7CiAgICB0b3A6ICc1JScsCiAgICBsZWZ0OiAnY2VudGVyJwogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICdBY2Nlc3MgRnJvbScsCiAgICAgIHR5cGU6ICdwaWUnLAogICAgICByYWRpdXM6IFsnMzAlJywgJzcwJSddLAogICAgICByb3NlVHlwZTogJ2FuZ2xlJywKICAgICAgaXRlbVN0eWxlOiB7CiAgICAgICAgYm9yZGVyUmFkaXVzOiBbMjAsIDUsIDUsIDEwXSwKICAgICAgICBib3JkZXJDb2xvcjogJyNmZmYnLAogICAgICAgIGJvcmRlcldpZHRoOiAyCiAgICAgIH0sCiAgICAgIGxhYmVsOiB7CiAgICAgICAgc2hvdzogZmFsc2UKICAgICAgfSwKICAgICAgZGF0YTogWwogICAgICAgIHsgdmFsdWU6IDgwMCwgbmFtZTogJ1NlYXJjaCBFbmdpbmUnIH0sCiAgICAgICAgeyB2YWx1ZTogNzM1LCBuYW1lOiAnRGlyZWN0JyB9LAogICAgICAgIHsgdmFsdWU6IDU4MCwgbmFtZTogJ0VtYWlsJyB9LAogICAgICAgIHsgdmFsdWU6IDQ4NCwgbmFtZTogJ1VuaW9uIEFkcycgfSwKICAgICAgICB7IHZhbHVlOiA0MDAsIG5hbWU6ICdWaWRlbyBBZHMnIH0KICAgICAgXQogICAgfQogIF0KfTs\'" v-bind="{ layout: \'lr\', height: 400 }" />\n<h2 id="complex-label-optimization-for-pie-charts" tabindex="-1">Complex Label Optimization for Pie charts</h2>\n<p>Pie charts have always been one of the most complex charts on the label display in ECharts. We have been optimizing the layout and display of the pie chart labels for a long time.</p>\n<p>This time, we have done a deep optimization for pie chart labels that use text wrapping, background colors, rich text, and other complex layouts. In the adaptive width, container overflow, guide line calculation than before there are better results:</p>\n<table>\n<thead>\n<tr>\n<th style="text-align:center">5.2.2 (Before)</th>\n<th style="text-align:center">5.3.0 (After)</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style="text-align:center"><img src="" alt="before" data-src="images/5-3-0/pie-label-before.png"></td>\n<td style="text-align:center"><img src="" alt="after" data-src="images/5-3-0/pie-label-after.png"></td>\n</tr>\n<tr>\n<td style="text-align:center"><img src="" alt="before" data-src="images/5-3-0/pie-label-before2.png"></td>\n<td style="text-align:center"><img src="" alt="after" data-src="images/5-3-0/pie-label-after2.png"></td>\n</tr>\n</tbody>\n</table>\n<h2 id="bar-chart-large-mode-optimization" tabindex="-1">bar chart large mode optimization</h2>\n<p>In the cases of a large amount of data (&gt; 2k), we support bar charts to speed up rendering and improve interactive performance by turning on <a href="https://echarts.apache.org/option.html#series-bar.large">large</a> mode. But previously the layout of bar charts in <a href="https://echarts.apache.org/option.html#series-bar.large">large</a> mode was simple and did not support the layout after stacking multiple series. In 5.3.0, we have optimized the layout of <a href="https://echarts.apache.org/option.html#series-bar.large">large</a> mode to be consistent with the normal mode. We can optimize the performance of the bar chart in more scenarios by turning on <a href="https://echarts.apache.org/option.html#series-bar.large">large</a>.</p>\n<p>In addition, the optimized bar chart layout also fixes the bug of incorrect stacking on non-linear axes like logarithmic axes.</p>\n<h2 id="breaking-changes" tabindex="-1">Breaking Changes</h2>\n<h3 id="registermap-and-getmap-methods-need-to-be-used-only-after-the-map-chart-is-imported" tabindex="-1">registerMap and getMap methods need to be used only after the map chart is imported</h3>\n<p>To reduce the size of the minimum bundle, we removed the map data management methods <code>getMap</code> and <code>registerMap</code> from the core module.</p>\n<p>If you are <a href="https://echarts.apache.org/handbook/en/basics/import/#importing-required-charts-and-components-to-have-minimal-bundle">only importing necessary charts and components</a>, you need to ensure that you have imported <code>GeoComponent</code> or <code>MapChart</code> before you can register map data with <code>registerMap</code>.</p>\n<md-code-block lang="ts" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2NvcmUnOwppbXBvcnQgeyBNYXBDaGFydCB9IGZyb20gJ2VjaGFydHMvY2hhcnRzJzsKCmVjaGFydHMudXNlKFtNYXBDaGFydF0pOwoKLy8gWW91IG11c3QgaW1wb3J0IHRoZSBNYXBDaGFydCB3aXRoIHRoZSBgdXNlYCBtZXRob2QgYmVmb3JlIHlvdSBjYW4gcmVnaXN0ZXIgdGhlIG1hcCB3aXRoIHJlZ2lzdGVyTWFwCmVjaGFydHMucmVnaXN0ZXJNYXAoJ3dvcmxkJywgd29ybGRKU09OKTs\'" line-highlights="\'\'" />\n<p>If you are using <code>import * as echarts from \'echarts\'</code> to import the whole package, this change will not affect you in any way.</p>\n<h3 id="removing-the-default-bolding-emphasis-effect-in-the-line-chart" tabindex="-1">Removing the default bolding emphasis effect in the line chart</h3>\n<p>We introduced the default bolding emphasis effect for line charts in 5.0, but the community feedback was that this didn\'t looks well in many scenarios. So in this version we changed this effect from on by default to off by default. You can enable it by:</p>\n<md-code-block lang="ts" code="\'c2VyaWVzID0gewogIHR5cGU6ICdsaW5lJywKICAvLy4uLgogIGVtcGhhc2lzOiB7CiAgICBsaW5lU3R5bGU6IHsKICAgICAgd2lkdGg6ICdib2xkZXInCiAgICB9CiAgfQp9Ow\'" line-highlights="\'\'" />\n',postPath:"en/basics/release-note/5-3-0"}],fetch:{},error:t,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:I},{title:"入门篇",dir:C,children:[{title:"获取 ECharts",dir:o},{title:"在项目中引入 ECharts",dir:a},{title:"资源列表",dir:A,draft:e},{title:"寻求帮助",dir:n},{title:"版本特性",dir:r,children:[{title:"ECharts 5 特性介绍",dir:d},{title:"v4 升级 v5 指南",dir:s},{title:5.2,dir:l},{title:5.3,dir:c}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:p,draft:e},{title:"系列",dir:b,draft:e},{title:"样式",dir:w},{title:"数据集",dir:u},{title:"数据转换",dir:f},{title:"坐标系",dir:y,draft:e},{title:"坐标轴",dir:B},{title:"视觉映射",dir:i},{title:"图例",dir:v},{title:"事件与行为",dir:G}]},{title:"应用篇",dir:Z,children:[{title:"常用图表类型",dir:W,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:H},{title:"堆叠柱状图",dir:L},{title:"动态排序柱状图",dir:M},{title:"极坐标系柱状图",dir:K,draft:e},{title:"阶梯瀑布图",dir:V},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:x,children:[{title:"基础折线图",dir:J},{title:"堆叠折线图",dir:Y},{title:"区域面积图",dir:N},{title:"平滑曲线图",dir:X},{title:"阶梯线图",dir:D}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:S},{title:"圆环图",dir:R},{title:"南丁格尔图（玫瑰图）",dir:F}]},{title:"散点图",dir:k,children:[{title:"基础散点图",dir:O}]}]},{title:z,dir:g,draft:e},{title:"跨平台方案",dir:j,children:[{title:"服务端渲染",dir:T},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:U,children:[{title:"动态的异步数据",dir:Q},{title:"数据下钻",dir:E,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"动画",dir:q,children:[{title:"数据过渡动画",dir:_}]},{title:"交互",dir:$,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:ee,draft:e}]}]},{title:"最佳实践",dir:ge,children:[{title:z,dir:g,draft:e},{title:ie,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Ie}]}],en:[{title:"Get Started",dir:I},{title:"Basics",dir:C,children:[{title:"Download ECharts",dir:o},{title:"Import ECharts",dir:a},{title:"Resources",dir:A,draft:e},{title:"Get Help",dir:n},{title:"What's New",dir:r,children:[{title:"ECharts 5 Features",dir:d},{title:"Migration from v4 to v5",dir:s},{title:5.2,dir:l},{title:5.3,dir:c}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:p,draft:e},{title:"Series",dir:b,draft:e},{title:"Style",dir:w},{title:"Dataset",dir:u},{title:"Data Transform",dir:f},{title:"Coordinate",dir:y,draft:e},{title:"Axis",dir:B},{title:"Visual Mapping",dir:i},{title:"Legend",dir:v},{title:"Event and Action",dir:G}]},{title:"How To Guides",dir:Z,children:[{title:"Common Charts",dir:W,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:H},{title:"Stacked Bar",dir:L},{title:"Bar Racing",dir:M},{title:"Bar Polar",dir:K,draft:e},{title:"Waterfall",dir:V}]},{title:"Line",dir:x,children:[{title:"Basic Line",dir:J},{title:"Stacked Line",dir:Y},{title:"Area Chart",dir:N},{title:"Smoothed Line",dir:X},{title:"Step Line",dir:D}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:S},{title:"Ring Style",dir:R},{title:"Rose Style",dir:F}]},{title:"Scatter",dir:k,children:[{title:"Basic Scatter",dir:O}]}]},{title:"Mobile",dir:g,draft:e},{title:"Cross Platform",dir:j,children:[{title:"Server Side Rendering",dir:T}]},{title:"Data",dir:U,children:[{title:"Dynamic Data",dir:Q},{title:"Drilldown",dir:E,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Animation",dir:q,children:[{title:"Data Transition",dir:_}]},{title:"Interaction",dir:$,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:ee,draft:e}]}]},{title:"Best Practices",dir:ge,children:[{title:"Mobile Optimization",dir:g,draft:e},{title:ie,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Ie}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:e,routePath:"/en/basics/release-note/5-3-0",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:t}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","5-3-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","server","data","dynamic-data","drilldown","rich-text","animation","transition","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/b561b82.js" defer></script><script src="/handbook/_nuxt/js/2ce97fcdefb3b7b018fe.js" defer></script><script src="/handbook/_nuxt/js/4f3ab71f990e271ccbe4.js" defer></script><script src="/handbook/_nuxt/js/f74f8c0f406ea2522d04.js" defer></script><script src="/handbook/_nuxt/js/e96421e0f27cc5a35348.js" defer></script><script src="/handbook/_nuxt/js/d6226697ecb43e03cd0d.js" defer></script>
    <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
    <script src="https://fastly.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://fastly.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-141228404-1"></script>
    <script>var _hmt=_hmt||[];function gtag(){dataLayer.push(arguments)}!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}(),window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-141228404-1")</script>
  </body>
</html>