| <!doctype html> |
| <html data-n-head-ssr lang="zh-CN" data-n-head="%7B%22lang%22:%7B%22ssr%22:%22zh-CN%22%7D%7D"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <title>5.3 - 版本特性 - 入门篇 - 使用手册 - Apache ECharts</title><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="shortcut icon" type="image/png" href="https://echarts.apache.org/zh/images/favicon.png"><link data-n-head="ssr" rel="stylesheet" href="//echarts.apache.org/zh/js/vendors/bootstrap@3.3.7/css/bootstrap.min.css"><link data-n-head="ssr" rel="stylesheet" href="https://echarts.apache.org/zh/css/main.css"><link data-n-head="ssr" rel="stylesheet" href="//echarts.apache.org/zh/js/vendors/docsearch.js@2.6.3/dist/cdn/docsearch.min.css"><script data-n-head="ssr">window.ECHARTS_WWW_VENDORS_CDN_ROOT="//echarts.apache.org/zh/js/vendors/"</script><script data-n-head="ssr" src="//echarts.apache.org/zh/js/vendors/jquery@3.7.1/dist/jquery.min.js"></script><script data-n-head="ssr" src="//echarts.apache.org/zh/js/vendors/bootstrap@3.3.7/js/bootstrap.min.js"></script><script data-n-head="ssr" src="//echarts.apache.org/zh/js/vendors/docsearch.js@2.6.3/dist/cdn/docsearch.min.js"></script><link rel="preload" href="/handbook/_nuxt/e47e243.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/6b95e13.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5065b3fcfb135aeca141.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/be446d2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5df72fc39d1af2ed5977.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/3556c50.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/c4dea9e2e5641ecc29b6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/8117eb7.css"><link rel="stylesheet" href="/handbook/_nuxt/css/6b95e13.css"><link rel="stylesheet" href="/handbook/_nuxt/css/be446d2.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_=20240226" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/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/v6-upgrade-guide">v6 升级指南</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><li id="nav-github"><a href="https://github.com/apache/echarts" target="_blank"><svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-262.000000, -2480.000000)" fill="#333"><g transform="translate(252.000000, 2470.000000)"><path d="M29.9006449,27.904446 C28.5016932,29.8668872 26.6944882,31.2248797 24.4790301,31.9784237 C24.2211218,32.0272886 24.0325745,31.9931534 23.9133882,31.876018 C23.7942019,31.7588827 23.7346171,31.6119968 23.7346338,31.4353603 L23.7346338,28.3376019 C23.7346338,27.3880159 23.4865017,26.6930482 22.9902375,26.2526987 C23.5347812,26.1938141 24.024319,26.1058042 24.458851,25.9886688 C24.893383,25.8715335 25.3422785,25.680801 25.8055376,25.4164714 C26.2687966,25.1521418 26.6556591,24.8267354 26.9661251,24.4402521 C27.276591,24.0537688 27.5296112,23.5398222 27.7251857,22.8984123 C27.9207602,22.2570024 28.0185475,21.5203805 28.0185475,20.6885464 C28.0185475,19.504056 27.6414612,18.4959023 26.8872886,17.6640854 C27.240536,16.7733669 27.2023419,15.7752328 26.7727063,14.6696833 C26.5050218,14.5813565 26.1181593,14.6352226 25.6121189,14.8312818 C25.1060784,15.0273409 24.6669591,15.2428141 24.2947609,15.4777015 L23.7502256,15.8300324 C22.8622108,15.5757225 21.9454689,15.4485675 21,15.4485675 C20.0545311,15.4485675 19.1377892,15.5757225 18.2497744,15.8300324 C18.0969813,15.7223001 17.8940788,15.5901353 17.641067,15.433538 C17.3880551,15.2769408 16.9892689,15.0884007 16.4447085,14.8679176 C15.9001481,14.6474346 15.4894467,14.5813479 15.2126043,14.6696576 C14.7921266,15.7758408 14.7588206,16.7739749 15.1126863,17.6640597 C14.3585137,18.4958938 13.9814275,19.5040475 13.9814275,20.6885208 C13.9814275,21.5203548 14.0792147,22.2544676 14.2747892,22.8908591 C14.4703637,23.5272505 14.720944,24.0411971 15.0265302,24.4326988 C15.3321164,24.8242005 15.7165391,25.1521076 16.1797981,25.41642 C16.6430571,25.6807325 17.0919527,25.871465 17.5264847,25.9886174 C17.9610167,26.1057699 18.4505545,26.1937799 18.9950982,26.2526473 C18.6131238,26.60467 18.3790461,27.1085884 18.292865,27.7644025 C18.0924107,27.8621152 17.8775846,27.935404 17.6483866,27.984269 C17.4191886,28.0331339 17.1469167,28.0575663 16.831571,28.0575663 C16.5162253,28.0575663 16.203612,27.9523346 15.8937309,27.7418712 C15.5838499,27.5314078 15.3189144,27.225424 15.0989244,26.8239198 C14.9174043,26.5107253 14.6857747,26.2564154 14.4040358,26.0609899 C14.1222969,25.8655645 13.8860801,25.7481209 13.6953854,25.708659 L13.4084408,25.6644956 C13.2079866,25.6644956 13.069557,25.6864188 12.9931521,25.7302654 C12.9167472,25.7741119 12.8929083,25.8304873 12.9216353,25.8993914 C12.9503623,25.9682956 12.9934529,26.0368829 13.050907,26.1051533 C13.1083611,26.1734238 13.1703941,26.2319915 13.2370061,26.2808564 L13.336924,26.3541538 C13.5471712,26.4518665 13.7549701,26.6378974 13.9603209,26.9122466 C14.1656716,27.1865958 14.3160164,27.4362043 14.4113555,27.661072 L14.554364,27.9983735 C14.67843,28.3704354 14.8886689,28.6714094 15.1850804,28.9012955 C15.481492,29.1311815 15.8014334,29.2780674 16.1449045,29.3419532 C16.4883756,29.405839 16.8202406,29.4399742 17.1404995,29.4443589 C17.4607584,29.4487435 17.7256939,29.4315218 17.935306,29.3926936 L18.2644137,29.3335008 C18.2644137,29.7055627 18.2668619,30.1412107 18.2717584,30.6404447 C18.2766548,31.1396787 18.279103,31.4040083 18.279103,31.4334334 C18.279103,31.6094533 18.21707,31.7563392 18.093004,31.8740912 C17.9689379,31.9918431 17.7779507,32.0259784 17.5200424,31.9764969 C15.3045843,31.22297 13.4973793,29.8649774 12.0984276,27.9025191 C10.6994759,25.9400608 10,23.7305118 10,21.2738721 C10,19.2281225 10.4916769,17.3417791 11.4750308,15.6148418 C12.4583846,13.8879045 13.7928551,12.5202092 15.4784422,11.5117558 C17.1640293,10.5033024 19.0045486,9.99938397 21,10.0000006 C22.9954514,10.0006172 24.8359707,10.5045356 26.5215578,11.5117558 C28.2071449,12.518976 29.5416154,13.8866713 30.5249692,15.6148418 C31.5083231,17.3430123 32,19.2293557 32,21.2738721 C31.9990725,23.7324558 31.2995966,25.9420048 29.9006449,27.904446 Z"></path></g></g></g></svg></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="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/v6-feature" class="nav-link"><span class="title">ECharts 6 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v6-upgrade-guide" class="nav-link"><span class="title">v5 升级 v6 指南</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-feature" class="nav-link"><span class="title">5.0</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" class="nav-link"><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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">5.3</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><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><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-5-0" class="nav-link"><span class="title">5.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/5-6-0" class="nav-link"><span class="title">5.6</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.3.0-%E7%89%B9%E6%80%A7%E4%BB%8B%E7%BB%8D" tabindex="-1">Apache ECharts 5.3.0 特性介绍</h1> <p>Apache ECharts 5.3.0 在动画表达力、渲染性能、服务端渲染上做了大幅度的增强，同时也新增了多坐标轴刻度自动对齐、tooltip 数值格式化、地图投影等社区中期盼已久的特性。</p> <h2 id="%E5%85%B3%E9%94%AE%E5%B8%A7%E5%8A%A8%E7%94%BB" tabindex="-1">关键帧动画</h2> <p>在之前 ECharts 的动画集中在图形添加、更新以及移除的过渡动画上，过渡动画往往只有开始状态和结束状态。为了表达更复杂的动画效果，我们 5.3.0 中为<a href="https://echarts.apache.org/option.html#series-custom">自定义系列</a>和<a href="https://echarts.apache.org/option.html#graphic">图形组件</a>引入了全新的关键帧动画。</p> <p>下面是一个简单的通过关键帧动画实现的呼吸动画的效果。</p> <div class="md-live layout-lr"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = { |
| graphic: { |
| type: 'circle', |
| shape: { r: 100 }, |
| left: 'center', |
| top: 'center', |
| keyframeAnimation: [ |
| { |
| duration: 3000, |
| loop: true, |
| keyframes: [ |
| { |
| percent: 0.5, |
| easing: 'sinusoidalInOut', |
| scaleX: 0.1, |
| scaleY: 0.1 |
| }, |
| { |
| percent: 1, |
| easing: 'sinusoidalInOut', |
| scaleX: 1, |
| scaleY: 1 |
| } |
| ] |
| } |
| ] |
| } |
| };</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">graphic</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'circle'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">shape</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">r</span><span class="token operator">:</span> <span class="token number">100</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">keyframeAnimation</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">loop</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">keyframes</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">percent</span><span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">easing</span><span class="token operator">:</span> <span class="token string">'sinusoidalInOut'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">scaleX</span><span class="token operator">:</span> <span class="token number">0.1</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">scaleY</span><span class="token operator">:</span> <span class="token number">0.1</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">percent</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">easing</span><span class="token operator">:</span> <span class="token string">'sinusoidalInOut'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">scaleX</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">scaleY</span><span class="token operator">:</span> <span class="token number">1</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>在关键帧动画中，你可以配置动画时长、缓动、是否循环、每个关键帧的位置、缓动以及图形属性等。而且每个图形可以同时设置多个不同配置的关键帧动画。灵活的配置让我们可以实现非常复杂的动画效果，下面列举几个可以应用关键帧动画的场景。</p> <h3 id="%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8A%A0%E8%BD%BD%E5%8A%A8%E7%94%BB" tabindex="-1">自定义加载动画</h3> <p>ECharts 默认内置了一个加载动画，可以调用<code>showLoading</code>显示。开发者经常会提需求需要更多的加载动画效果。现在有了关键帧动画后，我们可以通过图形（<a href="https://echarts.apache.org/option.html#graphic">graphic</a>）组件配合关键帧动画实现任何想要的加载动画效果。</p> <p>比如文本描边动画：</p> <div class="md-live layout-lr"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = { |
| graphic: { |
| elements: [ |
| { |
| type: 'text', |
| left: 'center', |
| top: 'center', |
| style: { |
| text: 'Apache ECharts', |
| fontSize: 40, |
| fontWeight: 'bold', |
| lineDash: [0, 200], |
| lineDashOffset: 0, |
| fill: 'transparent', |
| stroke: '#000', |
| lineWidth: 1 |
| }, |
| keyframeAnimation: { |
| duration: 3000, |
| loop: true, |
| keyframes: [ |
| { |
| percent: 0.7, |
| style: { |
| fill: 'transparent', |
| lineDashOffset: 200, |
| lineDash: [200, 0] |
| } |
| }, |
| { |
| // Stop for a while. |
| percent: 0.8, |
| style: { |
| fill: 'transparent' |
| } |
| }, |
| { |
| percent: 1, |
| style: { |
| fill: 'black' |
| } |
| } |
| ] |
| } |
| } |
| ] |
| } |
| };</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">graphic</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">elements</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'text'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Apache ECharts'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">40</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">fontWeight</span><span class="token operator">:</span> <span class="token string">'bold'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">lineDash</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">lineDashOffset</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">fill</span><span class="token operator">:</span> <span class="token string">'transparent'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">stroke</span><span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">lineWidth</span><span class="token operator">:</span> <span class="token number">1</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">keyframeAnimation</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">loop</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">keyframes</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">percent</span><span class="token operator">:</span> <span class="token number">0.7</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">fill</span><span class="token operator">:</span> <span class="token string">'transparent'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">lineDashOffset</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">lineDash</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token comment">// Stop for a while.</span> |
| <span class="token literal-property property">percent</span><span class="token operator">:</span> <span class="token number">0.8</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">fill</span><span class="token operator">:</span> <span class="token string">'transparent'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">percent</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">fill</span><span class="token operator">:</span> <span class="token string">'black'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>或者柱状图形状的加载动画：</p> <div class="md-live layout-lr"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">const columns = []; |
| for (let i = 0; i < 7; i++) { |
| columns.push({ |
| type: 'rect', |
| x: i * 20, |
| shape: { |
| x: 0, |
| y: -40, |
| width: 10, |
| height: 80 |
| }, |
| style: { |
| fill: '#5470c6' |
| }, |
| keyframeAnimation: { |
| duration: 1000, |
| delay: i * 200, |
| loop: true, |
| keyframes: [ |
| { |
| percent: 0.5, |
| scaleY: 0.1, |
| easing: 'cubicIn' |
| }, |
| { |
| percent: 1, |
| scaleY: 1, |
| easing: 'cubicOut' |
| } |
| ] |
| } |
| }); |
| } |
| option = { |
| graphic: { |
| elements: [ |
| { |
| type: 'group', |
| left: 'center', |
| top: 'center', |
| children: columns |
| } |
| ] |
| } |
| };</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> |
| <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">7</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| columns<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'rect'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">x</span><span class="token operator">:</span> i <span class="token operator">*</span> <span class="token number">20</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">shape</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token operator">-</span><span class="token number">40</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">80</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">fill</span><span class="token operator">:</span> <span class="token string">'#5470c6'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">keyframeAnimation</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">1000</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">delay</span><span class="token operator">:</span> i <span class="token operator">*</span> <span class="token number">200</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">loop</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">keyframes</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">percent</span><span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">scaleY</span><span class="token operator">:</span> <span class="token number">0.1</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">easing</span><span class="token operator">:</span> <span class="token string">'cubicIn'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">percent</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">scaleY</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">easing</span><span class="token operator">:</span> <span class="token string">'cubicOut'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">graphic</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">elements</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'group'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">children</span><span class="token operator">:</span> columns |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h3 id="%E6%89%A9%E5%B1%95%E6%9B%B4%E4%B8%B0%E5%AF%8C%E7%9A%84%E6%95%A3%E7%82%B9%E5%9B%BE%E5%8A%A8%E7%94%BB%E7%89%B9%E6%95%88" tabindex="-1">扩展更丰富的散点图动画特效</h3> <p>带有特效动画的散点图一直以来是 ECharts 的特色功能。开发者可以使用 <a href="https://echarts.apache.org/option.html#series-effectScatter">effectScatter</a> 系列来实现带有涟漪特效的动态散点图，这种特效动画除了让作品更有趣，也起到了高亮提示用户的效果。跟加载动画一样，开发者也常常提出需要更多动画效果的需求。现在我们可以在自定义系列中通过使用关键帧动画来实现更复杂的特效。</p> <p>比如下面例子在 SVG 地图上给自定义系列绘制的图钉加上了跳动的动画效果，同时配上了涟漪动画。</p> <div class="md-live layout-lr"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" readonly class="prism-editor__textarea">fetch( |
| 'https://echarts.apache.org/examples/data/asset/geo/Map_of_Iceland.svg' |
| ) |
| .then(response => response.text()) |
| .then(svg => { |
| echarts.registerMap('iceland_svg', { svg: svg }); |
| option = { |
| geo: { |
| map: 'iceland_svg', |
| left: 0, |
| right: 0 |
| }, |
| series: { |
| type: 'custom', |
| coordinateSystem: 'geo', |
| geoIndex: 0, |
| zlevel: 1, |
| data: [ |
| [488, 459, 100], |
| [770, 757, 30], |
| [1180, 743, 80], |
| [894, 1188, 61], |
| [1372, 477, 70], |
| [1378, 935, 81] |
| ], |
| renderItem(params, api) { |
| const coord = api.coord([ |
| api.value(0, params.dataIndex), |
| api.value(1, params.dataIndex) |
| ]); |
| |
| const circles = []; |
| for (let i = 0; i < 5; i++) { |
| circles.push({ |
| type: 'circle', |
| shape: { |
| cx: 0, |
| cy: 0, |
| r: 30 |
| }, |
| style: { |
| stroke: 'red', |
| fill: 'none', |
| lineWidth: 2 |
| }, |
| // Ripple animation |
| keyframeAnimation: { |
| duration: 4000, |
| loop: true, |
| delay: (-i / 4) * 4000, |
| keyframes: [ |
| { |
| percent: 0, |
| scaleX: 0, |
| scaleY: 0, |
| style: { |
| opacity: 1 |
| } |
| }, |
| { |
| percent: 1, |
| scaleX: 1, |
| scaleY: 0.4, |
| style: { |
| opacity: 0 |
| } |
| } |
| ] |
| } |
| }); |
| } |
| return { |
| type: 'group', |
| x: coord[0], |
| y: coord[1], |
| children: [ |
| ...circles, |
| { |
| type: 'path', |
| shape: { |
| d: |
| 'M16 0c-5.523 0-10 4.477-10 10 0 10 10 22 10 22s10-12 10-22c0-5.523-4.477-10-10-10zM16 16c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6z', |
| x: -10, |
| y: -35, |
| width: 20, |
| height: 40 |
| }, |
| style: { |
| fill: 'red' |
| }, |
| // Jump animation. |
| keyframeAnimation: { |
| duration: 1000, |
| loop: true, |
| delay: Math.random() * 1000, |
| keyframes: [ |
| { |
| y: -10, |
| percent: 0.5, |
| easing: 'cubicOut' |
| }, |
| { |
| y: 0, |
| percent: 1, |
| easing: 'bounceOut' |
| } |
| ] |
| } |
| } |
| ] |
| }; |
| } |
| } |
| }; |
| |
| myChart.setOption(option); |
| });</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token function">fetch</span><span class="token punctuation">(</span> |
| <span class="token string">'https://echarts.apache.org/examples/data/asset/geo/Map_of_Iceland.svg'</span> |
| <span class="token punctuation">)</span> |
| <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=></span> response<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> |
| <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">svg</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| echarts<span class="token punctuation">.</span><span class="token function">registerMap</span><span class="token punctuation">(</span><span class="token string">'iceland_svg'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">svg</span><span class="token operator">:</span> svg <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">geo</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">map</span><span class="token operator">:</span> <span class="token string">'iceland_svg'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">right</span><span class="token operator">:</span> <span class="token number">0</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'custom'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">coordinateSystem</span><span class="token operator">:</span> <span class="token string">'geo'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">geoIndex</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">zlevel</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">[</span><span class="token number">488</span><span class="token punctuation">,</span> <span class="token number">459</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">770</span><span class="token punctuation">,</span> <span class="token number">757</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">1180</span><span class="token punctuation">,</span> <span class="token number">743</span><span class="token punctuation">,</span> <span class="token number">80</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">894</span><span class="token punctuation">,</span> <span class="token number">1188</span><span class="token punctuation">,</span> <span class="token number">61</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">1372</span><span class="token punctuation">,</span> <span class="token number">477</span><span class="token punctuation">,</span> <span class="token number">70</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">1378</span><span class="token punctuation">,</span> <span class="token number">935</span><span class="token punctuation">,</span> <span class="token number">81</span><span class="token punctuation">]</span> |
| <span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token function">renderItem</span><span class="token punctuation">(</span><span class="token parameter">params<span class="token punctuation">,</span> api</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">const</span> coord <span class="token operator">=</span> api<span class="token punctuation">.</span><span class="token function">coord</span><span class="token punctuation">(</span><span class="token punctuation">[</span> |
| api<span class="token punctuation">.</span><span class="token function">value</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> params<span class="token punctuation">.</span>dataIndex<span class="token punctuation">)</span><span class="token punctuation">,</span> |
| api<span class="token punctuation">.</span><span class="token function">value</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> params<span class="token punctuation">.</span>dataIndex<span class="token punctuation">)</span> |
| <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| |
| <span class="token keyword">const</span> circles <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> |
| <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">5</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| circles<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'circle'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">shape</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">cx</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">cy</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">r</span><span class="token operator">:</span> <span class="token number">30</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">stroke</span><span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">fill</span><span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">lineWidth</span><span class="token operator">:</span> <span class="token number">2</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token comment">// Ripple animation</span> |
| <span class="token literal-property property">keyframeAnimation</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">4000</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">loop</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">delay</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token operator">-</span>i <span class="token operator">/</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">4000</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">keyframes</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">percent</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">scaleX</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">scaleY</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">opacity</span><span class="token operator">:</span> <span class="token number">1</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">percent</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">scaleX</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">scaleY</span><span class="token operator">:</span> <span class="token number">0.4</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">opacity</span><span class="token operator">:</span> <span class="token number">0</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| <span class="token keyword">return</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'group'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">x</span><span class="token operator">:</span> coord<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">y</span><span class="token operator">:</span> coord<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token operator">...</span>circles<span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'path'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">shape</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">d</span><span class="token operator">:</span> |
| <span class="token string">'M16 0c-5.523 0-10 4.477-10 10 0 10 10 22 10 22s10-12 10-22c0-5.523-4.477-10-10-10zM16 16c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6z'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token operator">-</span><span class="token number">10</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token operator">-</span><span class="token number">35</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">40</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">fill</span><span class="token operator">:</span> <span class="token string">'red'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token comment">// Jump animation.</span> |
| <span class="token literal-property property">keyframeAnimation</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">1000</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">loop</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">delay</span><span class="token operator">:</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">1000</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">keyframes</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token operator">-</span><span class="token number">10</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">percent</span><span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">easing</span><span class="token operator">:</span> <span class="token string">'cubicOut'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">percent</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">easing</span><span class="token operator">:</span> <span class="token string">'bounceOut'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span> |
| |
| myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h3 id="%E5%8A%A0%E8%BD%BD-lottie-%E5%8A%A8%E7%94%BB" tabindex="-1">加载 Lottie 动画</h3> <p>为了充分发掘出新的关键帧动画的能力，ECharts 团队的沈毅写了一个 <a href="https://github.com/pissang/lottie-parser">Lottie 动画的解析库</a>，可以将 Lottie 动画文件解析成 ECharts 的图形格式进行渲染。结合 Lottie 的表达力我们可以进一步的在我们的项目中绘制出细腻的动画。</p> <h2 id="%E5%9B%BE%E5%BD%A2%E7%BB%84%E4%BB%B6%E8%BF%87%E6%B8%A1%E5%8A%A8%E7%94%BB" tabindex="-1">图形组件过渡动画</h2> <p>我们在 5.0 里为自定义系列中返回的图形提供了更灵活的过渡动画配置。可以通过<code>transition</code>, <code>enterFrom</code>, <code>leaveTo</code>三个配置项来配置每个图形哪些属性会拥有过渡动画，当图形创建和被移除的时候该执行怎么样的动画。例如：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">function</span> <span class="token function">renderItem</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token comment">//...</span> |
| <span class="token keyword">return</span> <span class="token punctuation">{</span> |
| <span class="token comment">//...</span> |
| <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span> |
| <span class="token comment">// 'style', 'x', 'y' 会被动画</span> |
| <span class="token literal-property property">transition</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'style'</span><span class="token punctuation">,</span> <span class="token string">'x'</span><span class="token punctuation">,</span> <span class="token string">'y'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">enterFrom</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token comment">// 淡入</span> |
| <span class="token literal-property property">opacity</span><span class="token operator">:</span> <span class="token number">0</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token comment">//从左侧飞入</span> |
| <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">0</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">leaveTo</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token comment">// 淡出</span> |
| <span class="token literal-property property">opacity</span><span class="token operator">:</span> <span class="token number">0</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token comment">// 向右侧飞出</span> |
| <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">200</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>在 5.3.0 中我们把这些过渡动画的配置扩展到了图形（graphic）组件中，并且做了更多的增强：</p> <p>如果你不想一一写出每个要动画的属性，现在你可以直接配置<code>transition: 'all'</code>为所有属性都加上动画过渡。</p> <p>与此同时我们还新增了<code>enterAnimation</code>、<code>updateAnimation</code>、<code>leaveAnimation</code>分别配置每个图形入场、更新、出场动画的时长（duration）、延迟（delay）和缓动（easing）。除此之外，渐变色现在也支持动画了。</p> <h2 id="%E5%85%A8%E6%96%B0%E7%9A%84-svg-%E6%B8%B2%E6%9F%93%E5%99%A8" tabindex="-1">全新的 SVG 渲染器</h2> <p>在 5.3.0 中我们重构了我们的 SVG 渲染器，新的 SVG 渲染器能够带来 2x ~ 10x 的性能提升，在某些特殊场景中甚至能有数十倍的提升。</p> <p>之前的 SVG 渲染器我们直接从渲染队列更新到 DOM。但是因为 zrender 的图形属性跟 DOM 并不是一一对应的，因此中间需要实现非常复杂的 Diff 逻辑，容易出错而且在某些场景下性能并不能做到最好。在这个版本我们重构成先全量渲染到 VDOM，然后再将 VDOM patch 到 DOM 完成渲染。全量渲染可以避免复杂的 Diff 逻辑带来的潜在 Bug。而 VDOM 和 DOM 的一一对应可以保证在 patch 的时候保证更新是最少的，从而带来巨大的性能提升。</p> <p><a href="https://echarts.apache.org/examples/zh/editor.html?c=geo-svg-scatter-simple&renderer=svg">这个例子</a> 可以给大家带来比较直观的性能提升的感受。新的版本在 SVG 模式下拖动的交互上比之前版本流畅非常多。</p> <table><thead><tr><th style="text-align:center">5.2.2 (Before)</th> <th style="text-align:center">5.3.0 (After)</th></tr></thead> <tbody><tr><td style="text-align:center"><img src alt="before" data-src="images/5-3-0/svg-before.gif"></td> <td style="text-align:center"><img src alt="after" data-src="images/5-3-0/svg-after.gif"></td></tr></tbody></table> <p>除了性能的提升，我们还可以使用中间全量渲染得到的 VDom 做更多的事情，比如下面会介绍的服务端渲染。</p> <h2 id="%E9%9B%B6%E4%BE%9D%E8%B5%96%E7%9A%84%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93" tabindex="-1">零依赖的服务端渲染</h2> <p>在之前的版本 ECharts 也可以实现服务端的渲染，但是必须得依赖 <a href="https://github.com/Automattic/node-canvas">node-canvas</a>，如果是使用 SVG 模式则需要依赖 <a href="https://github.com/jsdom/jsdom">JSDOM</a> 来模拟 DOM 环境。这些依赖一是带来了额外的体积和使用要求，二是也会有更多的性能损耗。</p> <p>这次新的 SVG 渲染器可以让我们从中间的 VDOM 渲染得到字符串，带来了完全零依赖的服务端渲染，输出更精简并且带有 CSS 动画的 SVG 字符串。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token keyword">const</span> echarts <span class="token operator">=</span> <span class="token keyword">require</span><span class="token punctuation">(</span><span class="token string">'echarts'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| |
| <span class="token comment">// 在 SSR 模式下第一个参数不需要再传入 DOM 对象</span> |
| <span class="token keyword">const</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
| renderer<span class="token operator">:</span> <span class="token string">'svg'</span><span class="token punctuation">,</span> <span class="token comment">// 必须使用 SVG 模式</span> |
| ssr<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 开启 SSR</span> |
| width<span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span> <span class="token comment">// 需要指明高和宽</span> |
| height<span class="token operator">:</span> <span class="token number">300</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| |
| <span class="token comment">// 像正常使用一样 setOption</span> |
| chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| xAxis<span class="token operator">:</span> <span class="token punctuation">{</span> |
| type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span> |
| data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Mon'</span><span class="token punctuation">,</span> <span class="token string">'Tue'</span><span class="token punctuation">,</span> <span class="token string">'Wed'</span><span class="token punctuation">,</span> <span class="token string">'Thu'</span><span class="token punctuation">,</span> <span class="token string">'Fri'</span><span class="token punctuation">,</span> <span class="token string">'Sat'</span><span class="token punctuation">,</span> <span class="token string">'Sun'</span><span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| yAxis<span class="token operator">:</span> <span class="token punctuation">{</span> |
| type<span class="token operator">:</span> <span class="token string">'value'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| series<span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">120</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">150</span><span class="token punctuation">,</span> <span class="token number">80</span><span class="token punctuation">,</span> <span class="token number">70</span><span class="token punctuation">,</span> <span class="token number">110</span><span class="token punctuation">,</span> <span class="token number">130</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| type<span class="token operator">:</span> <span class="token string">'bar'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| |
| <span class="token comment">// 输出字符串</span> |
| <span class="token keyword">const</span> svgStr <span class="token operator">=</span> chart<span class="token punctuation">.</span><span class="token function">renderToSVGString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>在此基础上，我们优化了输出的 SVG 字符串，使其在诸如 PowerPoint 等更多的平台上有更好的显示效果。</p> <h2 id="%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9C%B0%E5%9B%BE%E6%8A%95%E5%BD%B1" tabindex="-1">自定义地图投影</h2> <p>地图一直是 ECharts 中使用非常广泛的组件。一般地图组件会使用存储了经纬度的 GeoJSON 格式的数据。而 ECharts 则计算出合适的显示区域然后把经纬度线性映射到这个区域。这是一种最简单的地图投影方式。但是简单的线性投影并无法满足某些复杂的地图场景，例如使用 <a href="https://en.wikipedia.org/wiki/Albers_projection">Albers</a> 投影解决线性投影中面积失真的问题，或者在世界地图中让太平洋显示在中间等等。</p> <p>因此在 5.3.0 里中我们引入了自定义的地图投影，可以通过<code>project</code>和<code>unproject</code>两个方法告诉 ECharts 如何投影坐标，以及如何根据投影后坐标计算经纬度。下面是简单的使用墨卡托投影的例子：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code>series <span class="token operator">=</span> <span class="token punctuation">{</span> |
| type<span class="token operator">:</span> <span class="token string">'map'</span><span class="token punctuation">,</span> |
| projection<span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token function-variable function">project</span><span class="token operator">:</span> point <span class="token operator">=></span> <span class="token punctuation">[</span> |
| <span class="token punctuation">(</span>point<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">/</span> <span class="token number">180</span><span class="token punctuation">)</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span><span class="token punctuation">,</span> |
| <span class="token operator">-</span>Math<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">tan</span><span class="token punctuation">(</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token constant">PI</span> <span class="token operator">/</span> <span class="token number">2</span> <span class="token operator">+</span> <span class="token punctuation">(</span>point<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">/</span> <span class="token number">180</span><span class="token punctuation">)</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span> |
| <span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token function-variable function">unproject</span><span class="token operator">:</span> point <span class="token operator">=></span> <span class="token punctuation">[</span> |
| <span class="token punctuation">(</span>point<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">*</span> <span class="token number">180</span><span class="token punctuation">)</span> <span class="token operator">/</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span><span class="token punctuation">,</span> |
| <span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token number">2</span> <span class="token operator">*</span> <span class="token number">180</span><span class="token punctuation">)</span> <span class="token operator">/</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span><span class="token punctuation">)</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token function">atan</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">exp</span><span class="token punctuation">(</span>point<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">90</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>除了我们自己实现投影公式，我们也可以使用 <a href="https://github.com/d3/d3-geo">d3-geo</a> 等第三方库提供的现成的投影实现：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token keyword">const</span> projection <span class="token operator">=</span> d3<span class="token punctuation">.</span><span class="token function">geoConicEqualArea</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token comment">// ...</span> |
| series <span class="token operator">=</span> <span class="token punctuation">{</span> |
| type<span class="token operator">:</span> <span class="token string">'map'</span><span class="token punctuation">,</span> |
| projection<span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token function-variable function">project</span><span class="token operator">:</span> point <span class="token operator">=></span> <span class="token function">projection</span><span class="token punctuation">(</span>point<span class="token punctuation">)</span><span class="token punctuation">,</span> |
| <span class="token function-variable function">unproject</span><span class="token operator">:</span> point <span class="token operator">=></span> projection<span class="token punctuation">.</span><span class="token function">invert</span><span class="token punctuation">(</span>point<span class="token punctuation">)</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>配合在 5.2 里新增的全局过渡动画特性，我们可以实现不同投影效果之间的动画过渡：</p> <p><img src alt="地图投影动画" data-src="images/5-3-0/map-projection.gif"></p> <p>除了地图的投影之外，我们在这个版本对于地图还做了下面两个增强：</p> <ul><li>对 GeoJSON 数据提供了<code>'LineString'</code>和<code>'MultiLineString'</code>的支持。</li> <li>将默认标签位置的计算从包围盒中心改为最大区域的重心坐标，计算结果更加准确。</li></ul> <h2 id="%E5%A4%9A%E5%9D%90%E6%A0%87%E8%BD%B4%E7%9A%84%E5%88%BB%E5%BA%A6%E5%AF%B9%E9%BD%90" tabindex="-1">多坐标轴的刻度对齐</h2> <p>多坐标轴的刻度对齐是社区中提了很久的一个需求，我们在网上也可以看到很多开发者写的如何在 ECharts 中实现坐标轴对齐的文章，通常都会比较麻烦而且会有比较多的局限性。</p> <p>在 5.3.0 中我们终于引入了数值轴坐标轴刻度对齐的功能。可以在需要对齐刻度的坐标轴中配置<code>alignTicks: true</code>。该坐标轴就会根据第一个坐标轴的刻度划分去调整自己的刻度，实现自动对齐。</p> <div class="md-live layout-bt"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = { |
| tooltip: { |
| trigger: 'axis' |
| }, |
| legend: {}, |
| xAxis: [ |
| { |
| type: 'category', |
| data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
| axisPointer: { |
| type: 'shadow' |
| } |
| } |
| ], |
| yAxis: [ |
| { |
| type: 'value', |
| name: 'Precipitation', |
| alignTicks: true, |
| axisLabel: { |
| formatter: '{value} ml' |
| } |
| }, |
| { |
| type: 'value', |
| name: 'Temperature', |
| axisLabel: { |
| formatter: '{value} °C' |
| } |
| } |
| ], |
| series: [ |
| { |
| name: 'Evaporation', |
| type: 'bar', |
| // prettier-ignore |
| data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] |
| }, |
| { |
| name: 'Precipitation', |
| type: 'bar', |
| // prettier-ignore |
| data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] |
| }, |
| { |
| name: 'Temperature', |
| type: 'line', |
| yAxisIndex: 1, |
| data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] |
| } |
| ] |
| };</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">'axis'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">legend</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Mon'</span><span class="token punctuation">,</span> <span class="token string">'Tue'</span><span class="token punctuation">,</span> <span class="token string">'Wed'</span><span class="token punctuation">,</span> <span class="token string">'Thu'</span><span class="token punctuation">,</span> <span class="token string">'Fri'</span><span class="token punctuation">,</span> <span class="token string">'Sat'</span><span class="token punctuation">,</span> <span class="token string">'Sun'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">axisPointer</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'shadow'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Precipitation'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">alignTicks</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">axisLabel</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">formatter</span><span class="token operator">:</span> <span class="token string">'{value} ml'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Temperature'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">axisLabel</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">formatter</span><span class="token operator">:</span> <span class="token string">'{value} °C'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Evaporation'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> |
| <span class="token comment">// prettier-ignore</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">2.0</span><span class="token punctuation">,</span> <span class="token number">4.9</span><span class="token punctuation">,</span> <span class="token number">7.0</span><span class="token punctuation">,</span> <span class="token number">23.2</span><span class="token punctuation">,</span> <span class="token number">25.6</span><span class="token punctuation">,</span> <span class="token number">76.7</span><span class="token punctuation">,</span> <span class="token number">135.6</span><span class="token punctuation">,</span> <span class="token number">162.2</span><span class="token punctuation">,</span> <span class="token number">32.6</span><span class="token punctuation">,</span> <span class="token number">20.0</span><span class="token punctuation">,</span> <span class="token number">6.4</span><span class="token punctuation">,</span> <span class="token number">3.3</span><span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Precipitation'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> |
| <span class="token comment">// prettier-ignore</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">2.6</span><span class="token punctuation">,</span> <span class="token number">5.9</span><span class="token punctuation">,</span> <span class="token number">9.0</span><span class="token punctuation">,</span> <span class="token number">26.4</span><span class="token punctuation">,</span> <span class="token number">28.7</span><span class="token punctuation">,</span> <span class="token number">70.7</span><span class="token punctuation">,</span> <span class="token number">175.6</span><span class="token punctuation">,</span> <span class="token number">182.2</span><span class="token punctuation">,</span> <span class="token number">48.7</span><span class="token punctuation">,</span> <span class="token number">18.8</span><span class="token punctuation">,</span> <span class="token number">6.0</span><span class="token punctuation">,</span> <span class="token number">2.3</span><span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Temperature'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">yAxisIndex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">2.0</span><span class="token punctuation">,</span> <span class="token number">2.2</span><span class="token punctuation">,</span> <span class="token number">3.3</span><span class="token punctuation">,</span> <span class="token number">4.5</span><span class="token punctuation">,</span> <span class="token number">6.3</span><span class="token punctuation">,</span> <span class="token number">10.2</span><span class="token punctuation">,</span> <span class="token number">20.3</span><span class="token punctuation">,</span> <span class="token number">23.4</span><span class="token punctuation">,</span> <span class="token number">23.0</span><span class="token punctuation">,</span> <span class="token number">16.5</span><span class="token punctuation">,</span> <span class="token number">12.0</span><span class="token punctuation">,</span> <span class="token number">6.2</span><span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="%E6%94%AF%E6%8C%81%E9%AB%98%E4%BA%AE%E5%92%8C%E9%80%89%E4%B8%AD%E7%8A%B6%E6%80%81%E7%9A%84%E5%85%B3%E9%97%AD" tabindex="-1">支持高亮和选中状态的关闭</h2> <p>ECharts 中高亮状态可以在鼠标移到图形上的时候给用户提供反馈，但是在图表中有海量图形的时候，高亮的动画也可能带来交互上的性能问题。特别在 <a href="https://echarts.apache.org/option.html#tooltip">tooltip</a> 或者<a href="https://echarts.apache.org/option.html#legend">图例组件</a>联动触发的高亮会同时高亮多个图形。</p> <p>因此在这个版本中我们新增了<code>emphasis.disabled</code>配置项。如果不需要高亮的反馈，又对交互性能非常在意的话，可以通过这个配置项来关闭高亮状态。</p> <p>与此同时，对于选中状态，我们也新增了<code>select.disabled</code>。该配置项可以用于细粒度配置部分数据不可选。</p> <h2 id="%E6%94%AF%E6%8C%81%E6%95%B4%E4%B8%AA%E7%B3%BB%E5%88%97%E7%9A%84%E9%80%89%E4%B8%AD" tabindex="-1">支持整个系列的选中</h2> <p>在 5.3.0 中我们支持将<code>selectedMode</code>配置为<code>'series'</code>以实现系列所有数据的选中。</p> <h2 id="tooltip-%E4%B8%AD%E7%9A%84%E6%95%B0%E5%80%BC%E6%A0%BC%E5%BC%8F%E5%8C%96" tabindex="-1">tooltip 中的数值格式化</h2> <p>tooltip 可以在用户移到图形上的时候通过提示框显示更详细的相关信息，ECharts 也提供了<code>formatter</code>回调函数可以让开发者更灵活的自定义提示框的内容。</p> <p>但是我们发现大部分时候开发者只是需要格式化提示框中的数字部分，例如固定精度，加上<code>$</code>前缀等等，而之前为了格式化数字开发者只能通过<code>formatter</code>重写整个提示框的内容。特别是在 5.0 后 ECharts 的提示框结构更复杂，样式更美观了，重写变得成本很大而且很难达到默认的效果。</p> <p>因此在这个版本我们为 tooltip 新增了<code>valueFormatter</code>配置项用于数值部分的格式化。</p> <p>还是刚才那个坐标轴对齐的例子，我们可以为提示框中的数值部分加上 °C 和 ml 的后缀。</p> <div class="md-live layout-bt"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = { |
| tooltip: { |
| trigger: 'axis' |
| }, |
| legend: {}, |
| xAxis: [ |
| { |
| type: 'category', |
| data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
| axisPointer: { |
| type: 'shadow' |
| } |
| } |
| ], |
| yAxis: [ |
| { |
| type: 'value', |
| name: 'Precipitation', |
| alignTicks: true, |
| axisLabel: { |
| formatter: '{value} ml' |
| } |
| }, |
| { |
| type: 'value', |
| name: 'Temperature', |
| axisLabel: { |
| formatter: '{value} °C' |
| } |
| } |
| ], |
| series: [ |
| { |
| name: 'Evaporation', |
| type: 'bar', |
| tooltip: { |
| valueFormatter: value => value + ' ml' |
| }, |
| // prettier-ignore |
| data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] |
| }, |
| { |
| name: 'Precipitation', |
| type: 'bar', |
| tooltip: { |
| valueFormatter: value => value + ' ml' |
| }, |
| // prettier-ignore |
| data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] |
| }, |
| { |
| name: 'Temperature', |
| type: 'line', |
| yAxisIndex: 1, |
| tooltip: { |
| valueFormatter: value => value + ' °C' |
| }, |
| data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] |
| } |
| ] |
| };</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">'axis'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">legend</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Mon'</span><span class="token punctuation">,</span> <span class="token string">'Tue'</span><span class="token punctuation">,</span> <span class="token string">'Wed'</span><span class="token punctuation">,</span> <span class="token string">'Thu'</span><span class="token punctuation">,</span> <span class="token string">'Fri'</span><span class="token punctuation">,</span> <span class="token string">'Sat'</span><span class="token punctuation">,</span> <span class="token string">'Sun'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">axisPointer</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'shadow'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Precipitation'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">alignTicks</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">axisLabel</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">formatter</span><span class="token operator">:</span> <span class="token string">'{value} ml'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Temperature'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">axisLabel</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">formatter</span><span class="token operator">:</span> <span class="token string">'{value} °C'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Evaporation'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token function-variable function">valueFormatter</span><span class="token operator">:</span> <span class="token parameter">value</span> <span class="token operator">=></span> value <span class="token operator">+</span> <span class="token string">' ml'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token comment">// prettier-ignore</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">2.0</span><span class="token punctuation">,</span> <span class="token number">4.9</span><span class="token punctuation">,</span> <span class="token number">7.0</span><span class="token punctuation">,</span> <span class="token number">23.2</span><span class="token punctuation">,</span> <span class="token number">25.6</span><span class="token punctuation">,</span> <span class="token number">76.7</span><span class="token punctuation">,</span> <span class="token number">135.6</span><span class="token punctuation">,</span> <span class="token number">162.2</span><span class="token punctuation">,</span> <span class="token number">32.6</span><span class="token punctuation">,</span> <span class="token number">20.0</span><span class="token punctuation">,</span> <span class="token number">6.4</span><span class="token punctuation">,</span> <span class="token number">3.3</span><span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Precipitation'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token function-variable function">valueFormatter</span><span class="token operator">:</span> <span class="token parameter">value</span> <span class="token operator">=></span> value <span class="token operator">+</span> <span class="token string">' ml'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token comment">// prettier-ignore</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">2.6</span><span class="token punctuation">,</span> <span class="token number">5.9</span><span class="token punctuation">,</span> <span class="token number">9.0</span><span class="token punctuation">,</span> <span class="token number">26.4</span><span class="token punctuation">,</span> <span class="token number">28.7</span><span class="token punctuation">,</span> <span class="token number">70.7</span><span class="token punctuation">,</span> <span class="token number">175.6</span><span class="token punctuation">,</span> <span class="token number">182.2</span><span class="token punctuation">,</span> <span class="token number">48.7</span><span class="token punctuation">,</span> <span class="token number">18.8</span><span class="token punctuation">,</span> <span class="token number">6.0</span><span class="token punctuation">,</span> <span class="token number">2.3</span><span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Temperature'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">yAxisIndex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token function-variable function">valueFormatter</span><span class="token operator">:</span> <span class="token parameter">value</span> <span class="token operator">=></span> value <span class="token operator">+</span> <span class="token string">' °C'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">2.0</span><span class="token punctuation">,</span> <span class="token number">2.2</span><span class="token punctuation">,</span> <span class="token number">3.3</span><span class="token punctuation">,</span> <span class="token number">4.5</span><span class="token punctuation">,</span> <span class="token number">6.3</span><span class="token punctuation">,</span> <span class="token number">10.2</span><span class="token punctuation">,</span> <span class="token number">20.3</span><span class="token punctuation">,</span> <span class="token number">23.4</span><span class="token punctuation">,</span> <span class="token number">23.0</span><span class="token punctuation">,</span> <span class="token number">16.5</span><span class="token punctuation">,</span> <span class="token number">12.0</span><span class="token punctuation">,</span> <span class="token number">6.2</span><span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>每个系列都可以根据自己的数值格式配置自己的<code>valueFormatter</code>。</p> <h2 id="%E6%9B%B4%E7%81%B5%E6%B4%BB%E7%9A%84%E6%89%87%E5%8C%BA%E5%9C%86%E8%A7%92" tabindex="-1">更灵活的扇区圆角</h2> <p>在 5.0 中我们为扇区新增了圆角的配置，可以让饼图，旭日图变得更有趣。之前圆角的配置只支持内半径和外半径分开配置，这次我们更进一步，支持扇区的四个角都配置成不同的圆角大小，带来更灵活的呈现。</p> <div class="md-live layout-lr"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = { |
| tooltip: { |
| trigger: 'item' |
| }, |
| legend: { |
| top: '5%', |
| left: 'center' |
| }, |
| series: [ |
| { |
| name: 'Access From', |
| type: 'pie', |
| radius: ['30%', '70%'], |
| roseType: 'angle', |
| itemStyle: { |
| borderRadius: [20, 5, 5, 10], |
| borderColor: '#fff', |
| borderWidth: 2 |
| }, |
| label: { |
| show: false |
| }, |
| data: [ |
| { value: 800, name: 'Search Engine' }, |
| { value: 735, name: 'Direct' }, |
| { value: 580, name: 'Email' }, |
| { value: 484, name: 'Union Ads' }, |
| { value: 400, name: 'Video Ads' } |
| ] |
| } |
| ] |
| };</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">'item'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">legend</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token string">'5%'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token string">'center'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Access From'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">radius</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'30%'</span><span class="token punctuation">,</span> <span class="token string">'70%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">roseType</span><span class="token operator">:</span> <span class="token string">'angle'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">itemStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">borderRadius</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderColor</span><span class="token operator">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">2</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">false</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">800</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Search Engine'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">735</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Direct'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">580</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Email'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">484</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Union Ads'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Video Ads'</span> <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="%E9%A5%BC%E5%9B%BE%E7%9A%84%E5%A4%8D%E6%9D%82%E6%A0%87%E7%AD%BE%E4%BC%98%E5%8C%96" tabindex="-1">饼图的复杂标签优化</h2> <p>饼图一直是 ECharts 中标签呈现最复杂的图表之一，我们从 5.0 开始就一直在饼图的标签布局、显示上做了很多的优化。</p> <p>这次我们针对使用了换行，背景色，富文本等格式比较复杂的饼图标签做了深度的优化。在宽度的自适应、超出容器、引导线的计算上比之前有了更好的效果：</p> <table><thead><tr><th style="text-align:center">5.2.2 (Before)</th> <th style="text-align:center">5.3.0 (After)</th></tr></thead> <tbody><tr><td style="text-align:center"><img src alt="before" data-src="images/5-3-0/pie-label-before.png"></td> <td style="text-align:center"><img src alt="after" data-src="images/5-3-0/pie-label-after.png"></td></tr> <tr><td style="text-align:center"><img src alt="before" data-src="images/5-3-0/pie-label-before2.png"></td> <td style="text-align:center"><img src alt="after" data-src="images/5-3-0/pie-label-after2.png"></td></tr></tbody></table> <h2 id="%E6%9F%B1%E7%8A%B6%E5%9B%BE-large-%E6%A8%A1%E5%BC%8F%E4%BC%98%E5%8C%96" tabindex="-1">柱状图 large 模式优化</h2> <p>在数据量很多（> 2k）的时候，我们支持柱状图通过开启 <a href="https://echarts.apache.org/option.html#series-bar.large">large</a> 模式来加速渲染，提升交互性能，但是之前 <a href="https://echarts.apache.org/option.html#series-bar.large">large</a> 模式下对柱状图布局比较简单，不支持多系列堆叠后的布局。在 5.3.0 中我们对 <a href="https://echarts.apache.org/option.html#series-bar.large">large</a> 模式的布局进行了优化，跟普通模式保持了一致性。我们可以在更多的场景中通过开启 <a href="https://echarts.apache.org/option.html#series-bar.large">large</a> 来优化柱状图的性能。</p> <p>除此之外，优化后的柱状图布局也修复了在对数轴这样的非线性轴上堆叠效果不正确的 bug。</p> <h2 id="%E9%9D%9E%E5%85%BC%E5%AE%B9%E6%94%B9%E5%8A%A8" tabindex="-1">非兼容改动</h2> <h3 id="registermap-%E5%92%8C-getmap-%E6%96%B9%E6%B3%95%E9%9C%80%E8%A6%81%E5%9C%A8%E5%BC%95%E5%85%A5%E5%9C%B0%E5%9B%BE%E7%BB%84%E4%BB%B6%E5%90%8E%E6%89%8D%E8%83%BD%E4%BD%BF%E7%94%A8" tabindex="-1">registerMap 和 getMap 方法需要在引入地图组件后才能使用</h3> <p>为了减少最小打包的体积，我们从核心模块中移除了地图数据管理的方法<code>getMap</code>和<code>registerMap</code>。</p> <p>如果你是<a href="https://echarts.apache.org/handbook/zh/basics/import/#%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-echarts-%E5%9B%BE%E8%A1%A8%E5%92%8C%E7%BB%84%E4%BB%B6">按需引入</a> ECharts 组件的话，需要保证先引入了<code>GeoComponent</code>或者<code>MapChart</code>之后，才能使用<code>registerMap</code>注册地图数据。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts/core'</span><span class="token punctuation">;</span> |
| <span class="token keyword">import</span> <span class="token punctuation">{</span> MapChart <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/charts'</span><span class="token punctuation">;</span> |
| |
| echarts<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">[</span>MapChart<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| |
| <span class="token comment">// 必须在使用 use 方法注册了 MapChart 后才能使用 registerMap 注册地图</span> |
| echarts<span class="token punctuation">.</span><span class="token function">registerMap</span><span class="token punctuation">(</span><span class="token string">'world'</span><span class="token punctuation">,</span> worldJSON<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>如果你是使用<code>import * as echarts from 'echarts'</code>全量引入，这次改动不会对你产生任何影响。</p> <h3 id="%E6%8A%98%E7%BA%BF%E5%9B%BE%E7%A7%BB%E9%99%A4%E9%BB%98%E8%AE%A4%E9%AB%98%E4%BA%AE%E5%8A%A0%E7%B2%97%E7%9A%84%E6%95%88%E6%9E%9C" tabindex="-1">折线图移除默认高亮加粗的效果</h3> <p>我们在 5.0 里对折线图引入了默认高亮加粗的效果，但是社区反馈这个在很多场景效果并不好，所以在这个版本我们将这个效果从默认开启改为默认关闭，如果需要使用高亮加粗，则可以显式配置：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code>series <span class="token operator">=</span> <span class="token punctuation">{</span> |
| type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span> |
| <span class="token comment">//...</span> |
| emphasis<span class="token operator">:</span> <span class="token punctuation">{</span> |
| lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span> |
| width<span class="token operator">:</span> <span class="token string">'bolder'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E5%AE%8C%E6%95%B4%E6%9B%B4%E6%96%B0%E8%AE%B0%E5%BD%95" tabindex="-1">完整更新记录</h2> <p>查看<a href="https://echarts.apache.org//changelog.html#v5-3-0">版本更新</a></p></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/5-3-0.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"><span>pissang</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><span>Ovilia</span></a><a href="https://github.com/plainheart" target="_blank" class="post-contributor"><span>plainheart</span></a></div></div></div></div></div></div></div></div></div></div><script>window.__NUXT__=function(g,C,I,A,i,t,e,d,l,o,a,r,c,n,s,B,h,p,b,w,E,m,y,G,W,L,Z,H,K,D,M,V,u,J,Y,O,N,v,F,X,S,f,R,x,z,j,T,k,Q,U,P,q,_,$,gg,Cg,Ig,Ag,ig,tg){return{layout:"default",data:[{html:'<h1 id="apache-echarts-5.3.0-%E7%89%B9%E6%80%A7%E4%BB%8B%E7%BB%8D" tabindex="-1">Apache ECharts 5.3.0 特性介绍</h1>\n<p>Apache ECharts 5.3.0 在动画表达力、渲染性能、服务端渲染上做了大幅度的增强，同时也新增了多坐标轴刻度自动对齐、tooltip 数值格式化、地图投影等社区中期盼已久的特性。</p>\n<h2 id="%E5%85%B3%E9%94%AE%E5%B8%A7%E5%8A%A8%E7%94%BB" tabindex="-1">关键帧动画</h2>\n<p>在之前 ECharts 的动画集中在图形添加、更新以及移除的过渡动画上，过渡动画往往只有开始状态和结束状态。为了表达更复杂的动画效果，我们 5.3.0 中为<a href="https://echarts.apache.org/option.html#series-custom">自定义系列</a>和<a href="https://echarts.apache.org/option.html#graphic">图形组件</a>引入了全新的关键帧动画。</p>\n<p>下面是一个简单的通过关键帧动画实现的呼吸动画的效果。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGdyYXBoaWM6IHsKICAgIHR5cGU6ICdjaXJjbGUnLAogICAgc2hhcGU6IHsgcjogMTAwIH0sCiAgICBsZWZ0OiAnY2VudGVyJywKICAgIHRvcDogJ2NlbnRlcicsCiAgICBrZXlmcmFtZUFuaW1hdGlvbjogWwogICAgICB7CiAgICAgICAgZHVyYXRpb246IDMwMDAsCiAgICAgICAgbG9vcDogdHJ1ZSwKICAgICAgICBrZXlmcmFtZXM6IFsKICAgICAgICAgIHsKICAgICAgICAgICAgcGVyY2VudDogMC41LAogICAgICAgICAgICBlYXNpbmc6ICdzaW51c29pZGFsSW5PdXQnLAogICAgICAgICAgICBzY2FsZVg6IDAuMSwKICAgICAgICAgICAgc2NhbGVZOiAwLjEKICAgICAgICAgIH0sCiAgICAgICAgICB7CiAgICAgICAgICAgIHBlcmNlbnQ6IDEsCiAgICAgICAgICAgIGVhc2luZzogJ3NpbnVzb2lkYWxJbk91dCcsCiAgICAgICAgICAgIHNjYWxlWDogMSwKICAgICAgICAgICAgc2NhbGVZOiAxCiAgICAgICAgICB9CiAgICAgICAgXQogICAgICB9CiAgICBdCiAgfQp9Ow\'" v-bind="{layout: \'lr\', height:300}" />\n<p>在关键帧动画中，你可以配置动画时长、缓动、是否循环、每个关键帧的位置、缓动以及图形属性等。而且每个图形可以同时设置多个不同配置的关键帧动画。灵活的配置让我们可以实现非常复杂的动画效果，下面列举几个可以应用关键帧动画的场景。</p>\n<h3 id="%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8A%A0%E8%BD%BD%E5%8A%A8%E7%94%BB" tabindex="-1">自定义加载动画</h3>\n<p>ECharts 默认内置了一个加载动画，可以调用<code>showLoading</code>显示。开发者经常会提需求需要更多的加载动画效果。现在有了关键帧动画后，我们可以通过图形（<a href="https://echarts.apache.org/option.html#graphic">graphic</a>）组件配合关键帧动画实现任何想要的加载动画效果。</p>\n<p>比如文本描边动画：</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGdyYXBoaWM6IHsKICAgIGVsZW1lbnRzOiBbCiAgICAgIHsKICAgICAgICB0eXBlOiAndGV4dCcsCiAgICAgICAgbGVmdDogJ2NlbnRlcicsCiAgICAgICAgdG9wOiAnY2VudGVyJywKICAgICAgICBzdHlsZTogewogICAgICAgICAgdGV4dDogJ0FwYWNoZSBFQ2hhcnRzJywKICAgICAgICAgIGZvbnRTaXplOiA0MCwKICAgICAgICAgIGZvbnRXZWlnaHQ6ICdib2xkJywKICAgICAgICAgIGxpbmVEYXNoOiBbMCwgMjAwXSwKICAgICAgICAgIGxpbmVEYXNoT2Zmc2V0OiAwLAogICAgICAgICAgZmlsbDogJ3RyYW5zcGFyZW50JywKICAgICAgICAgIHN0cm9rZTogJyMwMDAnLAogICAgICAgICAgbGluZVdpZHRoOiAxCiAgICAgICAgfSwKICAgICAgICBrZXlmcmFtZUFuaW1hdGlvbjogewogICAgICAgICAgZHVyYXRpb246IDMwMDAsCiAgICAgICAgICBsb29wOiB0cnVlLAogICAgICAgICAga2V5ZnJhbWVzOiBbCiAgICAgICAgICAgIHsKICAgICAgICAgICAgICBwZXJjZW50OiAwLjcsCiAgICAgICAgICAgICAgc3R5bGU6IHsKICAgICAgICAgICAgICAgIGZpbGw6ICd0cmFuc3BhcmVudCcsCiAgICAgICAgICAgICAgICBsaW5lRGFzaE9mZnNldDogMjAwLAogICAgICAgICAgICAgICAgbGluZURhc2g6IFsyMDAsIDBdCiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9LAogICAgICAgICAgICB7CiAgICAgICAgICAgICAgLy8gU3RvcCBmb3IgYSB3aGlsZS4KICAgICAgICAgICAgICBwZXJjZW50OiAwLjgsCiAgICAgICAgICAgICAgc3R5bGU6IHsKICAgICAgICAgICAgICAgIGZpbGw6ICd0cmFuc3BhcmVudCcKICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0sCiAgICAgICAgICAgIHsKICAgICAgICAgICAgICBwZXJjZW50OiAxLAogICAgICAgICAgICAgIHN0eWxlOiB7CiAgICAgICAgICAgICAgICBmaWxsOiAnYmxhY2snCiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICBdCiAgICAgICAgfQogICAgICB9CiAgICBdCiAgfQp9Ow\'" v-bind="{layout: \'lr\', height:300}" />\n<p>或者柱状图形状的加载动画：</p>\n<md-live lang="js" code="\'Y29uc3QgY29sdW1ucyA9IFtdOwpmb3IgKGxldCBpID0gMDsgaSA8IDc7IGkrKykgewogIGNvbHVtbnMucHVzaCh7CiAgICB0eXBlOiAncmVjdCcsCiAgICB4OiBpICogMjAsCiAgICBzaGFwZTogewogICAgICB4OiAwLAogICAgICB5OiAtNDAsCiAgICAgIHdpZHRoOiAxMCwKICAgICAgaGVpZ2h0OiA4MAogICAgfSwKICAgIHN0eWxlOiB7CiAgICAgIGZpbGw6ICcjNTQ3MGM2JwogICAgfSwKICAgIGtleWZyYW1lQW5pbWF0aW9uOiB7CiAgICAgIGR1cmF0aW9uOiAxMDAwLAogICAgICBkZWxheTogaSAqIDIwMCwKICAgICAgbG9vcDogdHJ1ZSwKICAgICAga2V5ZnJhbWVzOiBbCiAgICAgICAgewogICAgICAgICAgcGVyY2VudDogMC41LAogICAgICAgICAgc2NhbGVZOiAwLjEsCiAgICAgICAgICBlYXNpbmc6ICdjdWJpY0luJwogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgcGVyY2VudDogMSwKICAgICAgICAgIHNjYWxlWTogMSwKICAgICAgICAgIGVhc2luZzogJ2N1YmljT3V0JwogICAgICAgIH0KICAgICAgXQogICAgfQogIH0pOwp9Cm9wdGlvbiA9IHsKICBncmFwaGljOiB7CiAgICBlbGVtZW50czogWwogICAgICB7CiAgICAgICAgdHlwZTogJ2dyb3VwJywKICAgICAgICBsZWZ0OiAnY2VudGVyJywKICAgICAgICB0b3A6ICdjZW50ZXInLAogICAgICAgIGNoaWxkcmVuOiBjb2x1bW5zCiAgICAgIH0KICAgIF0KICB9Cn07\'" v-bind="{layout: \'lr\', height:300}" />\n<h3 id="%E6%89%A9%E5%B1%95%E6%9B%B4%E4%B8%B0%E5%AF%8C%E7%9A%84%E6%95%A3%E7%82%B9%E5%9B%BE%E5%8A%A8%E7%94%BB%E7%89%B9%E6%95%88" tabindex="-1">扩展更丰富的散点图动画特效</h3>\n<p>带有特效动画的散点图一直以来是 ECharts 的特色功能。开发者可以使用 <a href="https://echarts.apache.org/option.html#series-effectScatter">effectScatter</a> 系列来实现带有涟漪特效的动态散点图，这种特效动画除了让作品更有趣，也起到了高亮提示用户的效果。跟加载动画一样，开发者也常常提出需要更多动画效果的需求。现在我们可以在自定义系列中通过使用关键帧动画来实现更复杂的特效。</p>\n<p>比如下面例子在 SVG 地图上给自定义系列绘制的图钉加上了跳动的动画效果，同时配上了涟漪动画。</p>\n\x3c!-- <md-example src="geo-svg-custom-effect" width="100%" height="500" /> --\x3e\n<md-live lang="js" code="\'ZmV0Y2goCiAgJ2h0dHBzOi8vZWNoYXJ0cy5hcGFjaGUub3JnL2V4YW1wbGVzL2RhdGEvYXNzZXQvZ2VvL01hcF9vZl9JY2VsYW5kLnN2ZycKKQogIC50aGVuKHJlc3BvbnNlID0-IHJlc3BvbnNlLnRleHQoKSkKICAudGhlbihzdmcgPT4gewogICAgZWNoYXJ0cy5yZWdpc3Rlck1hcCgnaWNlbGFuZF9zdmcnLCB7IHN2Zzogc3ZnIH0pOwogICAgb3B0aW9uID0gewogICAgICBnZW86IHsKICAgICAgICBtYXA6ICdpY2VsYW5kX3N2ZycsCiAgICAgICAgbGVmdDogMCwKICAgICAgICByaWdodDogMAogICAgICB9LAogICAgICBzZXJpZXM6IHsKICAgICAgICB0eXBlOiAnY3VzdG9tJywKICAgICAgICBjb29yZGluYXRlU3lzdGVtOiAnZ2VvJywKICAgICAgICBnZW9JbmRleDogMCwKICAgICAgICB6bGV2ZWw6IDEsCiAgICAgICAgZGF0YTogWwogICAgICAgICAgWzQ4OCwgNDU5LCAxMDBdLAogICAgICAgICAgWzc3MCwgNzU3LCAzMF0sCiAgICAgICAgICBbMTE4MCwgNzQzLCA4MF0sCiAgICAgICAgICBbODk0LCAxMTg4LCA2MV0sCiAgICAgICAgICBbMTM3MiwgNDc3LCA3MF0sCiAgICAgICAgICBbMTM3OCwgOTM1LCA4MV0KICAgICAgICBdLAogICAgICAgIHJlbmRlckl0ZW0ocGFyYW1zLCBhcGkpIHsKICAgICAgICAgIGNvbnN0IGNvb3JkID0gYXBpLmNvb3JkKFsKICAgICAgICAgICAgYXBpLnZhbHVlKDAsIHBhcmFtcy5kYXRhSW5kZXgpLAogICAgICAgICAgICBhcGkudmFsdWUoMSwgcGFyYW1zLmRhdGFJbmRleCkKICAgICAgICAgIF0pOwoKICAgICAgICAgIGNvbnN0IGNpcmNsZXMgPSBbXTsKICAgICAgICAgIGZvciAobGV0IGkgPSAwOyBpIDwgNTsgaSsrKSB7CiAgICAgICAgICAgIGNpcmNsZXMucHVzaCh7CiAgICAgICAgICAgICAgdHlwZTogJ2NpcmNsZScsCiAgICAgICAgICAgICAgc2hhcGU6IHsKICAgICAgICAgICAgICAgIGN4OiAwLAogICAgICAgICAgICAgICAgY3k6IDAsCiAgICAgICAgICAgICAgICByOiAzMAogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgc3R5bGU6IHsKICAgICAgICAgICAgICAgIHN0cm9rZTogJ3JlZCcsCiAgICAgICAgICAgICAgICBmaWxsOiAnbm9uZScsCiAgICAgICAgICAgICAgICBsaW5lV2lkdGg6IDIKICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgIC8vIFJpcHBsZSBhbmltYXRpb24KICAgICAgICAgICAgICBrZXlmcmFtZUFuaW1hdGlvbjogewogICAgICAgICAgICAgICAgZHVyYXRpb246IDQwMDAsCiAgICAgICAgICAgICAgICBsb29wOiB0cnVlLAogICAgICAgICAgICAgICAgZGVsYXk6ICgtaSAvIDQpICogNDAwMCwKICAgICAgICAgICAgICAgIGtleWZyYW1lczogWwogICAgICAgICAgICAgICAgICB7CiAgICAgICAgICAgICAgICAgICAgcGVyY2VudDogMCwKICAgICAgICAgICAgICAgICAgICBzY2FsZVg6IDAsCiAgICAgICAgICAgICAgICAgICAgc2NhbGVZOiAwLAogICAgICAgICAgICAgICAgICAgIHN0eWxlOiB7CiAgICAgICAgICAgICAgICAgICAgICBvcGFjaXR5OiAxCiAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgICAgICB7CiAgICAgICAgICAgICAgICAgICAgcGVyY2VudDogMSwKICAgICAgICAgICAgICAgICAgICBzY2FsZVg6IDEsCiAgICAgICAgICAgICAgICAgICAgc2NhbGVZOiAwLjQsCiAgICAgICAgICAgICAgICAgICAgc3R5bGU6IHsKICAgICAgICAgICAgICAgICAgICAgIG9wYWNpdHk6IDAKICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgIF0KICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0pOwogICAgICAgICAgfQogICAgICAgICAgcmV0dXJuIHsKICAgICAgICAgICAgdHlwZTogJ2dyb3VwJywKICAgICAgICAgICAgeDogY29vcmRbMF0sCiAgICAgICAgICAgIHk6IGNvb3JkWzFdLAogICAgICAgICAgICBjaGlsZHJlbjogWwogICAgICAgICAgICAgIC4uLmNpcmNsZXMsCiAgICAgICAgICAgICAgewogICAgICAgICAgICAgICAgdHlwZTogJ3BhdGgnLAogICAgICAgICAgICAgICAgc2hhcGU6IHsKICAgICAgICAgICAgICAgICAgZDoKICAgICAgICAgICAgICAgICAgICAnTTE2IDBjLTUuNTIzIDAtMTAgNC40NzctMTAgMTAgMCAxMCAxMCAyMiAxMCAyMnMxMC0xMiAxMC0yMmMwLTUuNTIzLTQuNDc3LTEwLTEwLTEwek0xNiAxNmMtMy4zMTQgMC02LTIuNjg2LTYtNnMyLjY4Ni02IDYtNiA2IDIuNjg2IDYgNi0yLjY4NiA2LTYgNnonLAogICAgICAgICAgICAgICAgICB4OiAtMTAsCiAgICAgICAgICAgICAgICAgIHk6IC0zNSwKICAgICAgICAgICAgICAgICAgd2lkdGg6IDIwLAogICAgICAgICAgICAgICAgICBoZWlnaHQ6IDQwCiAgICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgICAgc3R5bGU6IHsKICAgICAgICAgICAgICAgICAgZmlsbDogJ3JlZCcKICAgICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgICAvLyBKdW1wIGFuaW1hdGlvbi4KICAgICAgICAgICAgICAgIGtleWZyYW1lQW5pbWF0aW9uOiB7CiAgICAgICAgICAgICAgICAgIGR1cmF0aW9uOiAxMDAwLAogICAgICAgICAgICAgICAgICBsb29wOiB0cnVlLAogICAgICAgICAgICAgICAgICBkZWxheTogTWF0aC5yYW5kb20oKSAqIDEwMDAsCiAgICAgICAgICAgICAgICAgIGtleWZyYW1lczogWwogICAgICAgICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgICAgICAgIHk6IC0xMCwKICAgICAgICAgICAgICAgICAgICAgIHBlcmNlbnQ6IDAuNSwKICAgICAgICAgICAgICAgICAgICAgIGVhc2luZzogJ2N1YmljT3V0JwogICAgICAgICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgICAgICAgewogICAgICAgICAgICAgICAgICAgICAgeTogMCwKICAgICAgICAgICAgICAgICAgICAgIHBlcmNlbnQ6IDEsCiAgICAgICAgICAgICAgICAgICAgICBlYXNpbmc6ICdib3VuY2VPdXQnCiAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICBdCiAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgfQogICAgICAgICAgICBdCiAgICAgICAgICB9OwogICAgICAgIH0KICAgICAgfQogICAgfTsKCiAgICBteUNoYXJ0LnNldE9wdGlvbihvcHRpb24pOwogIH0pOw\'" v-bind="{layout: \'lr\', readOnly: true }" />\n\x3c!-- ### 在大屏图表上放入科技感的动画特效 --\x3e\n<h3 id="%E5%8A%A0%E8%BD%BD-lottie-%E5%8A%A8%E7%94%BB" tabindex="-1">加载 Lottie 动画</h3>\n<p>为了充分发掘出新的关键帧动画的能力，ECharts 团队的沈毅写了一个 <a href="https://github.com/pissang/lottie-parser">Lottie 动画的解析库</a>，可以将 Lottie 动画文件解析成 ECharts 的图形格式进行渲染。结合 Lottie 的表达力我们可以进一步的在我们的项目中绘制出细腻的动画。</p>\n<h2 id="%E5%9B%BE%E5%BD%A2%E7%BB%84%E4%BB%B6%E8%BF%87%E6%B8%A1%E5%8A%A8%E7%94%BB" tabindex="-1">图形组件过渡动画</h2>\n<p>我们在 5.0 里为自定义系列中返回的图形提供了更灵活的过渡动画配置。可以通过<code>transition</code>, <code>enterFrom</code>, <code>leaveTo</code>三个配置项来配置每个图形哪些属性会拥有过渡动画，当图形创建和被移除的时候该执行怎么样的动画。例如：</p>\n<md-code-block lang="js" code="\'ZnVuY3Rpb24gcmVuZGVySXRlbSgpIHsKICAvLy4uLgogIHJldHVybiB7CiAgICAvLy4uLgogICAgeDogMTAwLAogICAgLy8gJ3N0eWxlJywgJ3gnLCAneScg5Lya6KKr5Yqo55S7CiAgICB0cmFuc2l0aW9uOiBbJ3N0eWxlJywgJ3gnLCAneSddLAogICAgZW50ZXJGcm9tOiB7CiAgICAgIHN0eWxlOiB7CiAgICAgICAgLy8g5reh5YWlCiAgICAgICAgb3BhY2l0eTogMAogICAgICB9LAogICAgICAvL-S7juW3puS-p-mjnuWFpQogICAgICB4OiAwCiAgICB9LAogICAgbGVhdmVUbzogewogICAgICAvLyDmt6Hlh7oKICAgICAgb3BhY2l0eTogMAogICAgfSwKICAgIC8vIOWQkeWPs-S-p-mjnuWHugogICAgeDogMjAwCiAgfTsKfQ\'" line-highlights="\'\'" />\n<p>在 5.3.0 中我们把这些过渡动画的配置扩展到了图形（graphic）组件中，并且做了更多的增强：</p>\n<p>如果你不想一一写出每个要动画的属性，现在你可以直接配置<code>transition: \'all\'</code>为所有属性都加上动画过渡。</p>\n<p>与此同时我们还新增了<code>enterAnimation</code>、<code>updateAnimation</code>、<code>leaveAnimation</code>分别配置每个图形入场、更新、出场动画的时长（duration）、延迟（delay）和缓动（easing）。除此之外，渐变色现在也支持动画了。</p>\n<h2 id="%E5%85%A8%E6%96%B0%E7%9A%84-svg-%E6%B8%B2%E6%9F%93%E5%99%A8" tabindex="-1">全新的 SVG 渲染器</h2>\n<p>在 5.3.0 中我们重构了我们的 SVG 渲染器，新的 SVG 渲染器能够带来 2x ~ 10x 的性能提升，在某些特殊场景中甚至能有数十倍的提升。</p>\n<p>之前的 SVG 渲染器我们直接从渲染队列更新到 DOM。但是因为 zrender 的图形属性跟 DOM 并不是一一对应的，因此中间需要实现非常复杂的 Diff 逻辑，容易出错而且在某些场景下性能并不能做到最好。在这个版本我们重构成先全量渲染到 VDOM，然后再将 VDOM patch 到 DOM 完成渲染。全量渲染可以避免复杂的 Diff 逻辑带来的潜在 Bug。而 VDOM 和 DOM 的一一对应可以保证在 patch 的时候保证更新是最少的，从而带来巨大的性能提升。</p>\n<p><a href="https://echarts.apache.org/examples/zh/editor.html?c=geo-svg-scatter-simple&renderer=svg">这个例子</a> 可以给大家带来比较直观的性能提升的感受。新的版本在 SVG 模式下拖动的交互上比之前版本流畅非常多。</p>\n<table>\n<thead>\n<tr>\n<th style="text-align:center">5.2.2 (Before)</th>\n<th style="text-align:center">5.3.0 (After)</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style="text-align:center"><img src="" alt="before" data-src="images/5-3-0/svg-before.gif"></td>\n<td style="text-align:center"><img src="" alt="after" data-src="images/5-3-0/svg-after.gif"></td>\n</tr>\n</tbody>\n</table>\n<p>除了性能的提升，我们还可以使用中间全量渲染得到的 VDom 做更多的事情，比如下面会介绍的服务端渲染。</p>\n<h2 id="%E9%9B%B6%E4%BE%9D%E8%B5%96%E7%9A%84%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93" tabindex="-1">零依赖的服务端渲染</h2>\n<p>在之前的版本 ECharts 也可以实现服务端的渲染，但是必须得依赖 <a href="https://github.com/Automattic/node-canvas">node-canvas</a>，如果是使用 SVG 模式则需要依赖 <a href="https://github.com/jsdom/jsdom">JSDOM</a> 来模拟 DOM 环境。这些依赖一是带来了额外的体积和使用要求，二是也会有更多的性能损耗。</p>\n<p>这次新的 SVG 渲染器可以让我们从中间的 VDOM 渲染得到字符串，带来了完全零依赖的服务端渲染，输出更精简并且带有 CSS 动画的 SVG 字符串。</p>\n<md-code-block lang="ts" code="\'Y29uc3QgZWNoYXJ0cyA9IHJlcXVpcmUoJ2VjaGFydHMnKTsKCi8vIOWcqCBTU1Ig5qih5byP5LiL56ys5LiA5Liq5Y-C5pWw5LiN6ZyA6KaB5YaN5Lyg5YWlIERPTSDlr7nosaEKY29uc3QgY2hhcnQgPSBlY2hhcnRzLmluaXQobnVsbCwgbnVsbCwgewogIHJlbmRlcmVyOiAnc3ZnJywgLy8g5b-F6aG75L2_55SoIFNWRyDmqKHlvI8KICBzc3I6IHRydWUsIC8vIOW8gOWQryBTU1IKICB3aWR0aDogNDAwLCAvLyDpnIDopoHmjIfmmI7pq5jlkozlrr0KICBoZWlnaHQ6IDMwMAp9KTsKCi8vIOWDj-ato-W4uOS9v-eUqOS4gOagtyBzZXRPcHRpb24KY2hhcnQuc2V0T3B0aW9uKHsKICB4QXhpczogewogICAgdHlwZTogJ2NhdGVnb3J5JywKICAgIGRhdGE6IFsnTW9uJywgJ1R1ZScsICdXZWQnLCAnVGh1JywgJ0ZyaScsICdTYXQnLCAnU3VuJ10KICB9LAogIHlBeGlzOiB7CiAgICB0eXBlOiAndmFsdWUnCiAgfSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgZGF0YTogWzEyMCwgMjAwLCAxNTAsIDgwLCA3MCwgMTEwLCAxMzBdLAogICAgICB0eXBlOiAnYmFyJwogICAgfQogIF0KfSk7CgovLyDovpPlh7rlrZfnrKbkuLIKY29uc3Qgc3ZnU3RyID0gY2hhcnQucmVuZGVyVG9TVkdTdHJpbmcoKTs\'" line-highlights="\'\'" />\n<p>在此基础上，我们优化了输出的 SVG 字符串，使其在诸如 PowerPoint 等更多的平台上有更好的显示效果。</p>\n<h2 id="%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9C%B0%E5%9B%BE%E6%8A%95%E5%BD%B1" tabindex="-1">自定义地图投影</h2>\n<p>地图一直是 ECharts 中使用非常广泛的组件。一般地图组件会使用存储了经纬度的 GeoJSON 格式的数据。而 ECharts 则计算出合适的显示区域然后把经纬度线性映射到这个区域。这是一种最简单的地图投影方式。但是简单的线性投影并无法满足某些复杂的地图场景，例如使用 <a href="https://en.wikipedia.org/wiki/Albers_projection">Albers</a> 投影解决线性投影中面积失真的问题，或者在世界地图中让太平洋显示在中间等等。</p>\n<p>因此在 5.3.0 里中我们引入了自定义的地图投影，可以通过<code>project</code>和<code>unproject</code>两个方法告诉 ECharts 如何投影坐标，以及如何根据投影后坐标计算经纬度。下面是简单的使用墨卡托投影的例子：</p>\n<md-code-block lang="ts" code="\'c2VyaWVzID0gewogIHR5cGU6ICdtYXAnLAogIHByb2plY3Rpb246IHsKICAgIHByb2plY3Q6IHBvaW50ID0-IFsKICAgICAgKHBvaW50WzBdIC8gMTgwKSAqIE1hdGguUEksCiAgICAgIC1NYXRoLmxvZyhNYXRoLnRhbigoTWF0aC5QSSAvIDIgKyAocG9pbnRbMV0gLyAxODApICogTWF0aC5QSSkgLyAyKSkKICAgIF0sCiAgICB1bnByb2plY3Q6IHBvaW50ID0-IFsKICAgICAgKHBvaW50WzBdICogMTgwKSAvIE1hdGguUEksCiAgICAgICgoMiAqIDE4MCkgLyBNYXRoLlBJKSAqIE1hdGguYXRhbihNYXRoLmV4cChwb2ludFsxXSkpIC0gOTAKICAgIF0KICB9Cn07\'" line-highlights="\'\'" />\n<p>除了我们自己实现投影公式，我们也可以使用 <a href="https://github.com/d3/d3-geo">d3-geo</a> 等第三方库提供的现成的投影实现：</p>\n<md-code-block lang="ts" code="\'Y29uc3QgcHJvamVjdGlvbiA9IGQzLmdlb0NvbmljRXF1YWxBcmVhKCk7Ci8vIC4uLgpzZXJpZXMgPSB7CiAgdHlwZTogJ21hcCcsCiAgcHJvamVjdGlvbjogewogICAgcHJvamVjdDogcG9pbnQgPT4gcHJvamVjdGlvbihwb2ludCksCiAgICB1bnByb2plY3Q6IHBvaW50ID0-IHByb2plY3Rpb24uaW52ZXJ0KHBvaW50KQogIH0KfTs\'" line-highlights="\'\'" />\n<p>配合在 5.2 里新增的全局过渡动画特性，我们可以实现不同投影效果之间的动画过渡：</p>\n<p><img src="" alt="地图投影动画" data-src="images/5-3-0/map-projection.gif"></p>\n<p>除了地图的投影之外，我们在这个版本对于地图还做了下面两个增强：</p>\n<ul>\n<li>对 GeoJSON 数据提供了<code>\'LineString\'</code>和<code>\'MultiLineString\'</code>的支持。</li>\n<li>将默认标签位置的计算从包围盒中心改为最大区域的重心坐标，计算结果更加准确。</li>\n</ul>\n<h2 id="%E5%A4%9A%E5%9D%90%E6%A0%87%E8%BD%B4%E7%9A%84%E5%88%BB%E5%BA%A6%E5%AF%B9%E9%BD%90" tabindex="-1">多坐标轴的刻度对齐</h2>\n<p>多坐标轴的刻度对齐是社区中提了很久的一个需求，我们在网上也可以看到很多开发者写的如何在 ECharts 中实现坐标轴对齐的文章，通常都会比较麻烦而且会有比较多的局限性。</p>\n<p>在 5.3.0 中我们终于引入了数值轴坐标轴刻度对齐的功能。可以在需要对齐刻度的坐标轴中配置<code>alignTicks: true</code>。该坐标轴就会根据第一个坐标轴的刻度划分去调整自己的刻度，实现自动对齐。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRvb2x0aXA6IHsKICAgIHRyaWdnZXI6ICdheGlzJwogIH0sCiAgbGVnZW5kOiB7fSwKICB4QXhpczogWwogICAgewogICAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddLAogICAgICBheGlzUG9pbnRlcjogewogICAgICAgIHR5cGU6ICdzaGFkb3cnCiAgICAgIH0KICAgIH0KICBdLAogIHlBeGlzOiBbCiAgICB7CiAgICAgIHR5cGU6ICd2YWx1ZScsCiAgICAgIG5hbWU6ICdQcmVjaXBpdGF0aW9uJywKICAgICAgYWxpZ25UaWNrczogdHJ1ZSwKICAgICAgYXhpc0xhYmVsOiB7CiAgICAgICAgZm9ybWF0dGVyOiAne3ZhbHVlfSBtbCcKICAgICAgfQogICAgfSwKICAgIHsKICAgICAgdHlwZTogJ3ZhbHVlJywKICAgICAgbmFtZTogJ1RlbXBlcmF0dXJlJywKICAgICAgYXhpc0xhYmVsOiB7CiAgICAgICAgZm9ybWF0dGVyOiAne3ZhbHVlfSDCsEMnCiAgICAgIH0KICAgIH0KICBdLAogIHNlcmllczogWwogICAgewogICAgICBuYW1lOiAnRXZhcG9yYXRpb24nLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgLy8gcHJldHRpZXItaWdub3JlCiAgICAgIGRhdGE6IFsyLjAsIDQuOSwgNy4wLCAyMy4yLCAyNS42LCA3Ni43LCAxMzUuNiwgMTYyLjIsIDMyLjYsIDIwLjAsIDYuNCwgMy4zXQogICAgfSwKICAgIHsKICAgICAgbmFtZTogJ1ByZWNpcGl0YXRpb24nLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgLy8gcHJldHRpZXItaWdub3JlCiAgICAgIGRhdGE6IFsyLjYsIDUuOSwgOS4wLCAyNi40LCAyOC43LCA3MC43LCAxNzUuNiwgMTgyLjIsIDQ4LjcsIDE4LjgsIDYuMCwgMi4zXQogICAgfSwKICAgIHsKICAgICAgbmFtZTogJ1RlbXBlcmF0dXJlJywKICAgICAgdHlwZTogJ2xpbmUnLAogICAgICB5QXhpc0luZGV4OiAxLAogICAgICBkYXRhOiBbMi4wLCAyLjIsIDMuMywgNC41LCA2LjMsIDEwLjIsIDIwLjMsIDIzLjQsIDIzLjAsIDE2LjUsIDEyLjAsIDYuMl0KICAgIH0KICBdCn07\'" v-bind="{ layout: \'bt\' }" />\n<h2 id="%E6%94%AF%E6%8C%81%E9%AB%98%E4%BA%AE%E5%92%8C%E9%80%89%E4%B8%AD%E7%8A%B6%E6%80%81%E7%9A%84%E5%85%B3%E9%97%AD" tabindex="-1">支持高亮和选中状态的关闭</h2>\n<p>ECharts 中高亮状态可以在鼠标移到图形上的时候给用户提供反馈，但是在图表中有海量图形的时候，高亮的动画也可能带来交互上的性能问题。特别在 <a href="https://echarts.apache.org/option.html#tooltip">tooltip</a> 或者<a href="https://echarts.apache.org/option.html#legend">图例组件</a>联动触发的高亮会同时高亮多个图形。</p>\n<p>因此在这个版本中我们新增了<code>emphasis.disabled</code>配置项。如果不需要高亮的反馈，又对交互性能非常在意的话，可以通过这个配置项来关闭高亮状态。</p>\n<p>与此同时，对于选中状态，我们也新增了<code>select.disabled</code>。该配置项可以用于细粒度配置部分数据不可选。</p>\n<h2 id="%E6%94%AF%E6%8C%81%E6%95%B4%E4%B8%AA%E7%B3%BB%E5%88%97%E7%9A%84%E9%80%89%E4%B8%AD" tabindex="-1">支持整个系列的选中</h2>\n<p>在 5.3.0 中我们支持将<code>selectedMode</code>配置为<code>\'series\'</code>以实现系列所有数据的选中。</p>\n<h2 id="tooltip-%E4%B8%AD%E7%9A%84%E6%95%B0%E5%80%BC%E6%A0%BC%E5%BC%8F%E5%8C%96" tabindex="-1">tooltip 中的数值格式化</h2>\n<p>tooltip 可以在用户移到图形上的时候通过提示框显示更详细的相关信息，ECharts 也提供了<code>formatter</code>回调函数可以让开发者更灵活的自定义提示框的内容。</p>\n<p>但是我们发现大部分时候开发者只是需要格式化提示框中的数字部分，例如固定精度，加上<code>$</code>前缀等等，而之前为了格式化数字开发者只能通过<code>formatter</code>重写整个提示框的内容。特别是在 5.0 后 ECharts 的提示框结构更复杂，样式更美观了，重写变得成本很大而且很难达到默认的效果。</p>\n<p>因此在这个版本我们为 tooltip 新增了<code>valueFormatter</code>配置项用于数值部分的格式化。</p>\n<p>还是刚才那个坐标轴对齐的例子，我们可以为提示框中的数值部分加上 °C 和 ml 的后缀。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRvb2x0aXA6IHsKICAgIHRyaWdnZXI6ICdheGlzJwogIH0sCiAgbGVnZW5kOiB7fSwKICB4QXhpczogWwogICAgewogICAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddLAogICAgICBheGlzUG9pbnRlcjogewogICAgICAgIHR5cGU6ICdzaGFkb3cnCiAgICAgIH0KICAgIH0KICBdLAogIHlBeGlzOiBbCiAgICB7CiAgICAgIHR5cGU6ICd2YWx1ZScsCiAgICAgIG5hbWU6ICdQcmVjaXBpdGF0aW9uJywKICAgICAgYWxpZ25UaWNrczogdHJ1ZSwKICAgICAgYXhpc0xhYmVsOiB7CiAgICAgICAgZm9ybWF0dGVyOiAne3ZhbHVlfSBtbCcKICAgICAgfQogICAgfSwKICAgIHsKICAgICAgdHlwZTogJ3ZhbHVlJywKICAgICAgbmFtZTogJ1RlbXBlcmF0dXJlJywKICAgICAgYXhpc0xhYmVsOiB7CiAgICAgICAgZm9ybWF0dGVyOiAne3ZhbHVlfSDCsEMnCiAgICAgIH0KICAgIH0KICBdLAogIHNlcmllczogWwogICAgewogICAgICBuYW1lOiAnRXZhcG9yYXRpb24nLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgdG9vbHRpcDogewogICAgICAgIHZhbHVlRm9ybWF0dGVyOiB2YWx1ZSA9PiB2YWx1ZSArICcgbWwnCiAgICAgIH0sCiAgICAgIC8vIHByZXR0aWVyLWlnbm9yZQogICAgICBkYXRhOiBbMi4wLCA0LjksIDcuMCwgMjMuMiwgMjUuNiwgNzYuNywgMTM1LjYsIDE2Mi4yLCAzMi42LCAyMC4wLCA2LjQsIDMuM10KICAgIH0sCiAgICB7CiAgICAgIG5hbWU6ICdQcmVjaXBpdGF0aW9uJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHRvb2x0aXA6IHsKICAgICAgICB2YWx1ZUZvcm1hdHRlcjogdmFsdWUgPT4gdmFsdWUgKyAnIG1sJwogICAgICB9LAogICAgICAvLyBwcmV0dGllci1pZ25vcmUKICAgICAgZGF0YTogWzIuNiwgNS45LCA5LjAsIDI2LjQsIDI4LjcsIDcwLjcsIDE3NS42LCAxODIuMiwgNDguNywgMTguOCwgNi4wLCAyLjNdCiAgICB9LAogICAgewogICAgICBuYW1lOiAnVGVtcGVyYXR1cmUnLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHlBeGlzSW5kZXg6IDEsCiAgICAgIHRvb2x0aXA6IHsKICAgICAgICB2YWx1ZUZvcm1hdHRlcjogdmFsdWUgPT4gdmFsdWUgKyAnIMKwQycKICAgICAgfSwKICAgICAgZGF0YTogWzIuMCwgMi4yLCAzLjMsIDQuNSwgNi4zLCAxMC4yLCAyMC4zLCAyMy40LCAyMy4wLCAxNi41LCAxMi4wLCA2LjJdCiAgICB9CiAgXQp9Ow\'" v-bind="{ layout: \'bt\' }" />\n<p>每个系列都可以根据自己的数值格式配置自己的<code>valueFormatter</code>。</p>\n<h2 id="%E6%9B%B4%E7%81%B5%E6%B4%BB%E7%9A%84%E6%89%87%E5%8C%BA%E5%9C%86%E8%A7%92" tabindex="-1">更灵活的扇区圆角</h2>\n<p>在 5.0 中我们为扇区新增了圆角的配置，可以让饼图，旭日图变得更有趣。之前圆角的配置只支持内半径和外半径分开配置，这次我们更进一步，支持扇区的四个角都配置成不同的圆角大小，带来更灵活的呈现。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRvb2x0aXA6IHsKICAgIHRyaWdnZXI6ICdpdGVtJwogIH0sCiAgbGVnZW5kOiB7CiAgICB0b3A6ICc1JScsCiAgICBsZWZ0OiAnY2VudGVyJwogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICdBY2Nlc3MgRnJvbScsCiAgICAgIHR5cGU6ICdwaWUnLAogICAgICByYWRpdXM6IFsnMzAlJywgJzcwJSddLAogICAgICByb3NlVHlwZTogJ2FuZ2xlJywKICAgICAgaXRlbVN0eWxlOiB7CiAgICAgICAgYm9yZGVyUmFkaXVzOiBbMjAsIDUsIDUsIDEwXSwKICAgICAgICBib3JkZXJDb2xvcjogJyNmZmYnLAogICAgICAgIGJvcmRlcldpZHRoOiAyCiAgICAgIH0sCiAgICAgIGxhYmVsOiB7CiAgICAgICAgc2hvdzogZmFsc2UKICAgICAgfSwKICAgICAgZGF0YTogWwogICAgICAgIHsgdmFsdWU6IDgwMCwgbmFtZTogJ1NlYXJjaCBFbmdpbmUnIH0sCiAgICAgICAgeyB2YWx1ZTogNzM1LCBuYW1lOiAnRGlyZWN0JyB9LAogICAgICAgIHsgdmFsdWU6IDU4MCwgbmFtZTogJ0VtYWlsJyB9LAogICAgICAgIHsgdmFsdWU6IDQ4NCwgbmFtZTogJ1VuaW9uIEFkcycgfSwKICAgICAgICB7IHZhbHVlOiA0MDAsIG5hbWU6ICdWaWRlbyBBZHMnIH0KICAgICAgXQogICAgfQogIF0KfTs\'" v-bind="{ layout: \'lr\', height: 400 }" />\n<h2 id="%E9%A5%BC%E5%9B%BE%E7%9A%84%E5%A4%8D%E6%9D%82%E6%A0%87%E7%AD%BE%E4%BC%98%E5%8C%96" tabindex="-1">饼图的复杂标签优化</h2>\n<p>饼图一直是 ECharts 中标签呈现最复杂的图表之一，我们从 5.0 开始就一直在饼图的标签布局、显示上做了很多的优化。</p>\n<p>这次我们针对使用了换行，背景色，富文本等格式比较复杂的饼图标签做了深度的优化。在宽度的自适应、超出容器、引导线的计算上比之前有了更好的效果：</p>\n<table>\n<thead>\n<tr>\n<th style="text-align:center">5.2.2 (Before)</th>\n<th style="text-align:center">5.3.0 (After)</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style="text-align:center"><img src="" alt="before" data-src="images/5-3-0/pie-label-before.png"></td>\n<td style="text-align:center"><img src="" alt="after" data-src="images/5-3-0/pie-label-after.png"></td>\n</tr>\n<tr>\n<td style="text-align:center"><img src="" alt="before" data-src="images/5-3-0/pie-label-before2.png"></td>\n<td style="text-align:center"><img src="" alt="after" data-src="images/5-3-0/pie-label-after2.png"></td>\n</tr>\n</tbody>\n</table>\n<h2 id="%E6%9F%B1%E7%8A%B6%E5%9B%BE-large-%E6%A8%A1%E5%BC%8F%E4%BC%98%E5%8C%96" tabindex="-1">柱状图 large 模式优化</h2>\n<p>在数据量很多（> 2k）的时候，我们支持柱状图通过开启 <a href="https://echarts.apache.org/option.html#series-bar.large">large</a> 模式来加速渲染，提升交互性能，但是之前 <a href="https://echarts.apache.org/option.html#series-bar.large">large</a> 模式下对柱状图布局比较简单，不支持多系列堆叠后的布局。在 5.3.0 中我们对 <a href="https://echarts.apache.org/option.html#series-bar.large">large</a> 模式的布局进行了优化，跟普通模式保持了一致性。我们可以在更多的场景中通过开启 <a href="https://echarts.apache.org/option.html#series-bar.large">large</a> 来优化柱状图的性能。</p>\n<p>除此之外，优化后的柱状图布局也修复了在对数轴这样的非线性轴上堆叠效果不正确的 bug。</p>\n<h2 id="%E9%9D%9E%E5%85%BC%E5%AE%B9%E6%94%B9%E5%8A%A8" tabindex="-1">非兼容改动</h2>\n<h3 id="registermap-%E5%92%8C-getmap-%E6%96%B9%E6%B3%95%E9%9C%80%E8%A6%81%E5%9C%A8%E5%BC%95%E5%85%A5%E5%9C%B0%E5%9B%BE%E7%BB%84%E4%BB%B6%E5%90%8E%E6%89%8D%E8%83%BD%E4%BD%BF%E7%94%A8" tabindex="-1">registerMap 和 getMap 方法需要在引入地图组件后才能使用</h3>\n<p>为了减少最小打包的体积，我们从核心模块中移除了地图数据管理的方法<code>getMap</code>和<code>registerMap</code>。</p>\n<p>如果你是<a href="https://echarts.apache.org/handbook/zh/basics/import/#%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-echarts-%E5%9B%BE%E8%A1%A8%E5%92%8C%E7%BB%84%E4%BB%B6">按需引入</a> ECharts 组件的话，需要保证先引入了<code>GeoComponent</code>或者<code>MapChart</code>之后，才能使用<code>registerMap</code>注册地图数据。</p>\n<md-code-block lang="ts" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2NvcmUnOwppbXBvcnQgeyBNYXBDaGFydCB9IGZyb20gJ2VjaGFydHMvY2hhcnRzJzsKCmVjaGFydHMudXNlKFtNYXBDaGFydF0pOwoKLy8g5b-F6aG75Zyo5L2_55SoIHVzZSDmlrnms5Xms6jlhozkuoYgTWFwQ2hhcnQg5ZCO5omN6IO95L2_55SoIHJlZ2lzdGVyTWFwIOazqOWGjOWcsOWbvgplY2hhcnRzLnJlZ2lzdGVyTWFwKCd3b3JsZCcsIHdvcmxkSlNPTik7\'" line-highlights="\'\'" />\n<p>如果你是使用<code>import * as echarts from \'echarts\'</code>全量引入，这次改动不会对你产生任何影响。</p>\n<h3 id="%E6%8A%98%E7%BA%BF%E5%9B%BE%E7%A7%BB%E9%99%A4%E9%BB%98%E8%AE%A4%E9%AB%98%E4%BA%AE%E5%8A%A0%E7%B2%97%E7%9A%84%E6%95%88%E6%9E%9C" tabindex="-1">折线图移除默认高亮加粗的效果</h3>\n<p>我们在 5.0 里对折线图引入了默认高亮加粗的效果，但是社区反馈这个在很多场景效果并不好，所以在这个版本我们将这个效果从默认开启改为默认关闭，如果需要使用高亮加粗，则可以显式配置：</p>\n<md-code-block lang="ts" code="\'c2VyaWVzID0gewogIHR5cGU6ICdsaW5lJywKICAvLy4uLgogIGVtcGhhc2lzOiB7CiAgICBsaW5lU3R5bGU6IHsKICAgICAgd2lkdGg6ICdib2xkZXInCiAgICB9CiAgfQp9Ow\'" line-highlights="\'\'" />\n<h2 id="%E5%AE%8C%E6%95%B4%E6%9B%B4%E6%96%B0%E8%AE%B0%E5%BD%95" tabindex="-1">完整更新记录</h2>\n<p>查看<a href="https://echarts.apache.org//changelog.html#v5-3-0">版本更新</a></p>\n',postPath:"zh/basics/release-note/5-3-0",title:"5.3 - 版本特性 - 入门篇"}],fetch:{},error:null,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:A},{title:"入门篇",dir:i,children:[{title:"获取 ECharts",dir:t},{title:"在项目中引入 ECharts",dir:e},{title:"资源列表",dir:d,draft:g},{title:"寻求帮助",dir:l},{title:"版本特性",dir:o,children:[{title:"ECharts 6 特性介绍",dir:a},{title:"v5 升级 v6 指南",dir:r},{title:"5.0",dir:c},{title:"v4 升级 v5 指南",dir:n},{title:5.2,dir:s},{title:5.3,dir:B},{title:5.4,dir:h},{title:5.5,dir:p},{title:5.6,dir:b}]}]},{title:"概念篇",dir:w,children:[{title:"图表容器及大小",dir:E},{title:"配置项",dir:m,draft:g},{title:"系列",dir:y,draft:g},{title:"样式",dir:G},{title:"数据集",dir:W},{title:"数据转换",dir:L},{title:"坐标系",dir:Z,draft:g},{title:"坐标轴",dir:H},{title:"视觉映射",dir:I},{title:"图例",dir:K},{title:"事件与行为",dir:D}]},{title:"应用篇",dir:M,children:[{title:"常用图表类型",dir:V,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:u},{title:"堆叠柱状图",dir:J},{title:"动态排序柱状图",dir:Y},{title:"极坐标系柱状图",dir:O,draft:g},{title:"阶梯瀑布图",dir:N},{title:"视觉映射的柱状图",dir:I,draft:g}]},{title:"折线图",dir:v,children:[{title:"基础折线图",dir:F},{title:"堆叠折线图",dir:X},{title:"区域面积图",dir:S},{title:"平滑曲线图",dir:f},{title:"阶梯线图",dir:R}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:x},{title:"圆环图",dir:z},{title:"南丁格尔图（玫瑰图）",dir:"rose"}]},{title:"散点图",dir:j,children:[{title:"基础散点图",dir:T}]}]},{title:"移动端优化",dir:C,draft:g},{title:"跨平台方案",dir:k,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:Q},{title:"数据下钻",dir:U,draft:g}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"动画",dir:q,children:[{title:"数据过渡动画",dir:_}]},{title:"交互",dir:$,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:gg,draft:g},{title:"智能指针吸附",dir:Cg}]}]},{title:"最佳实践",dir:Ig,children:[{title:"移动端优化",dir:C,draft:g},{title:Ag,dir:ig},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:tg}]}],en:[{title:"Get Started",dir:A},{title:"Basics",dir:i,children:[{title:"Download ECharts",dir:t},{title:"Import ECharts",dir:e},{title:"Resources",dir:d,draft:g},{title:"Get Help",dir:l},{title:"What's New",dir:o,children:[{title:"ECharts 6 Features",dir:a},{title:"Migration from v5 to v6",dir:r},{title:"5.0",dir:c},{title:"Migration from v4 to v5",dir:n},{title:5.2,dir:s},{title:5.3,dir:B},{title:5.4,dir:h},{title:5.5,dir:p},{title:5.6,dir:b}]}]},{title:"Concepts",dir:w,children:[{title:"Chart Container",dir:E},{title:"Chart Option",dir:m,draft:g},{title:"Series",dir:y,draft:g},{title:"Style",dir:G},{title:"Dataset",dir:W},{title:"Data Transform",dir:L},{title:"Coordinate",dir:Z,draft:g},{title:"Axis",dir:H},{title:"Visual Mapping",dir:I},{title:"Legend",dir:K},{title:"Event and Action",dir:D}]},{title:"How To Guides",dir:M,children:[{title:"Common Charts",dir:V,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:u},{title:"Stacked Bar",dir:J},{title:"Bar Racing",dir:Y},{title:"Bar Polar",dir:O,draft:g},{title:"Waterfall",dir:N}]},{title:"Line",dir:v,children:[{title:"Basic Line",dir:F},{title:"Stacked Line",dir:X},{title:"Area Chart",dir:S},{title:"Smoothed Line",dir:f},{title:"Step Line",dir:R}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:x},{title:"Ring Style",dir:z},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:j,children:[{title:"Basic Scatter",dir:T}]}]},{title:"Mobile",dir:C,draft:g},{title:"Cross Platform",dir:k,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:Q},{title:"Drilldown",dir:U,draft:g}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Animation",dir:q,children:[{title:"Data Transition",dir:_}]},{title:"Interaction",dir:$,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:gg,draft:g},{title:"Intelligent Pointer Snapping",dir:Cg}]}]},{title:"Best Practices",dir:Ig,children:[{title:"Mobile Optimization",dir:C,draft:g},{title:Ag,dir:ig},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:tg}]}]},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:g,routePath:"/zh/basics/release-note/5-3-0",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:null}}}}(!0,"mobile","visual-map","get-started","basics","download","import","resource","help","release-note","v6-feature","v6-upgrade-guide","v5-feature","v5-upgrade-guide","5-2-0","5-3-0","5-4-0","5-5-0","5-6-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","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/e47e243.js" defer></script><script src="/handbook/_nuxt/js/5df72fc39d1af2ed5977.js" defer></script><script src="/handbook/_nuxt/js/c4dea9e2e5641ecc29b6.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/5065b3fcfb135aeca141.js" defer></script><noscript data-n-head="ssr" data-body="true"><div class="no-script"><strong>很抱歉，Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript> |
| <script type="text/javascript">document.getElementById("nav-doc").className="active"</script> |
| </body> |
| </html> |
