| <!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>v4 升级 v5 指南 - 版本特性 - 入门篇 - 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="zh"><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/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1" 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/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/handbook/zh/basics/release-note/v5-upgrade-guide">v5 升级指南</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码（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/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<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">活动<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">捐赠<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">鸣谢<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("en")'>EN</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="搜索手册"> <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/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-up"></span></a> <ul class="nav bd-sidenav level2"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">v4 升级 v5 指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/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/zh/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/zh/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">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</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">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</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">柱状图</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/zh/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</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">折线图</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/zh/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</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">饼图</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/zh/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图（玫瑰图）</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">散点图</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/zh/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</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">跨平台方案</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/zh/how-to/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</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">数据处理</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/zh/how-to/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</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">标签</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/zh/how-to/label/rich-text" class="nav-link"><span class="title">富文本标签</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">动画</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/zh/how-to/animation/transition" class="nav-link"><span class="title">数据过渡动画</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">交互</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/zh/how-to/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/how-to/interaction/coarse-pointer" class="nav-link"><span class="title">智能指针吸附</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">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/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/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</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">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</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-%E5%8D%87%E7%BA%A7%E6%8C%87%E5%8D%97" tabindex="-1">Apache ECharts 5 升级指南</h1> <p>本指南面向那些希望将 echarts 4.x（以下简称 <code>v4</code>）升级到 echarts 5.x（以下简称 <code>v5</code>）的用户。大家可以在 <a href="zh/basics/release-note/v5-feature">ECharts 5 新特性</a> 中了解这次<code>v5</code>带来了哪些值得升级的新特性。在绝大多数情况下，开发者用不着为这个升级做什么额外的事，因为 echarts 一直尽可能地保持 API 的稳定和向后兼容。但是，<code>v5</code> 仍然带来了一些非兼容改动，需要特别关注。此外，在一些情况下，<code>v5</code> 提供了更好的 API 用来取代之前的 API，这些被取代的 API 将不再被推荐使用（当然，我们尽量兼容了这些改动）。我们会在这篇文档里尽量详尽得解释这些改动。</p> <h2 id="%E9%9D%9E%E5%85%BC%E5%AE%B9%E6%80%A7%E6%94%B9%E5%8F%98" tabindex="-1">非兼容性改变</h2> <h3 id="%E9%BB%98%E8%AE%A4%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89" tabindex="-1">默认主题（theme）</h3> <p>首先是默认主题的改动，<code>v5</code> 在配色等主题设计上做了很多的优化来达到更好的视觉效果。如果大家依旧想保留旧版本的颜色，可以手动声明颜色，如下：</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>或者，做一个简单的 <code>v4</code> 主题：</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="%E5%BC%95%E7%94%A8-echarts" tabindex="-1">引用 ECharts</h3> <h4 id="%E5%8E%BB%E9%99%A4-default-exports-%E7%9A%84%E6%94%AF%E6%8C%81" tabindex="-1">去除 default exports 的支持</h4> <p>如果使用者在 <code>v4</code> 中这样引用了 echarts：</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">// 或者按需引入</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>这两种方式，<code>v5</code> 中不再支持了。</p> <p>使用者需要如下更改代码解决这个问题：</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">// 按需引入</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="%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5" tabindex="-1">按需引入</h4> <p>在 5.0.1 中，我们引入了新的<a href="zh/basics/import">按需引入接口</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">// 注意，新的接口中默认不再包含 Canvas 渲染器，需要显示引入，如果需要使用 SVG 渲染模式则使用 SVGRenderer</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>如果之前是使用<code>import 'echarts/lib/chart/bar'</code>引入，新的接口对应的是<code>import {BarChart} from 'echarts/charts'</code>;</p> <p>为了方便大家了解自己的配置项需要引入哪些模块，我们新的示例编辑页面添加了生成按需引入代码的功能，大家可以在示例编辑页的<code>完整代码</code>标签下选中按需引入后查看需要引入的模块以及相关代码。</p> <p>在大部分情况下，我们都推荐大家尽可能用这套新的按需引入接口，它可以最大程度的利用打包工具 tree-shaking 的能力，并且可以有效解决命名空间冲突的问题而且防止了内部结构的暴露。如果你依旧在使用 CommonJS 的模块写法，之前的方式我们也依旧是支持的：</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>其次，因为我们的源代码已使用 TypeScript 重写，<code>v5</code> 将不再支持从 <code>echarts/src</code> 引用文件，需要改为从<code>echarts/lib</code>引入。</p> <h4 id="%E4%BE%9D%E8%B5%96%E8%B0%83%E6%95%B4" tabindex="-1">依赖调整</h4> <blockquote><p>注意：该部分只针对为了保证较小的打包体积而是用按需引入接口的开发者，如果是全量引入的不需要关注</p></blockquote> <p>为了保证 tree-shaking 后的体积足够小，我们去除了一些之前会默认被打包进来的依赖。比如前面提到的在使用新的按需引入接口的时候，<code>CanvasRenderer</code>将不再被默认引入，这样可以保证只需要使用 SVG 渲染模式的时候不会把不需要的 Canvas 渲染代码也一起打包进来，除此之外，还有下面这些依赖的改动：</p> <ul><li>在使用折线图，柱状图中不再默认引入直角坐标系组件，因此之前使用下面的引入方式</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>需要再单独引入<code>grid</code>组件</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>参考 issue：<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>组件，如果需要的话可以手动引入。</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>或者：</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="%E5%8E%BB%E9%99%A4%E5%86%85%E7%BD%AE%E7%9A%84-geojson" tabindex="-1">去除内置的 geoJSON</h3> <p><code>v5</code> 移除了内置的 geoJSON（原先在 <code>echarts/map</code> 文件夹下）。这些 geoJSON 文件本就一直来源于第三方。如果使用者仍然需要他们，可以去从老版本中得到，或者自己寻找更合适的数据然后通过 registerMap 接口注册到 ECharts 中。</p> <h3 id="%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7" tabindex="-1">浏览器兼容性</h3> <p><code>v5</code> 不再支持 IE8 浏览器。我们不再继续维护和升级之前的 <a href="https://github.com/ecomfe/zrender/tree/4.3.2/src/vml">VML 渲染器</a> 来着实现 IE8 的兼容。如果使用者确实有很强的需求，那么欢迎提 pull request 来升级 VML 渲染器，或者单独维护一个第三方 VML 渲染器，我们从 <code>v5.0.1</code> 开始支持注册独立的渲染器了。</p> <h3 id="%E9%85%8D%E7%BD%AE%E9%A1%B9%E8%B0%83%E6%95%B4" tabindex="-1">配置项调整</h3> <h4 id="%E8%A7%86%E8%A7%89%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE%E7%9A%84%E4%BC%98%E5%85%88%E7%BA%A7%E6%94%B9%E5%8F%98" tabindex="-1">视觉样式设置的优先级改变</h4> <p><code>v5</code> 对调了 <a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 和 <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> 的视觉样式优先级。</p> <p>具体来说，<code>v4</code> 中，<a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 中生成的视觉样式（如，颜色、图形类型、图形尺寸等）的优先级，比开发者在 <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> 中设置的样式的优先级高，也就是说如果他们同时设置的话，前者会生效而后者不会生效。这带来了些麻烦：假如使用者在使用 <a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 时，又想针对某个数据项对应的图形，设置 <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> 样式，则做不到。<code>v5</code> 中于是提高了 <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> 的优先级，使他们能生效。</p> <p>在绝大多处情况下，这个变化并不会带来什么影响。但是为保险起见，使用者在升级 <code>v4</code> 到 <code>v5</code> 时，还是可以检查下，是否有同时使用 <a href="https://echarts.apache.org/option.html#visualMap">visualMap</a> 和 <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> 的情况。</p> <h4 id="%E5%AF%8C%E6%96%87%E6%9C%AC%E7%9A%84-padding" tabindex="-1">富文本的 <code>padding</code></h4> <p><code>v5</code> 调整了 <a href="https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding">rich.?.padding</a> 的格式使其更符合 CSS 的规范。<code>v4</code> 里，例如 <code>rich.?.padding: [11, 22, 33, 44]</code> 表示 <code>padding-top</code> 是 <code>33</code> 且 <code>padding-bottom</code> 是 <code>11</code>。在 <code>v5</code> 中调整了上下的位置，<code>rich.?.padding: [11, 22, 33, 44]</code> 表示 <code>padding-top</code> 是 <code>11</code> 且 <code>padding-bottom</code> 是 <code>33</code>。</p> <p>如果使用者有在使用 <a href="https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding">rich.?.padding</a>，需要注意调整下这个顺序。</p> <h2 id="%E6%89%A9%E5%B1%95%E7%9A%84%E5%85%BC%E5%AE%B9" tabindex="-1">扩展的兼容</h2> <p>如果想要升级到 <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="%E4%B8%8D%E5%86%8D%E6%8E%A8%E8%8D%90%E4%BD%BF%E7%94%A8%E7%9A%84-api" tabindex="-1">不再推荐使用的 API</h2> <p>一些 API（包括接口调用，事件监听和配置项）在 <code>v5</code> 中不再推荐使用。当然，使用者仍然可以用他们，只是会在 dev 模式下，在 console 中打印一些 warning，并不会影响功能。但是从长远维护考虑，我们还是推荐升级成新的 API。</p> <p>下面是不再推荐使用的 API 以及推荐的新 API：</p> <ul><li>图形元素 transform 相关的属性被改变了： |
| <ul><li>变更点： |
| <ul><li><code>position: [number, number]</code> 改为 <code>x: number</code> / <code>y: number</code>。</li> <li><code>scale: [number, number]</code> 改为 <code>scaleX: number</code> / <code>scaleY: number</code>。</li> <li><code>origin: [number, number]</code> 改为 <code>originX: number</code> / <code>originY: number</code>。</li></ul></li> <li><code>position</code>、<code>scale</code> 和 <code>origin</code> 仍然支持，但已不推荐使用。</li> <li>它影响到这些地方： |
| <ul><li>在<code>graphic</code>组件中：每个元素的声明。</li> <li>在 <code>custom series</code> 中：<code>renderItem</code> 返回的每个元素的声明。</li> <li>直接使用 zrender 图形元素时。</li></ul></li></ul></li> <li>Text 相关的属性被改变： |
| <ul><li>变更点： |
| <ul><li>图形元素附带的文本的声明方式被改变： |
| <ul><li>除了 <code>Text</code> 元素之外，其他元素中的属性 <code>style.text</code> 都不推荐使用了。取而代之的是新属性 <code>textContent</code> 和 <code>textConfig</code>，他们能带来更丰富的功能。</li> <li>其中，下面左边部分的这些属性已不推荐使用或废弃。请使用下面的右边部分的属性： |
| <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>下面左边部分的属性在 <code>style</code> 和 <code>style.rich.?</code> 中已不推荐使用或废弃。请使用下面右边的属性： |
| <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>注：这些属性并没有变化： |
| <ul><li>textShadowColor</li> <li>textShadowBlur</li> <li>textShadowOffsetX</li> <li>textShadowOffsetY</li></ul></li></ul></li> <li>它影响到这些地方： |
| <ul><li>在 <code>graphic</code> 组件中：每个元素的声明。（原来的写法仍兼容，但在一些很复杂的情况下，可能效果不完全一致。）</li> <li>在自定义系列（<code>custom series</code>）中：<code>renderItem</code> 返回中的每个元素的声明。（原来的写法仍兼容，但在一些很复杂的情况下，可能效果不完全一致。）</li> <li>直接使用 zrender API 创建图形元素。（不再兼容，原写法被废弃。）</li></ul></li></ul></li> <li>图表实例上的 API： |
| <ul><li><code>chart.one(...)</code> 已不推荐使用。</li></ul></li> <li><code>label</code>。 |
| <ul><li>属性 <code>color</code>、<code>textBorderColor</code>、<code>backgroundColor</code>、<code>borderColor</code> 中，值 <code>auto</code> 已不推荐使用，而推荐使用 <code>'inherit'</code> 代替。</li></ul></li> <li><code>hoverAnimation</code>: |
| <ul><li>选项 <code>series.hoverAnimation</code> 已不推荐使用，使用 <code>series.emphasis.scale</code> 代替之。</li></ul></li> <li>折线图（<code>line series</code>）： |
| <ul><li>选项 <code>series.clipOverflow</code> 已不推荐使用，使用 <code>series.clip</code> 代替之。</li></ul></li> <li>自定义系列（<code>custom series</code>）。 |
| <ul><li>在 <code>renderItem</code> 中，<code>api.style(...)</code> 和 <code>api.styleEmphasis(...)</code> 已不推荐使用。因为这两个接口其实并不真正必要，也很难保证向后兼容。用户可以通过 <code>api.visual(...)</code> 获取系统自动分配的视觉信息。</li></ul></li> <li>旭日图（<code>sunburst</code>）： |
| <ul><li>动作类型 <code>highlight</code> 已被弃用，请使用 <code>sunburstHighlight</code> 代替。</li> <li>动作类型 <code>downplay</code> 已被弃用，请使用 <code>sunburstUnhighlight</code> 代替。</li> <li>选项 <code>series.downplay</code> 已被弃用，请使用 <code>series.blur</code> 代替。</li> <li>选项 <code>series.highlightPolicy</code> 已不适用，请使用 <code>series.emphasis.focus</code> 代替。</li></ul></li> <li>饼图（<code>pie</code>）： |
| <ul><li>下面左边部分的 action 名已经不推荐使用。请使用右边的 action 名。 |
| <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>下面左边部分的事件名已经不推荐使用。请使用右边的事件名。 |
| <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>选项 <code>series.label.margin</code> 已经不推荐使用。使用 <code>series.label.edgeDistance</code> 代替。</li> <li>选项 <code>series.clockWise</code> 已经不推荐使用。使用 <code>series.clockwise</code> 代替。</li> <li>选项 <code>series.hoverOffset</code> 已经不推荐使用。使用 <code>series.emphasis.scaleSize</code> 代替。</li></ul></li> <li>地图（<code>map series</code>）： |
| <ul><li>下文左边部分的 action 名已经不推荐使用。请使用右边的 action 名。 |
| <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>下面左边部分的事件名已经不推荐使用。请使用右边的事件名。 |
| <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>选项 <code>series.mapType</code> 已经不推荐使用。使用 <code>series.map</code> 代替。</li> <li>选项 <code>series.mapLocation</code> 已经不推荐使用。</li></ul></li> <li>关系图（<code>graph series</code>）： |
| <ul><li>选项 <code>series.focusNodeAdjacency</code> 已经不推荐使用。使用 <code>series.emphasis: { focus: 'adjacency'}</code> 代替。</li></ul></li> <li>仪表盘（<code>gauge series</code>）： |
| <ul><li>选项 <code>series.clockWise</code> 已经不推荐使用。使用 <code>series.clockwise</code> 代替。</li> <li>选项 <code>series.hoverOffset</code> 已经不推荐使用。使用 <code>series.emphasis.scaleSize</code> 代替。</li></ul></li> <li><code>dataZoom</code> 组件： |
| <ul><li>选项 <code>dataZoom.handleIcon</code> 如果使用 <code>SVGPath</code>，需要前缀 <code>path://</code>。</li></ul></li> <li>雷达图（<code>radar</code>）： |
| <ul><li>选项 <code>radar.name</code> 已经不推荐使用。使用 <code>radar.axisName</code> 代替。</li> <li>选项 <code>radar.nameGap</code> 已经不推荐使用。使用 <code>radar.axisNameGap</code> 代替。</li></ul></li> <li>Parse and format： |
| <ul><li><code>echarts.format.formatTime</code> 已经不推荐使用。使用 <code>echarts.time.format</code> 代替。</li> <li><code>echarts.number.parseDate</code> 已经不推荐使用。使用 <code>echarts.time.parse</code> 代替。</li> <li><code>echarts.format.getTextRect</code> 已经不推荐使用。</li></ul></li></ul></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/basics/release-note/v5-upgrade-guide.md" title="编辑本文" 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">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60" loading="lazy"> <span>pissang</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60" loading="lazy"> <span>Ovilia</span></a><a href="https://github.com/fredricen" target="_blank" class="post-contributor"><img alt="fredricen" src="https://avatars.githubusercontent.com/fredricen?size=60" loading="lazy"> <span>fredricen</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,i,t,l,d,c,o,a,n,r,s,h,p,g,m,u,b,y,C,A,E,f,v,I,B,S,x,W,J,M,Y,N,w,Z,k,G,V,j,L,z,F,D,X,O,P,H,R,T,Q,U,K,q,_,$,ee,ie,te,le){return{layout:"default",data:[{html:'<h1 id="apache-echarts-5-%E5%8D%87%E7%BA%A7%E6%8C%87%E5%8D%97" tabindex="-1">Apache ECharts 5 升级指南</h1>\n<p>本指南面向那些希望将 echarts 4.x（以下简称 <code>v4</code>）升级到 echarts 5.x（以下简称 <code>v5</code>）的用户。大家可以在 <a href="zh/basics/release-note/v5-feature">ECharts 5 新特性</a> 中了解这次<code>v5</code>带来了哪些值得升级的新特性。在绝大多数情况下，开发者用不着为这个升级做什么额外的事，因为 echarts 一直尽可能地保持 API 的稳定和向后兼容。但是，<code>v5</code> 仍然带来了一些非兼容改动，需要特别关注。此外，在一些情况下，<code>v5</code> 提供了更好的 API 用来取代之前的 API，这些被取代的 API 将不再被推荐使用（当然，我们尽量兼容了这些改动）。我们会在这篇文档里尽量详尽得解释这些改动。</p>\n<h2 id="%E9%9D%9E%E5%85%BC%E5%AE%B9%E6%80%A7%E6%94%B9%E5%8F%98" tabindex="-1">非兼容性改变</h2>\n<h3 id="%E9%BB%98%E8%AE%A4%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89" tabindex="-1">默认主题（theme）</h3>\n<p>首先是默认主题的改动，<code>v5</code> 在配色等主题设计上做了很多的优化来达到更好的视觉效果。如果大家依旧想保留旧版本的颜色，可以手动声明颜色，如下：</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICBjb2xvcjogWwogICAgJyNjMjM1MzEnLAogICAgJyMyZjQ1NTQnLAogICAgJyM2MWEwYTgnLAogICAgJyNkNDgyNjUnLAogICAgJyM5MWM3YWUnLAogICAgJyM3NDlmODMnLAogICAgJyNjYTg2MjInLAogICAgJyNiZGEyOWEnLAogICAgJyM2ZTcwNzQnLAogICAgJyM1NDY1NzAnLAogICAgJyNjNGNjZDMnCiAgXQogIC8vIC4uLgp9KTs\'" line-highlights="\'\'" />\n<p>或者，做一个简单的 <code>v4</code> 主题：</p>\n<md-code-block lang="js" code="\'dmFyIHRoZW1lRUM0ID0gewogIGNvbG9yOiBbCiAgICAnI2MyMzUzMScsCiAgICAnIzJmNDU1NCcsCiAgICAnIzYxYTBhOCcsCiAgICAnI2Q0ODI2NScsCiAgICAnIzkxYzdhZScsCiAgICAnIzc0OWY4MycsCiAgICAnI2NhODYyMicsCiAgICAnI2JkYTI5YScsCiAgICAnIzZlNzA3NCcsCiAgICAnIzU0NjU3MCcsCiAgICAnI2M0Y2NkMycKICBdCn07CnZhciBjaGFydCA9IGVjaGFydHMuaW5pdChkb20sIHRoZW1lRUM0KTsKY2hhcnQuc2V0T3B0aW9uKC8qIC4uLiAqLyk7\'" line-highlights="\'\'" />\n<h3 id="%E5%BC%95%E7%94%A8-echarts" tabindex="-1">引用 ECharts</h3>\n<h4 id="%E5%8E%BB%E9%99%A4-default-exports-%E7%9A%84%E6%94%AF%E6%8C%81" tabindex="-1">去除 default exports 的支持</h4>\n<p>如果使用者在 <code>v4</code> 中这样引用了 echarts：</p>\n<md-code-block lang="js" code="\'aW1wb3J0IGVjaGFydHMgZnJvbSAnZWNoYXJ0cyc7Ci8vIOaIluiAheaMiemcgOW8leWFpQppbXBvcnQgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2xpYi9lY2hhcnRzJzs\'" line-highlights="\'\'" />\n<p>这两种方式，<code>v5</code> 中不再支持了。</p>\n<p>使用者需要如下更改代码解决这个问题：</p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzJzsKLy8g5oyJ6ZyA5byV5YWlCmltcG9ydCAqIGFzIGVjaGFydHMgZnJvbSAnZWNoYXJ0cy9saWIvZWNoYXJ0cyc7\'" line-highlights="\'\'" />\n<h4 id="%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5" tabindex="-1">按需引入</h4>\n<p>在 5.0.1 中，我们引入了新的<a href="zh/basics/import">按需引入接口</a></p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2NvcmUnOwppbXBvcnQgeyBCYXJDaGFydCB9IGZyb20gJ2VjaGFydHMvY2hhcnRzJzsKaW1wb3J0IHsgR3JpZENvbXBvbmVudCB9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7Ci8vIOazqOaEj--8jOaWsOeahOaOpeWPo-S4rem7mOiupOS4jeWGjeWMheWQqyBDYW52YXMg5riy5p-T5Zmo77yM6ZyA6KaB5pi-56S65byV5YWl77yM5aaC5p6c6ZyA6KaB5L2_55SoIFNWRyDmuLLmn5PmqKHlvI_liJnkvb_nlKggU1ZHUmVuZGVyZXIKaW1wb3J0IHsgQ2FudmFzUmVuZGVyZXIgfSBmcm9tICdlY2hhcnRzL3JlbmRlcmVycyc7CgplY2hhcnRzLnVzZShbQmFyQ2hhcnQsIEdyaWRDb21wb25lbnQsIENhbnZhc1JlbmRlcmVyXSk7\'" line-highlights="\'\'" />\n<p>如果之前是使用<code>import \'echarts/lib/chart/bar\'</code>引入，新的接口对应的是<code>import {BarChart} from \'echarts/charts\'</code>;</p>\n<p>为了方便大家了解自己的配置项需要引入哪些模块，我们新的示例编辑页面添加了生成按需引入代码的功能，大家可以在示例编辑页的<code>完整代码</code>标签下选中按需引入后查看需要引入的模块以及相关代码。</p>\n<p>在大部分情况下，我们都推荐大家尽可能用这套新的按需引入接口，它可以最大程度的利用打包工具 tree-shaking 的能力，并且可以有效解决命名空间冲突的问题而且防止了内部结构的暴露。如果你依旧在使用 CommonJS 的模块写法，之前的方式我们也依旧是支持的：</p>\n<md-code-block lang="js" code="\'Y29uc3QgZWNoYXJ0cyA9IHJlcXVpcmUoJ2VjaGFydHMvbGliL2VjaGFydHMnKTsKcmVxdWlyZSgnZWNoYXJ0cy9saWIvY2hhcnQvYmFyJyk7CnJlcXVpcmUoJ2VjaGFydHMvbGliL2NvbXBvbmVudC9ncmlkJyk7\'" line-highlights="\'\'" />\n<p>其次，因为我们的源代码已使用 TypeScript 重写，<code>v5</code> 将不再支持从 <code>echarts/src</code> 引用文件，需要改为从<code>echarts/lib</code>引入。</p>\n<h4 id="%E4%BE%9D%E8%B5%96%E8%B0%83%E6%95%B4" tabindex="-1">依赖调整</h4>\n<blockquote>\n<p>注意：该部分只针对为了保证较小的打包体积而是用按需引入接口的开发者，如果是全量引入的不需要关注</p>\n</blockquote>\n<p>为了保证 tree-shaking 后的体积足够小，我们去除了一些之前会默认被打包进来的依赖。比如前面提到的在使用新的按需引入接口的时候，<code>CanvasRenderer</code>将不再被默认引入，这样可以保证只需要使用 SVG 渲染模式的时候不会把不需要的 Canvas 渲染代码也一起打包进来，除此之外，还有下面这些依赖的改动：</p>\n<ul>\n<li>在使用折线图，柱状图中不再默认引入直角坐标系组件，因此之前使用下面的引入方式</li>\n</ul>\n<md-code-block lang="js" code="\'Y29uc3QgZWNoYXJ0cyA9IHJlcXVpcmUoJ2VjaGFydHMvbGliL2VjaGFydHMnKTsKcmVxdWlyZSgnZWNoYXJ0cy9saWIvY2hhcnQvYmFyJyk7CnJlcXVpcmUoJ2VjaGFydHMvbGliL2NoYXJ0L2xpbmUnKTs\'" line-highlights="\'\'" />\n<p>需要再单独引入<code>grid</code>组件</p>\n<md-code-block lang="js" code="\'cmVxdWlyZSgnZWNoYXJ0cy9saWIvY29tcG9uZW50L2dyaWQnKTs\'" line-highlights="\'\'" />\n<p>参考 issue：<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>组件，如果需要的话可以手动引入。</li>\n</ul>\n<md-code-block lang="js" code="\'aW1wb3J0IHsgQXJpYUNvbXBvbmVudCB9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7CmVjaGFydHMudXNlKEFyaWFDb21wb25lbnQpOw\'" line-highlights="\'\'" />\n<p>或者：</p>\n<md-code-block lang="js" code="\'cmVxdWlyZSgnZWNoYXJ0cy9saWIvY29tcG9uZW50L2FyaWEnKTs\'" line-highlights="\'\'" />\n<h3 id="%E5%8E%BB%E9%99%A4%E5%86%85%E7%BD%AE%E7%9A%84-geojson" tabindex="-1">去除内置的 geoJSON</h3>\n<p><code>v5</code> 移除了内置的 geoJSON（原先在 <code>echarts/map</code> 文件夹下）。这些 geoJSON 文件本就一直来源于第三方。如果使用者仍然需要他们，可以去从老版本中得到，或者自己寻找更合适的数据然后通过 registerMap 接口注册到 ECharts 中。</p>\n<h3 id="%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7" tabindex="-1">浏览器兼容性</h3>\n<p><code>v5</code> 不再支持 IE8 浏览器。我们不再继续维护和升级之前的 <a href="https://github.com/ecomfe/zrender/tree/4.3.2/src/vml">VML 渲染器</a> 来着实现 IE8 的兼容。如果使用者确实有很强的需求，那么欢迎提 pull request 来升级 VML 渲染器，或者单独维护一个第三方 VML 渲染器，我们从 <code>v5.0.1</code> 开始支持注册独立的渲染器了。</p>\n<h3 id="%E9%85%8D%E7%BD%AE%E9%A1%B9%E8%B0%83%E6%95%B4" tabindex="-1">配置项调整</h3>\n<h4 id="%E8%A7%86%E8%A7%89%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE%E7%9A%84%E4%BC%98%E5%85%88%E7%BA%A7%E6%94%B9%E5%8F%98" tabindex="-1">视觉样式设置的优先级改变</h4>\n<p><code>v5</code> 对调了 <a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 和 <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> 的视觉样式优先级。</p>\n<p>具体来说，<code>v4</code> 中，<a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 中生成的视觉样式（如，颜色、图形类型、图形尺寸等）的优先级，比开发者在 <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> 中设置的样式的优先级高，也就是说如果他们同时设置的话，前者会生效而后者不会生效。这带来了些麻烦：假如使用者在使用 <a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 时，又想针对某个数据项对应的图形，设置 <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> 样式，则做不到。<code>v5</code> 中于是提高了 <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> 的优先级，使他们能生效。</p>\n<p>在绝大多处情况下，这个变化并不会带来什么影响。但是为保险起见，使用者在升级 <code>v4</code> 到 <code>v5</code> 时，还是可以检查下，是否有同时使用 <a href="https://echarts.apache.org/option.html#visualMap">visualMap</a> 和 <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> 的情况。</p>\n<h4 id="%E5%AF%8C%E6%96%87%E6%9C%AC%E7%9A%84-padding" tabindex="-1">富文本的 <code>padding</code></h4>\n<p><code>v5</code> 调整了 <a href="https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding">rich.?.padding</a> 的格式使其更符合 CSS 的规范。<code>v4</code> 里，例如 <code>rich.?.padding: [11, 22, 33, 44]</code> 表示 <code>padding-top</code> 是 <code>33</code> 且 <code>padding-bottom</code> 是 <code>11</code>。在 <code>v5</code> 中调整了上下的位置，<code>rich.?.padding: [11, 22, 33, 44]</code> 表示 <code>padding-top</code> 是 <code>11</code> 且 <code>padding-bottom</code> 是 <code>33</code>。</p>\n<p>如果使用者有在使用 <a href="https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding">rich.?.padding</a>，需要注意调整下这个顺序。</p>\n<h2 id="%E6%89%A9%E5%B1%95%E7%9A%84%E5%85%BC%E5%AE%B9" tabindex="-1">扩展的兼容</h2>\n<p>如果想要升级到 <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="%E4%B8%8D%E5%86%8D%E6%8E%A8%E8%8D%90%E4%BD%BF%E7%94%A8%E7%9A%84-api" tabindex="-1">不再推荐使用的 API</h2>\n<p>一些 API（包括接口调用，事件监听和配置项）在 <code>v5</code> 中不再推荐使用。当然，使用者仍然可以用他们，只是会在 dev 模式下，在 console 中打印一些 warning，并不会影响功能。但是从长远维护考虑，我们还是推荐升级成新的 API。</p>\n<p>下面是不再推荐使用的 API 以及推荐的新 API：</p>\n<ul>\n<li>图形元素 transform 相关的属性被改变了：\n<ul>\n<li>变更点：\n<ul>\n<li><code>position: [number, number]</code> 改为 <code>x: number</code> / <code>y: number</code>。</li>\n<li><code>scale: [number, number]</code> 改为 <code>scaleX: number</code> / <code>scaleY: number</code>。</li>\n<li><code>origin: [number, number]</code> 改为 <code>originX: number</code> / <code>originY: number</code>。</li>\n</ul>\n</li>\n<li><code>position</code>、<code>scale</code> 和 <code>origin</code> 仍然支持，但已不推荐使用。</li>\n<li>它影响到这些地方：\n<ul>\n<li>在<code>graphic</code>组件中：每个元素的声明。</li>\n<li>在 <code>custom series</code> 中：<code>renderItem</code> 返回的每个元素的声明。</li>\n<li>直接使用 zrender 图形元素时。</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>Text 相关的属性被改变：\n<ul>\n<li>变更点：\n<ul>\n<li>图形元素附带的文本的声明方式被改变：\n<ul>\n<li>除了 <code>Text</code> 元素之外，其他元素中的属性 <code>style.text</code> 都不推荐使用了。取而代之的是新属性 <code>textContent</code> 和 <code>textConfig</code>，他们能带来更丰富的功能。</li>\n<li>其中，下面左边部分的这些属性已不推荐使用或废弃。请使用下面的右边部分的属性：\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>下面左边部分的属性在 <code>style</code> 和 <code>style.rich.?</code> 中已不推荐使用或废弃。请使用下面右边的属性：\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>注：这些属性并没有变化：\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>它影响到这些地方：\n<ul>\n<li>在 <code>graphic</code> 组件中：每个元素的声明。（原来的写法仍兼容，但在一些很复杂的情况下，可能效果不完全一致。）</li>\n<li>在自定义系列（<code>custom series</code>）中：<code>renderItem</code> 返回中的每个元素的声明。（原来的写法仍兼容，但在一些很复杂的情况下，可能效果不完全一致。）</li>\n<li>直接使用 zrender API 创建图形元素。（不再兼容，原写法被废弃。）</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>图表实例上的 API：\n<ul>\n<li><code>chart.one(...)</code> 已不推荐使用。</li>\n</ul>\n</li>\n<li><code>label</code>。\n<ul>\n<li>属性 <code>color</code>、<code>textBorderColor</code>、<code>backgroundColor</code>、<code>borderColor</code> 中，值 <code>auto</code> 已不推荐使用，而推荐使用 <code>\'inherit\'</code> 代替。</li>\n</ul>\n</li>\n<li><code>hoverAnimation</code>:\n<ul>\n<li>选项 <code>series.hoverAnimation</code> 已不推荐使用，使用 <code>series.emphasis.scale</code> 代替之。</li>\n</ul>\n</li>\n<li>折线图（<code>line series</code>）：\n<ul>\n<li>选项 <code>series.clipOverflow</code> 已不推荐使用，使用 <code>series.clip</code> 代替之。</li>\n</ul>\n</li>\n<li>自定义系列（<code>custom series</code>）。\n<ul>\n<li>在 <code>renderItem</code> 中，<code>api.style(...)</code> 和 <code>api.styleEmphasis(...)</code> 已不推荐使用。因为这两个接口其实并不真正必要，也很难保证向后兼容。用户可以通过 <code>api.visual(...)</code> 获取系统自动分配的视觉信息。</li>\n</ul>\n</li>\n<li>旭日图（<code>sunburst</code>）：\n<ul>\n<li>动作类型 <code>highlight</code> 已被弃用，请使用 <code>sunburstHighlight</code> 代替。</li>\n<li>动作类型 <code>downplay</code> 已被弃用，请使用 <code>sunburstUnhighlight</code> 代替。</li>\n<li>选项 <code>series.downplay</code> 已被弃用，请使用 <code>series.blur</code> 代替。</li>\n<li>选项 <code>series.highlightPolicy</code> 已不适用，请使用 <code>series.emphasis.focus</code> 代替。</li>\n</ul>\n</li>\n<li>饼图（<code>pie</code>）：\n<ul>\n<li>下面左边部分的 action 名已经不推荐使用。请使用右边的 action 名。\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>下面左边部分的事件名已经不推荐使用。请使用右边的事件名。\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>选项 <code>series.label.margin</code> 已经不推荐使用。使用 <code>series.label.edgeDistance</code> 代替。</li>\n<li>选项 <code>series.clockWise</code> 已经不推荐使用。使用 <code>series.clockwise</code> 代替。</li>\n<li>选项 <code>series.hoverOffset</code> 已经不推荐使用。使用 <code>series.emphasis.scaleSize</code> 代替。</li>\n</ul>\n</li>\n<li>地图（<code>map series</code>）：\n<ul>\n<li>下文左边部分的 action 名已经不推荐使用。请使用右边的 action 名。\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>下面左边部分的事件名已经不推荐使用。请使用右边的事件名。\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>选项 <code>series.mapType</code> 已经不推荐使用。使用 <code>series.map</code> 代替。</li>\n<li>选项 <code>series.mapLocation</code> 已经不推荐使用。</li>\n</ul>\n</li>\n<li>关系图（<code>graph series</code>）：\n<ul>\n<li>选项 <code>series.focusNodeAdjacency</code> 已经不推荐使用。使用 <code>series.emphasis: { focus: \'adjacency\'}</code> 代替。</li>\n</ul>\n</li>\n<li>仪表盘（<code>gauge series</code>）：\n<ul>\n<li>选项 <code>series.clockWise</code> 已经不推荐使用。使用 <code>series.clockwise</code> 代替。</li>\n<li>选项 <code>series.hoverOffset</code> 已经不推荐使用。使用 <code>series.emphasis.scaleSize</code> 代替。</li>\n</ul>\n</li>\n<li><code>dataZoom</code> 组件：\n<ul>\n<li>选项 <code>dataZoom.handleIcon</code> 如果使用 <code>SVGPath</code>，需要前缀 <code>path://</code>。</li>\n</ul>\n</li>\n<li>雷达图（<code>radar</code>）：\n<ul>\n<li>选项 <code>radar.name</code> 已经不推荐使用。使用 <code>radar.axisName</code> 代替。</li>\n<li>选项 <code>radar.nameGap</code> 已经不推荐使用。使用 <code>radar.axisNameGap</code> 代替。</li>\n</ul>\n</li>\n<li>Parse and format：\n<ul>\n<li><code>echarts.format.formatTime</code> 已经不推荐使用。使用 <code>echarts.time.format</code> 代替。</li>\n<li><code>echarts.number.parseDate</code> 已经不推荐使用。使用 <code>echarts.time.parse</code> 代替。</li>\n<li><code>echarts.format.getTextRect</code> 已经不推荐使用。</li>\n</ul>\n</li>\n</ul>\n',postPath:"zh/basics/release-note/v5-upgrade-guide",title:"v4 升级 v5 指南 - 版本特性 - 入门篇"}],fetch:{},error:null,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:l},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:c},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:a,draft:e},{title:"寻求帮助",dir:n},{title:"版本特性",dir:r,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:m}]}]},{title:"概念篇",dir:u,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:y,draft:e},{title:"系列",dir:C,draft:e},{title:"样式",dir:A},{title:"数据集",dir:E},{title:"数据转换",dir:f},{title:"坐标系",dir:v,draft:e},{title:"坐标轴",dir:I},{title:"视觉映射",dir:t},{title:"图例",dir:B},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:x,children:[{title:"常用图表类型",dir:W,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:J},{title:"堆叠柱状图",dir:M},{title:"动态排序柱状图",dir:Y},{title:"极坐标系柱状图",dir:N,draft:e},{title:"阶梯瀑布图",dir:w},{title:"视觉映射的柱状图",dir:t,draft:e}]},{title:"折线图",dir:Z,children:[{title:"基础折线图",dir:k},{title:"堆叠折线图",dir:G},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:j},{title:"阶梯线图",dir:L}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:z},{title:"圆环图",dir:F},{title:"南丁格尔图（玫瑰图）",dir:D}]},{title:"散点图",dir:X,children:[{title:"基础散点图",dir:O}]}]},{title:P,dir:i,draft:e},{title:"跨平台方案",dir:H,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:R},{title:"数据下钻",dir:T,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"动画",dir:U,children:[{title:"数据过渡动画",dir:K}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e},{title:"智能指针吸附",dir:$}]}]},{title:"最佳实践",dir:ee,children:[{title:P,dir:i,draft:e},{title:ie,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:le}]}],en:[{title:"Get Started",dir:l},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:c},{title:"Import ECharts",dir:o},{title:"Resources",dir:a,draft:e},{title:"Get Help",dir:n},{title:"What's New",dir:r,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:m}]}]},{title:"Concepts",dir:u,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:y,draft:e},{title:"Series",dir:C,draft:e},{title:"Style",dir:A},{title:"Dataset",dir:E},{title:"Data Transform",dir:f},{title:"Coordinate",dir:v,draft:e},{title:"Axis",dir:I},{title:"Visual Mapping",dir:t},{title:"Legend",dir:B},{title:"Event and Action",dir:S}]},{title:"How To Guides",dir:x,children:[{title:"Common Charts",dir:W,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:J},{title:"Stacked Bar",dir:M},{title:"Bar Racing",dir:Y},{title:"Bar Polar",dir:N,draft:e},{title:"Waterfall",dir:w}]},{title:"Line",dir:Z,children:[{title:"Basic Line",dir:k},{title:"Stacked Line",dir:G},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:j},{title:"Step Line",dir:L}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:z},{title:"Ring Style",dir:F},{title:"Rose Style",dir:D}]},{title:"Scatter",dir:X,children:[{title:"Basic Scatter",dir:O}]}]},{title:"Mobile",dir:i,draft:e},{title:"Cross Platform",dir:H,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:R},{title:"Drilldown",dir:T,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Animation",dir:U,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:i,draft:e},{title:ie,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:le}]}]},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:"/zh/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> |
