| <!doctype html> |
| <html data-n-head-ssr> |
| <head> |
| <link rel="stylesheet" type="text/css" href="https://fastly.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> |
| <link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css"> |
| <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"> |
| <title>Migration from v4 to v5 - What's New - Basics - Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://echarts.apache.org/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/4d2a12b.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/fa73816a85b29fbf7562.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8117eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/b964c20bb1562bc48da6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1f3ef45.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/60d2f1dbd961abb7604b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/ba9ec8a.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/43cd67c0cf5a9d972051.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/3556c50.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9d86a6602b3f4dd6c979.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/8117eb7.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1f3ef45.css"><link rel="stylesheet" href="/handbook/_nuxt/css/ba9ec8a.css"><link rel="stylesheet" href="/handbook/_nuxt/css/3556c50.css"> |
| </head> |
| <body> |
| <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-up"></span></a> <ul class="nav bd-sidenav level2"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Migration from v4 to v5</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-3-0" class="nav-link"><span class="title">5.3</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-4-0" class="nav-link"><span class="title">5.4</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Animation</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/animation/transition" class="nav-link"><span class="title">Data Transition</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/interaction/coarse-pointer" class="nav-link"><span class="title">Intelligent Pointer Snapping</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practices/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="apache-echarts-5-upgrade-guide" tabindex="-1">Apache ECharts 5 Upgrade Guide</h1> <p>This guide is for those who want to upgrade from echarts 4.x (hereafter <code>v4</code>) to echarts 5.x (hereafter <code>v5</code>). You can find out what new features <code>v5</code> brings that are worth upgrading in <a href="en/basics/release-note/v5-feature">New Features in ECharts 5</a>. In most cases, developers won't need to do anything extra for this upgrade, as echarts has always tried to keep the API as stable and backward-compatible as possible. However, <code>v5</code> still brings some breaking changes that require special attention. In addition, in some cases, <code>v5</code> provides a better API to replace the previous one, and these superseded APIs will no longer be recommended (though we have tried to be as compatible as possible with these changes). We'll try to explain these changes in detail in this document.</p> <h2 id="breaking-changes" tabindex="-1">Breaking Changes</h2> <h3 id="default-theme" tabindex="-1">Default Theme</h3> <p>First of all, the default theme has been changed. <code>v5</code> has made a lot of changes and optimizations on the theme design. If you still want to keep the colors of the old version, you can manually declare the colors as follows.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token string">'#c23531'</span><span class="token punctuation">,</span> |
| <span class="token string">'#2f4554'</span><span class="token punctuation">,</span> |
| <span class="token string">'#61a0a8'</span><span class="token punctuation">,</span> |
| <span class="token string">'#d48265'</span><span class="token punctuation">,</span> |
| <span class="token string">'#91c7ae'</span><span class="token punctuation">,</span> |
| <span class="token string">'#749f83'</span><span class="token punctuation">,</span> |
| <span class="token string">'#ca8622'</span><span class="token punctuation">,</span> |
| <span class="token string">'#bda29a'</span><span class="token punctuation">,</span> |
| <span class="token string">'#6e7074'</span><span class="token punctuation">,</span> |
| <span class="token string">'#546570'</span><span class="token punctuation">,</span> |
| <span class="token string">'#c4ccd3'</span> |
| <span class="token punctuation">]</span> |
| <span class="token comment">// ...</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>Or, to make a simple <code>v4</code> theme.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> themeEC4 <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token string">'#c23531'</span><span class="token punctuation">,</span> |
| <span class="token string">'#2f4554'</span><span class="token punctuation">,</span> |
| <span class="token string">'#61a0a8'</span><span class="token punctuation">,</span> |
| <span class="token string">'#d48265'</span><span class="token punctuation">,</span> |
| <span class="token string">'#91c7ae'</span><span class="token punctuation">,</span> |
| <span class="token string">'#749f83'</span><span class="token punctuation">,</span> |
| <span class="token string">'#ca8622'</span><span class="token punctuation">,</span> |
| <span class="token string">'#bda29a'</span><span class="token punctuation">,</span> |
| <span class="token string">'#6e7074'</span><span class="token punctuation">,</span> |
| <span class="token string">'#546570'</span><span class="token punctuation">,</span> |
| <span class="token string">'#c4ccd3'</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span> |
| <span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>dom<span class="token punctuation">,</span> themeEC4<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token comment">/* ... */</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> <h3 id="importing-echarts" tabindex="-1">Importing ECharts</h3> <h4 id="removing-support-for-default-exports" tabindex="-1">Removing Support for Default Exports</h4> <p>Since <code>v5</code>, echarts only provides <code>named exports</code>.</p> <p>So if you are importing <code>echarts</code> like this:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">import</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts'</span><span class="token punctuation">;</span> |
| <span class="token comment">// Or import core module</span> |
| <span class="token keyword">import</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts/lib/echarts'</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>It will throw error in <code>v5</code>. You need to change the code as follows to import the entire module.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js 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'</span><span class="token punctuation">;</span> |
| <span class="token comment">// Or</span> |
| <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/lib/echarts'</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h4 id="tree-shaking-api" tabindex="-1">Tree-shaking API</h4> <p>In 5.0.1, we introduced the new <a href="en/basics/import">tree-shaking API</a></p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js 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> BarChart <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/charts'</span><span class="token punctuation">;</span> |
| <span class="token keyword">import</span> <span class="token punctuation">{</span> GridComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/components'</span><span class="token punctuation">;</span> |
| <span class="token comment">// Note that the Canvas renderer is no longer included by default and needs to be imported explictly, or import the SVGRenderer if you need to use the SVG rendering mode</span> |
| <span class="token keyword">import</span> <span class="token punctuation">{</span> CanvasRenderer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/renderers'</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>BarChart<span class="token punctuation">,</span> GridComponent<span class="token punctuation">,</span> CanvasRenderer<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>To make it easier for you to know which modules you need to import based on your option, our new example page adds a new feature to generate the three-shakable code, you can check the <code>Full Code</code> tab on the example page to see the modules you need to introduce and the related code.</p> <p>In most cases, we recommend using the new tree-shaking interface whenever possible, as it maximizes the power of the packaging tool tree-shaking and effectively resolves namespace conflicts and prevents the exposure of internal structures. If you are still using the CommonJS method of writing modules, the previous approach is still supported:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">const</span> echarts <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/echarts'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/chart/bar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/component/grid'</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>Second, because our source code has been rewritten using TypeScript, <code>v5</code> will no longer support importing files from <code>echarts/src</code>. You need to change it to import from <code>echarts/lib</code>.</p> <h4 id="dependency-changes" tabindex="-1">Dependency Changes</h4> <blockquote><p>Note: This section is only for developers who use tree-shaking interfaces to ensure a minimal bundle size, not for those who imports the whole package.</p></blockquote> <p>In order to keep the size of the bundle small enough, we remove some dependencies that would have been imported by default. For example, as mentioned above, when using the new on-demand interface, <code>CanvasRenderer</code> is no longer included by default, which ensures that unneeded Canvas rendering code is not imported when only SVG rendering mode is used, and in addition, the following dependencies are adjusted.</p> <ul><li>The right-angle coordinate system component is no longer introduced by default when using line charts and bar charts, so the following introduction method was used before</li></ul> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">const</span> echarts <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/echarts'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/chart/bar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/chart/line'</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>Need to introduce the <code>grid</code> component separately again</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/component/grid'</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>Reference issues: <a href="https://github.com/apache/echarts/issues/14080">#14080</a>, <a href="https://github.com/apache/echarts/issues/13764">#13764</a></p> <ul><li><code>aria</code> components are no longer imported by default. You need import it manually if necessary.</li></ul> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> AriaComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/components'</span><span class="token punctuation">;</span> |
| echarts<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>AriaComponent<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>Or</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/component/aria'</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> <h3 id="built-in-geojson-removed" tabindex="-1">Built-in GeoJSON Removed</h3> <p><code>v5</code> removes the built-in geoJSON (previously in the <code>echarts/map</code> folder). These geoJSON files were always sourced from third parties. If users still need them, they can go get them from the old version, or find more appropriate data and register it with ECharts via the registerMap interface.</p> <h3 id="browser-compatibility" tabindex="-1">Browser Compatibility</h3> <p>IE8 is no longer supported by <code>v5</code>. We no longer maintain and upgrade the previous <a href="https://github.com/ecomfe/zrender/tree/4.3.2/src/vml">VML renderer</a> for IE8 compatibility. If developers have a strong need for a VML renderer, they are welcome to submit a pull request to upgrade the VML renderer or maintain a separate third-party VML renderer, as we support registration of standalone renderers starting with <code>v5.0.1</code>.</p> <h3 id="configuration-item-adjustment" tabindex="-1">Configuration Item Adjustment</h3> <h4 id="visual-style-settings-priority-changes" tabindex="-1">Visual Style Settings Priority Changes</h4> <p>The priority of the visuals between <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> and <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> are reversed since <code>v5</code>.</p> <p>That is, previously in <code>v4</code>, the visuals (i.e., color, symbol, symbolSize, ...) that generated by <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> has the highest priority, which will overwrite the same visuals settings in <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a>. That brought troubles when needing to specify specific style to some certain data items while using <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a>. Since <code>v5</code>, the visuals specified in <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> has the highest priority.</p> <p>In most cases, users will probably not notice this change when migrating from <code>v4</code> to <code>v5</code>. But users can still check that if <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> and <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> are both specified.</p> <h4 id="padding-for-rich-text" tabindex="-1"><code>padding</code> for Rich Text</h4> <p><code>v5</code> adjusts the <a href="https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding">rich.?.padding</a> to make it more compliant with CSS specifications. In <code>v4</code>, for example <code>rich. .padding: [11, 22, 33, 44]</code> means that <code>padding-top</code> is <code>33</code> and <code>padding-bottom</code> is <code>11</code>. The position of the top and bottom is adjusted in <code>v5</code>, <code>rich. .padding: [11, 22, 33, 44]</code> means that <code>padding-top</code> is <code>11</code> and <code>padding-bottom</code> is <code>33</code>.</p> <p>If the user is using <a href="https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding">rich.?.padding</a>, this order needs to be adjusted.</p> <h2 id="extensions" tabindex="-1">Extensions</h2> <p>These extensions need to be upgraded to new version to support echarts <code>v5</code>:</p> <ul><li><a href="https://github.com/ecomfe/echarts-gl">echarts-gl</a></li> <li><a href="https://github.com/ecomfe/echarts-wordcloud">echarts-wordcloud</a></li> <li><a href="https://github.com/ecomfe/echarts-liquidfill">echarts-liquidfill</a></li></ul> <h2 id="deprecated-apis" tabindex="-1">Deprecated APIs</h2> <p>Some of the API and echarts options are deprecated since <code>v5</code>, but are still backward compatible. Users can <strong>keep using these deprecated API</strong>, with only some warning will be printed to console in dev mode. But if users have spare time, it is recommended to upgraded to new API for the consideration of long term maintenance.</p> <p>The deprecated API and their corresponding new API are listed as follows:</p> <ul><li>Transform related props of a graphic element are changed: |
| <ul><li>Changes: |
| <ul><li><code>position: [number, number]</code> are changed to <code>x: number</code>/<code>y: number</code>.</li> <li><code>scale: [number, number]</code> are changed to <code>scaleX: number</code>/<code>scaleY: number</code>.</li> <li><code>origin: [number, number]</code> are changed to <code>originX: number</code>/<code>originY: number</code>.</li></ul></li> <li>The <code>position</code>, <code>scale</code> and <code>origin</code> are still supported but deprecated.</li> <li>It effects these places: |
| <ul><li>In the <code>graphic</code> components: the declarations of each element.</li> <li>In <code>custom series</code>: the declarations of each element in the return of <code>renderItem</code>.</li> <li>Directly use zrender graphic elements.</li></ul></li></ul></li> <li>Text related props on graphic elements are changed: |
| <ul><li>Changes: |
| <ul><li>The declaration of attached text (or say, rect text) are changed. |
| <ul><li>Prop <code>style.text</code> are deprecated in elements except <code>Text</code>. Instead, Prop set <code>textContent</code> and <code>textConfig</code> are provided to support more powerful capabilities.</li> <li>These related props at the left part below are deprecated. Use the right part below instead. |
| <ul><li>textPosition => textConfig.position</li> <li>textOffset => textConfig.offset</li> <li>textRotation => textConfig.rotation</li> <li>textDistance => textConfig.distance</li></ul></li></ul></li> <li>The props at the left part below are deprecated in <code>style</code> and <code>style.rich.?</code>. Use the props at the right part below instead. |
| <ul><li>textFill => fill</li> <li>textStroke => stroke</li> <li>textFont => font</li> <li>textStrokeWidth => lineWidth</li> <li>textAlign => align</li> <li>textVerticalAlign => verticalAlign</li> <li>textLineHeight => lineHeight</li> <li>textWidth => width</li> <li>textHeight => hight</li> <li>textBackgroundColor => backgroundColor</li> <li>textPadding => padding</li> <li>textBorderColor => borderColor</li> <li>textBorderWidth => borderWidth</li> <li>textBorderRadius => borderRadius</li> <li>textBoxShadowColor => shadowColor</li> <li>textBoxShadowBlur => shadowBlur</li> <li>textBoxShadowOffsetX => shadowOffsetX</li> <li>textBoxShadowOffsetY => shadowOffsetY</li></ul></li> <li>Note: these props are not changed: |
| <ul><li>textShadowColor</li> <li>textShadowBlur</li> <li>textShadowOffsetX</li> <li>textShadowOffsetY</li></ul></li></ul></li> <li>It effects these places: |
| <ul><li>In the <code>graphic</code> components: the declarations of each element. [compat, but not accurately the same in some complicated cases.]</li> <li>In <code>custom series</code>: the declarations of each element in the return of <code>renderItem</code>. [compat, but not accurately the same in some complicated cases].</li> <li>Directly use zrender API to create graphic elements. [No compat, breaking change].</li></ul></li></ul></li> <li>API on chart instance: |
| <ul><li><code>chart.one(...)</code> is deprecated.</li></ul></li> <li><code>label</code>: |
| <ul><li>In props <code>color</code>, <code>textBorderColor</code>, <code>backgroundColor</code> and <code>borderColor</code>, the value <code>'auto'</code> is deprecated. Use the value <code>'inherit'</code> instead.</li></ul></li> <li><code>hoverAnimation</code>: |
| <ul><li>option <code>series.hoverAnimation</code> is deprecated. Use <code>series.emphasis.scale</code> instead.</li></ul></li> <li><code>line series</code>: |
| <ul><li>option <code>series.clipOverflow</code> is deprecated. Use <code>series.clip</code> instead.</li></ul></li> <li><code>custom series</code>: |
| <ul><li>In <code>renderItem</code>, the <code>api.style(...)</code> and <code>api.styleEmphasis(...)</code> are deprecated. Because it is not really necessary and hard to ensure backward compatibility. Users can fetch system designated visual by <code>api.visual(...)</code>.</li></ul></li> <li><code>sunburst series</code>: |
| <ul><li>Action type <code>highlight</code> is deprecated. Use <code>sunburstHighlight</code> instead.</li> <li>Action type <code>downplay</code> is deprecated. Use <code>sunburstUnhighlight</code> instead.</li> <li>option <code>series.downplay</code> is deprecated. Use <code>series.blur</code> instead.</li> <li>option <code>series.highlightPolicy</code> is deprecated. Use <code>series.emphasis.focus</code> instead.</li></ul></li> <li><code>pie series</code>: |
| <ul><li>The action type at the left part below are deprecated. Use the right part instead: |
| <ul><li><code>pieToggleSelect</code> => <code>toggleSelect</code></li> <li><code>pieSelect</code> => <code>select</code></li> <li><code>pieUnSelect</code> => <code>unselect</code></li></ul></li> <li>The event type at the left part below are deprecated. Use the right part instead: |
| <ul><li><code>pieselectchanged</code> => <code>selectchanged</code></li> <li><code>pieselected</code> => <code>selected</code></li> <li><code>pieunselected</code> => <code>unselected</code></li></ul></li> <li>option <code>series.label.margin</code> is deprecated. Use <code>series.label.edgeDistance</code> instead.</li> <li>option <code>series.clockWise</code> is deprecated. Use <code>series.clockwise</code> instead.</li> <li>option <code>series.hoverOffset</code> is deprecated. Use <code>series.emphasis.scaleSize</code> instead.</li></ul></li> <li><code>map series</code>: |
| <ul><li>The action type at the left part below are deprecated. Use the right part instead: |
| <ul><li><code>mapToggleSelect</code> => <code>toggleSelect</code></li> <li><code>mapSelect</code> => <code>select</code></li> <li><code>mapUnSelect</code> => <code>unselect</code></li></ul></li> <li>The event type at the left part below are deprecated. Use the right part instead: |
| <ul><li><code>mapselectchanged</code> => <code>selectchanged</code></li> <li><code>mapselected</code> => <code>selected</code></li> <li><code>mapunselected</code> => <code>unselected</code></li></ul></li> <li>option <code>series.mapType</code> is deprecated. Use <code>series.map</code> instead.</li> <li>option <code>series.mapLocation</code> is deprecated.</li></ul></li> <li><code>graph series</code>: |
| <ul><li>option <code>series.focusNodeAdjacency</code> is deprecated. Use <code>series.emphasis: { focus: 'adjacency'}</code> instead.</li></ul></li> <li><code>gauge series</code>: |
| <ul><li>option <code>series.clockWise</code> is deprecated. Use <code>series.clockwise</code> instead.</li> <li>option <code>series.hoverOffset</code> is deprecated. Use <code>series.emphasis.scaleSize</code> instead.</li></ul></li> <li><code>dataZoom component</code>: |
| <ul><li>option <code>dataZoom.handleIcon</code> need prefix <code>path://</code> if using SVGPath.</li></ul></li> <li><code>radar</code>: |
| <ul><li>option <code>radar.name</code> is deprecated. Use <code>radar.axisName</code> instead.</li> <li>option <code>radar.nameGap</code> is deprecated. Use <code>radar.axisNameGap</code> instead.</li></ul></li> <li>Parse and format: |
| <ul><li><code>echarts.format.formatTime</code> is deprecated. Use <code>echarts.time.format</code> instead.</li> <li><code>echarts.number.parseDate</code> is deprecated. Use <code>echarts.time.parse</code> instead.</li> <li><code>echarts.format.getTextRect</code> is deprecated.</li></ul></li></ul></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">Contributors</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/basics/release-note/v5-upgrade-guide.md" title="Edit this Document" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">Edit this page on GitHub</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60" loading="lazy"> <span>Ovilia</span></a><a href="https://github.com/fuchunhui" target="_blank" class="post-contributor"><img alt="fuchunhui" src="https://avatars.githubusercontent.com/fuchunhui?size=60" loading="lazy"> <span>fuchunhui</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60" loading="lazy"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//fastly.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,o,d,a,n,r,l,c,s,h,p,g,u,m,b,f,y,v,I,w,C,x,S,A,k,B,W,G,J,Y,M,N,Z,U,T,V,j,z,L,R,X,P,H,F,E,D,O,Q,K,q,_,$,ee,te,ie,oe){return{layout:"default",data:[{html:'<h1 id="apache-echarts-5-upgrade-guide" tabindex="-1">Apache ECharts 5 Upgrade Guide</h1>\n<p>This guide is for those who want to upgrade from echarts 4.x (hereafter <code>v4</code>) to echarts 5.x (hereafter <code>v5</code>). You can find out what new features <code>v5</code> brings that are worth upgrading in <a href="en/basics/release-note/v5-feature">New Features in ECharts 5</a>. In most cases, developers won\'t need to do anything extra for this upgrade, as echarts has always tried to keep the API as stable and backward-compatible as possible. However, <code>v5</code> still brings some breaking changes that require special attention. In addition, in some cases, <code>v5</code> provides a better API to replace the previous one, and these superseded APIs will no longer be recommended (though we have tried to be as compatible as possible with these changes). We\'ll try to explain these changes in detail in this document.</p>\n<h2 id="breaking-changes" tabindex="-1">Breaking Changes</h2>\n<h3 id="default-theme" tabindex="-1">Default Theme</h3>\n<p>First of all, the default theme has been changed. <code>v5</code> has made a lot of changes and optimizations on the theme design. If you still want to keep the colors of the old version, you can manually declare the colors as follows.</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICBjb2xvcjogWwogICAgJyNjMjM1MzEnLAogICAgJyMyZjQ1NTQnLAogICAgJyM2MWEwYTgnLAogICAgJyNkNDgyNjUnLAogICAgJyM5MWM3YWUnLAogICAgJyM3NDlmODMnLAogICAgJyNjYTg2MjInLAogICAgJyNiZGEyOWEnLAogICAgJyM2ZTcwNzQnLAogICAgJyM1NDY1NzAnLAogICAgJyNjNGNjZDMnCiAgXQogIC8vIC4uLgp9KTs\'" line-highlights="\'\'" />\n<p>Or, to make a simple <code>v4</code> theme.</p>\n<md-code-block lang="js" code="\'dmFyIHRoZW1lRUM0ID0gewogIGNvbG9yOiBbCiAgICAnI2MyMzUzMScsCiAgICAnIzJmNDU1NCcsCiAgICAnIzYxYTBhOCcsCiAgICAnI2Q0ODI2NScsCiAgICAnIzkxYzdhZScsCiAgICAnIzc0OWY4MycsCiAgICAnI2NhODYyMicsCiAgICAnI2JkYTI5YScsCiAgICAnIzZlNzA3NCcsCiAgICAnIzU0NjU3MCcsCiAgICAnI2M0Y2NkMycKICBdCn07CnZhciBjaGFydCA9IGVjaGFydHMuaW5pdChkb20sIHRoZW1lRUM0KTsKY2hhcnQuc2V0T3B0aW9uKC8qIC4uLiAqLyk7\'" line-highlights="\'\'" />\n<h3 id="importing-echarts" tabindex="-1">Importing ECharts</h3>\n<h4 id="removing-support-for-default-exports" tabindex="-1">Removing Support for Default Exports</h4>\n<p>Since <code>v5</code>, echarts only provides <code>named exports</code>.</p>\n<p>So if you are importing <code>echarts</code> like this:</p>\n<md-code-block lang="js" code="\'aW1wb3J0IGVjaGFydHMgZnJvbSAnZWNoYXJ0cyc7Ci8vIE9yIGltcG9ydCBjb3JlIG1vZHVsZQppbXBvcnQgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2xpYi9lY2hhcnRzJzs\'" line-highlights="\'\'" />\n<p>It will throw error in <code>v5</code>. You need to change the code as follows to import the entire module.</p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzJzsKLy8gT3IKaW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2xpYi9lY2hhcnRzJzs\'" line-highlights="\'\'" />\n<h4 id="tree-shaking-api" tabindex="-1">Tree-shaking API</h4>\n<p>In 5.0.1, we introduced the new <a href="en/basics/import">tree-shaking API</a></p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2NvcmUnOwppbXBvcnQgeyBCYXJDaGFydCB9IGZyb20gJ2VjaGFydHMvY2hhcnRzJzsKaW1wb3J0IHsgR3JpZENvbXBvbmVudCB9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7Ci8vIE5vdGUgdGhhdCB0aGUgQ2FudmFzIHJlbmRlcmVyIGlzIG5vIGxvbmdlciBpbmNsdWRlZCBieSBkZWZhdWx0IGFuZCBuZWVkcyB0byBiZSBpbXBvcnRlZCBleHBsaWN0bHksIG9yIGltcG9ydCB0aGUgU1ZHUmVuZGVyZXIgaWYgeW91IG5lZWQgdG8gdXNlIHRoZSBTVkcgcmVuZGVyaW5nIG1vZGUKaW1wb3J0IHsgQ2FudmFzUmVuZGVyZXIgfSBmcm9tICdlY2hhcnRzL3JlbmRlcmVycyc7CgplY2hhcnRzLnVzZShbQmFyQ2hhcnQsIEdyaWRDb21wb25lbnQsIENhbnZhc1JlbmRlcmVyXSk7\'" line-highlights="\'\'" />\n<p>To make it easier for you to know which modules you need to import based on your option, our new example page adds a new feature to generate the three-shakable code, you can check the <code>Full Code</code> tab on the example page to see the modules you need to introduce and the related code.</p>\n<p>In most cases, we recommend using the new tree-shaking interface whenever possible, as it maximizes the power of the packaging tool tree-shaking and effectively resolves namespace conflicts and prevents the exposure of internal structures. If you are still using the CommonJS method of writing modules, the previous approach is still supported:</p>\n<md-code-block lang="js" code="\'Y29uc3QgZWNoYXJ0cyA9IHJlcXVpcmUoJ2VjaGFydHMvbGliL2VjaGFydHMnKTsKcmVxdWlyZSgnZWNoYXJ0cy9saWIvY2hhcnQvYmFyJyk7CnJlcXVpcmUoJ2VjaGFydHMvbGliL2NvbXBvbmVudC9ncmlkJyk7\'" line-highlights="\'\'" />\n<p>Second, because our source code has been rewritten using TypeScript, <code>v5</code> will no longer support importing files from <code>echarts/src</code>. You need to change it to import from <code>echarts/lib</code>.</p>\n<h4 id="dependency-changes" tabindex="-1">Dependency Changes</h4>\n<blockquote>\n<p>Note: This section is only for developers who use tree-shaking interfaces to ensure a minimal bundle size, not for those who imports the whole package.</p>\n</blockquote>\n<p>In order to keep the size of the bundle small enough, we remove some dependencies that would have been imported by default. For example, as mentioned above, when using the new on-demand interface, <code>CanvasRenderer</code> is no longer included by default, which ensures that unneeded Canvas rendering code is not imported when only SVG rendering mode is used, and in addition, the following dependencies are adjusted.</p>\n<ul>\n<li>The right-angle coordinate system component is no longer introduced by default when using line charts and bar charts, so the following introduction method was used before</li>\n</ul>\n<md-code-block lang="js" code="\'Y29uc3QgZWNoYXJ0cyA9IHJlcXVpcmUoJ2VjaGFydHMvbGliL2VjaGFydHMnKTsKcmVxdWlyZSgnZWNoYXJ0cy9saWIvY2hhcnQvYmFyJyk7CnJlcXVpcmUoJ2VjaGFydHMvbGliL2NoYXJ0L2xpbmUnKTs\'" line-highlights="\'\'" />\n<p>Need to introduce the <code>grid</code> component separately again</p>\n<md-code-block lang="js" code="\'cmVxdWlyZSgnZWNoYXJ0cy9saWIvY29tcG9uZW50L2dyaWQnKTs\'" line-highlights="\'\'" />\n<p>Reference issues: <a href="https://github.com/apache/echarts/issues/14080">#14080</a>, <a href="https://github.com/apache/echarts/issues/13764">#13764</a></p>\n<ul>\n<li><code>aria</code> components are no longer imported by default. You need import it manually if necessary.</li>\n</ul>\n<md-code-block lang="js" code="\'aW1wb3J0IHsgQXJpYUNvbXBvbmVudCB9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7CmVjaGFydHMudXNlKEFyaWFDb21wb25lbnQpOw\'" line-highlights="\'\'" />\n<p>Or</p>\n<md-code-block lang="js" code="\'cmVxdWlyZSgnZWNoYXJ0cy9saWIvY29tcG9uZW50L2FyaWEnKTs\'" line-highlights="\'\'" />\n<h3 id="built-in-geojson-removed" tabindex="-1">Built-in GeoJSON Removed</h3>\n<p><code>v5</code> removes the built-in geoJSON (previously in the <code>echarts/map</code> folder). These geoJSON files were always sourced from third parties. If users still need them, they can go get them from the old version, or find more appropriate data and register it with ECharts via the registerMap interface.</p>\n<h3 id="browser-compatibility" tabindex="-1">Browser Compatibility</h3>\n<p>IE8 is no longer supported by <code>v5</code>. We no longer maintain and upgrade the previous <a href="https://github.com/ecomfe/zrender/tree/4.3.2/src/vml">VML renderer</a> for IE8 compatibility. If developers have a strong need for a VML renderer, they are welcome to submit a pull request to upgrade the VML renderer or maintain a separate third-party VML renderer, as we support registration of standalone renderers starting with <code>v5.0.1</code>.</p>\n<h3 id="configuration-item-adjustment" tabindex="-1">Configuration Item Adjustment</h3>\n<h4 id="visual-style-settings-priority-changes" tabindex="-1">Visual Style Settings Priority Changes</h4>\n<p>The priority of the visuals between <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> and <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> are reversed since <code>v5</code>.</p>\n<p>That is, previously in <code>v4</code>, the visuals (i.e., color, symbol, symbolSize, ...) that generated by <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> has the highest priority, which will overwrite the same visuals settings in <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a>. That brought troubles when needing to specify specific style to some certain data items while using <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a>. Since <code>v5</code>, the visuals specified in <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> has the highest priority.</p>\n<p>In most cases, users will probably not notice this change when migrating from <code>v4</code> to <code>v5</code>. But users can still check that if <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> and <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> are both specified.</p>\n<h4 id="padding-for-rich-text" tabindex="-1"><code>padding</code> for Rich Text</h4>\n<p><code>v5</code> adjusts the <a href="https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding">rich.?.padding</a> to make it more compliant with CSS specifications. In <code>v4</code>, for example <code>rich. .padding: [11, 22, 33, 44]</code> means that <code>padding-top</code> is <code>33</code> and <code>padding-bottom</code> is <code>11</code>. The position of the top and bottom is adjusted in <code>v5</code>, <code>rich. .padding: [11, 22, 33, 44]</code> means that <code>padding-top</code> is <code>11</code> and <code>padding-bottom</code> is <code>33</code>.</p>\n<p>If the user is using <a href="https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding">rich.?.padding</a>, this order needs to be adjusted.</p>\n<h2 id="extensions" tabindex="-1">Extensions</h2>\n<p>These extensions need to be upgraded to new version to support echarts <code>v5</code>:</p>\n<ul>\n<li><a href="https://github.com/ecomfe/echarts-gl">echarts-gl</a></li>\n<li><a href="https://github.com/ecomfe/echarts-wordcloud">echarts-wordcloud</a></li>\n<li><a href="https://github.com/ecomfe/echarts-liquidfill">echarts-liquidfill</a></li>\n</ul>\n<h2 id="deprecated-apis" tabindex="-1">Deprecated APIs</h2>\n<p>Some of the API and echarts options are deprecated since <code>v5</code>, but are still backward compatible. Users can <strong>keep using these deprecated API</strong>, with only some warning will be printed to console in dev mode. But if users have spare time, it is recommended to upgraded to new API for the consideration of long term maintenance.</p>\n<p>The deprecated API and their corresponding new API are listed as follows:</p>\n<ul>\n<li>Transform related props of a graphic element are changed:\n<ul>\n<li>Changes:\n<ul>\n<li><code>position: [number, number]</code> are changed to <code>x: number</code>/<code>y: number</code>.</li>\n<li><code>scale: [number, number]</code> are changed to <code>scaleX: number</code>/<code>scaleY: number</code>.</li>\n<li><code>origin: [number, number]</code> are changed to <code>originX: number</code>/<code>originY: number</code>.</li>\n</ul>\n</li>\n<li>The <code>position</code>, <code>scale</code> and <code>origin</code> are still supported but deprecated.</li>\n<li>It effects these places:\n<ul>\n<li>In the <code>graphic</code> components: the declarations of each element.</li>\n<li>In <code>custom series</code>: the declarations of each element in the return of <code>renderItem</code>.</li>\n<li>Directly use zrender graphic elements.</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>Text related props on graphic elements are changed:\n<ul>\n<li>Changes:\n<ul>\n<li>The declaration of attached text (or say, rect text) are changed.\n<ul>\n<li>Prop <code>style.text</code> are deprecated in elements except <code>Text</code>. Instead, Prop set <code>textContent</code> and <code>textConfig</code> are provided to support more powerful capabilities.</li>\n<li>These related props at the left part below are deprecated. Use the right part below instead.\n<ul>\n<li>textPosition => textConfig.position</li>\n<li>textOffset => textConfig.offset</li>\n<li>textRotation => textConfig.rotation</li>\n<li>textDistance => textConfig.distance</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>The props at the left part below are deprecated in <code>style</code> and <code>style.rich.?</code>. Use the props at the right part below instead.\n<ul>\n<li>textFill => fill</li>\n<li>textStroke => stroke</li>\n<li>textFont => font</li>\n<li>textStrokeWidth => lineWidth</li>\n<li>textAlign => align</li>\n<li>textVerticalAlign => verticalAlign</li>\n<li>textLineHeight => lineHeight</li>\n<li>textWidth => width</li>\n<li>textHeight => hight</li>\n<li>textBackgroundColor => backgroundColor</li>\n<li>textPadding => padding</li>\n<li>textBorderColor => borderColor</li>\n<li>textBorderWidth => borderWidth</li>\n<li>textBorderRadius => borderRadius</li>\n<li>textBoxShadowColor => shadowColor</li>\n<li>textBoxShadowBlur => shadowBlur</li>\n<li>textBoxShadowOffsetX => shadowOffsetX</li>\n<li>textBoxShadowOffsetY => shadowOffsetY</li>\n</ul>\n</li>\n<li>Note: these props are not changed:\n<ul>\n<li>textShadowColor</li>\n<li>textShadowBlur</li>\n<li>textShadowOffsetX</li>\n<li>textShadowOffsetY</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>It effects these places:\n<ul>\n<li>In the <code>graphic</code> components: the declarations of each element. [compat, but not accurately the same in some complicated cases.]</li>\n<li>In <code>custom series</code>: the declarations of each element in the return of <code>renderItem</code>. [compat, but not accurately the same in some complicated cases].</li>\n<li>Directly use zrender API to create graphic elements. [No compat, breaking change].</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>API on chart instance:\n<ul>\n<li><code>chart.one(...)</code> is deprecated.</li>\n</ul>\n</li>\n<li><code>label</code>:\n<ul>\n<li>In props <code>color</code>, <code>textBorderColor</code>, <code>backgroundColor</code> and <code>borderColor</code>, the value <code>\'auto\'</code> is deprecated. Use the value <code>\'inherit\'</code> instead.</li>\n</ul>\n</li>\n<li><code>hoverAnimation</code>:\n<ul>\n<li>option <code>series.hoverAnimation</code> is deprecated. Use <code>series.emphasis.scale</code> instead.</li>\n</ul>\n</li>\n<li><code>line series</code>:\n<ul>\n<li>option <code>series.clipOverflow</code> is deprecated. Use <code>series.clip</code> instead.</li>\n</ul>\n</li>\n<li><code>custom series</code>:\n<ul>\n<li>In <code>renderItem</code>, the <code>api.style(...)</code> and <code>api.styleEmphasis(...)</code> are deprecated. Because it is not really necessary and hard to ensure backward compatibility. Users can fetch system designated visual by <code>api.visual(...)</code>.</li>\n</ul>\n</li>\n<li><code>sunburst series</code>:\n<ul>\n<li>Action type <code>highlight</code> is deprecated. Use <code>sunburstHighlight</code> instead.</li>\n<li>Action type <code>downplay</code> is deprecated. Use <code>sunburstUnhighlight</code> instead.</li>\n<li>option <code>series.downplay</code> is deprecated. Use <code>series.blur</code> instead.</li>\n<li>option <code>series.highlightPolicy</code> is deprecated. Use <code>series.emphasis.focus</code> instead.</li>\n</ul>\n</li>\n<li><code>pie series</code>:\n<ul>\n<li>The action type at the left part below are deprecated. Use the right part instead:\n<ul>\n<li><code>pieToggleSelect</code> => <code>toggleSelect</code></li>\n<li><code>pieSelect</code> => <code>select</code></li>\n<li><code>pieUnSelect</code> => <code>unselect</code></li>\n</ul>\n</li>\n<li>The event type at the left part below are deprecated. Use the right part instead:\n<ul>\n<li><code>pieselectchanged</code> => <code>selectchanged</code></li>\n<li><code>pieselected</code> => <code>selected</code></li>\n<li><code>pieunselected</code> => <code>unselected</code></li>\n</ul>\n</li>\n<li>option <code>series.label.margin</code> is deprecated. Use <code>series.label.edgeDistance</code> instead.</li>\n<li>option <code>series.clockWise</code> is deprecated. Use <code>series.clockwise</code> instead.</li>\n<li>option <code>series.hoverOffset</code> is deprecated. Use <code>series.emphasis.scaleSize</code> instead.</li>\n</ul>\n</li>\n<li><code>map series</code>:\n<ul>\n<li>The action type at the left part below are deprecated. Use the right part instead:\n<ul>\n<li><code>mapToggleSelect</code> => <code>toggleSelect</code></li>\n<li><code>mapSelect</code> => <code>select</code></li>\n<li><code>mapUnSelect</code> => <code>unselect</code></li>\n</ul>\n</li>\n<li>The event type at the left part below are deprecated. Use the right part instead:\n<ul>\n<li><code>mapselectchanged</code> => <code>selectchanged</code></li>\n<li><code>mapselected</code> => <code>selected</code></li>\n<li><code>mapunselected</code> => <code>unselected</code></li>\n</ul>\n</li>\n<li>option <code>series.mapType</code> is deprecated. Use <code>series.map</code> instead.</li>\n<li>option <code>series.mapLocation</code> is deprecated.</li>\n</ul>\n</li>\n<li><code>graph series</code>:\n<ul>\n<li>option <code>series.focusNodeAdjacency</code> is deprecated. Use <code>series.emphasis: { focus: \'adjacency\'}</code> instead.</li>\n</ul>\n</li>\n<li><code>gauge series</code>:\n<ul>\n<li>option <code>series.clockWise</code> is deprecated. Use <code>series.clockwise</code> instead.</li>\n<li>option <code>series.hoverOffset</code> is deprecated. Use <code>series.emphasis.scaleSize</code> instead.</li>\n</ul>\n</li>\n<li><code>dataZoom component</code>:\n<ul>\n<li>option <code>dataZoom.handleIcon</code> need prefix <code>path://</code> if using SVGPath.</li>\n</ul>\n</li>\n<li><code>radar</code>:\n<ul>\n<li>option <code>radar.name</code> is deprecated. Use <code>radar.axisName</code> instead.</li>\n<li>option <code>radar.nameGap</code> is deprecated. Use <code>radar.axisNameGap</code> instead.</li>\n</ul>\n</li>\n<li>Parse and format:\n<ul>\n<li><code>echarts.format.formatTime</code> is deprecated. Use <code>echarts.time.format</code> instead.</li>\n<li><code>echarts.number.parseDate</code> is deprecated. Use <code>echarts.time.parse</code> instead.</li>\n<li><code>echarts.format.getTextRect</code> is deprecated.</li>\n</ul>\n</li>\n</ul>\n',postPath:"en/basics/release-note/v5-upgrade-guide",title:"Migration from v4 to v5 - What's New - Basics"}],fetch:{},error:null,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:o},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:r,draft:e},{title:"寻求帮助",dir:l},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"v4 升级 v5 指南",dir:h},{title:5.2,dir:p},{title:5.3,dir:g},{title:5.4,dir:u}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:f,draft:e},{title:"系列",dir:y,draft:e},{title:"样式",dir:v},{title:"数据集",dir:I},{title:"数据转换",dir:w},{title:"坐标系",dir:C,draft:e},{title:"坐标轴",dir:x},{title:"视觉映射",dir:i},{title:"图例",dir:S},{title:"事件与行为",dir:A}]},{title:"应用篇",dir:k,children:[{title:"常用图表类型",dir:B,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:W},{title:"堆叠柱状图",dir:G},{title:"动态排序柱状图",dir:J},{title:"极坐标系柱状图",dir:Y,draft:e},{title:"阶梯瀑布图",dir:M},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:N,children:[{title:"基础折线图",dir:Z},{title:"堆叠折线图",dir:U},{title:"区域面积图",dir:T},{title:"平滑曲线图",dir:V},{title:"阶梯线图",dir:j}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:z},{title:"圆环图",dir:L},{title:"南丁格尔图（玫瑰图）",dir:R}]},{title:"散点图",dir:X,children:[{title:"基础散点图",dir:P}]}]},{title:H,dir:t,draft:e},{title:"跨平台方案",dir:F,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:E},{title:"数据下钻",dir:D,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:O}]},{title:"动画",dir:Q,children:[{title:"数据过渡动画",dir:K}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e},{title:"智能指针吸附",dir:$}]}]},{title:"最佳实践",dir:ee,children:[{title:H,dir:t,draft:e},{title:te,dir:ie},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:oe}]}],en:[{title:"Get Started",dir:o},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:r,draft:e},{title:"Get Help",dir:l},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:s},{title:"Migration from v4 to v5",dir:h},{title:5.2,dir:p},{title:5.3,dir:g},{title:5.4,dir:u}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:f,draft:e},{title:"Series",dir:y,draft:e},{title:"Style",dir:v},{title:"Dataset",dir:I},{title:"Data Transform",dir:w},{title:"Coordinate",dir:C,draft:e},{title:"Axis",dir:x},{title:"Visual Mapping",dir:i},{title:"Legend",dir:S},{title:"Event and Action",dir:A}]},{title:"How To Guides",dir:k,children:[{title:"Common Charts",dir:B,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:W},{title:"Stacked Bar",dir:G},{title:"Bar Racing",dir:J},{title:"Bar Polar",dir:Y,draft:e},{title:"Waterfall",dir:M}]},{title:"Line",dir:N,children:[{title:"Basic Line",dir:Z},{title:"Stacked Line",dir:U},{title:"Area Chart",dir:T},{title:"Smoothed Line",dir:V},{title:"Step Line",dir:j}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:z},{title:"Ring Style",dir:L},{title:"Rose Style",dir:R}]},{title:"Scatter",dir:X,children:[{title:"Basic Scatter",dir:P}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:E},{title:"Drilldown",dir:D,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:O}]},{title:"Animation",dir:Q,children:[{title:"Data Transition",dir:K}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e},{title:"Intelligent Pointer Snapping",dir:$}]}]},{title:"Best Practices",dir:ee,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:te,dir:ie},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:oe}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:e,routePath:"/en/basics/release-note/v5-upgrade-guide",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:null}}}}(!0,"mobile","visual-map","get-started","basics","download","import","resource","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","5-3-0","5-4-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","how-to","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","dynamic-data","drilldown","rich-text","animation","transition","interaction","connect","coarse-pointer","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/4d2a12b.js" defer></script><script src="/handbook/_nuxt/js/43cd67c0cf5a9d972051.js" defer></script><script src="/handbook/_nuxt/js/9d86a6602b3f4dd6c979.js" defer></script><script src="/handbook/_nuxt/js/fa73816a85b29fbf7562.js" defer></script><script src="/handbook/_nuxt/js/b964c20bb1562bc48da6.js" defer></script><script src="/handbook/_nuxt/js/60d2f1dbd961abb7604b.js" defer></script> |
| <script type="text/javascript">document.getElementById("nav-doc").className="active"</script> |
| <script src="https://fastly.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script> |
| <script src="https://fastly.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> |
| <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> |
| <script async src="https://www.googletagmanager.com/gtag/js?id=UA-141228404-1"></script> |
| <script>var _hmt=_hmt||[];function gtag(){dataLayer.push(arguments)}!function(){var e=document.createElement("script"),t=(e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395",document.getElementsByTagName("script")[0]);t.parentNode.insertBefore(e,t)}(),window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-141228404-1")</script> |
| </body> |
| </html> |
