| <!doctype html> |
| <html data-n-head-ssr> |
| <head> |
| <link rel="stylesheet" type="text/css" href="https://fastly.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> |
| <link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css"> |
| <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"> |
| <title>5.2 - 版本特性 - 入门篇 - Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://echarts.apache.org/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/4d2a12b.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/fa73816a85b29fbf7562.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8117eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/b964c20bb1562bc48da6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1f3ef45.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/60d2f1dbd961abb7604b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/ba9ec8a.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/43cd67c0cf5a9d972051.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/3556c50.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9d86a6602b3f4dd6c979.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/8117eb7.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1f3ef45.css"><link rel="stylesheet" href="/handbook/_nuxt/css/ba9ec8a.css"><link rel="stylesheet" href="/handbook/_nuxt/css/3556c50.css"> |
| </head> |
| <body> |
| <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/handbook/zh/basics/release-note/v5-upgrade-guide">v5 升级指南</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码（GitHub）<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues（GitHub）<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-up"></span></a> <ul class="nav bd-sidenav level2"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" 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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-3-0" class="nav-link"><span class="title">5.3</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-4-0" class="nav-link"><span class="title">5.4</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图（玫瑰图）</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">动画</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/animation/transition" class="nav-link"><span class="title">数据过渡动画</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/how-to/interaction/coarse-pointer" class="nav-link"><span class="title">智能指针吸附</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="apache-echarts-5.2.0-%E7%89%B9%E6%80%A7%E4%BB%8B%E7%BB%8D" tabindex="-1">Apache ECharts 5.2.0 特性介绍</h1> <h2 id="%E5%85%A8%E5%B1%80%E8%BF%87%E6%B8%A1%E5%8A%A8%E7%94%BB" tabindex="-1">全局过渡动画</h2> <p>在 Apache ECharts 中我们一直把自然流畅的过渡动画作为一个重要特性。通过避免数据带来的突变，不仅仅可以改善视觉效果，更为表达数据的关联和演变提供了可能。因此，在 5.2.0 中，我们进一步将过渡动画从表现系列内部数据的变化，泛化到全局能力。接下来，我们会看到这种<strong>全局过渡动画 Universal Transition</strong>是如何为图表增加表现力和叙事能力的。</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">function makeRandomData() { |
| return [ |
| { |
| value: Math.random(), |
| name: 'A' |
| }, |
| { |
| value: Math.random(), |
| name: 'B' |
| }, |
| { |
| value: Math.random(), |
| name: 'C' |
| } |
| ]; |
| } |
| option = { |
| series: [ |
| { |
| type: 'pie', |
| radius: [0, '50%'], |
| data: makeRandomData() |
| } |
| ] |
| }; |
| |
| setInterval(() => { |
| myChart.setOption({ |
| series: { |
| data: makeRandomData() |
| } |
| }); |
| }, 2000);</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">function</span> <span class="token function">makeRandomData</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 punctuation">{</span> |
| <span class="token literal-property property">value</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 punctuation">,</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'A'</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> 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 punctuation">,</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'B'</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> 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 punctuation">,</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'C'</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">series</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">'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 number">0</span><span class="token punctuation">,</span> <span class="token string">'50%'</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 function">makeRandomData</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 function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token function">makeRandomData</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 number">2000</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>而从 5.2.0 开始，我们引入了更强大的全局过渡动画能力，让过渡动画不再局限于相同类型的系列之间。现在，我们可以使用这种跨系列的形变，为任意类型的系列和任意类型的图形做形变动画。</p> <p>这会有多酷呢？我们一起来感受一下！</p> <h3 id="%E8%B7%A8%E7%B3%BB%E5%88%97%E7%9A%84%E5%BD%A2%E5%8F%98%E5%8A%A8%E7%94%BB" tabindex="-1">跨系列的形变动画</h3> <p>在设置<code>universalTransition: true</code>开启全局过渡动画后，从饼图切换成柱状图，或者从柱状图切换成散点图，甚至旭日图和矩形树图这类复杂的图表之间，都可以通过形变的方式自然的进行动画过渡。</p> <p>如下，饼图和柱状图之间的切换：</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">const dataset = { |
| dimensions: ['name', 'score'], |
| source: [ |
| ['Hannah Krause', 314], |
| ['Zhao Qian', 351], |
| ['Jasmin Krause ', 287], |
| ['Li Lei', 219], |
| ['Karle Neumann', 253], |
| ['Mia Neumann', 165], |
| ['Böhm Fuchs', 318], |
| ['Han Meimei', 366] |
| ] |
| }; |
| const pieOption = { |
| dataset: [dataset], |
| series: [ |
| { |
| type: 'pie', |
| // 通过 id 关联需要过渡动画的系列 |
| id: 'Score', |
| radius: [0, '50%'], |
| universalTransition: true, |
| animationDurationUpdate: 1000 |
| } |
| ] |
| }; |
| const barOption = { |
| dataset: [dataset], |
| xAxis: { |
| type: 'category' |
| }, |
| yAxis: {}, |
| series: [ |
| { |
| type: 'bar', |
| // 通过 id 关联需要过渡动画的系列 |
| id: 'Score', |
| // 每个数据都是用不同的颜色 |
| colorBy: 'data', |
| encode: { x: 'name', y: 'score' }, |
| universalTransition: true, |
| animationDurationUpdate: 1000 |
| } |
| ] |
| }; |
| |
| option = barOption; |
| |
| setInterval(() => { |
| option = option === pieOption ? barOption : pieOption; |
| // 使用 notMerge 的形式可以移除坐标轴 |
| myChart.setOption(option, true); |
| }, 2000);</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">const</span> dataset <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">dimensions</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'score'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">[</span><span class="token string">'Hannah Krause'</span><span class="token punctuation">,</span> <span class="token number">314</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Zhao Qian'</span><span class="token punctuation">,</span> <span class="token number">351</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Jasmin Krause '</span><span class="token punctuation">,</span> <span class="token number">287</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Li Lei'</span><span class="token punctuation">,</span> <span class="token number">219</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Karle Neumann'</span><span class="token punctuation">,</span> <span class="token number">253</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Mia Neumann'</span><span class="token punctuation">,</span> <span class="token number">165</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Böhm Fuchs'</span><span class="token punctuation">,</span> <span class="token number">318</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Han Meimei'</span><span class="token punctuation">,</span> <span class="token number">366</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">const</span> pieOption <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token punctuation">[</span>dataset<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">type</span><span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span> |
| <span class="token comment">// 通过 id 关联需要过渡动画的系列</span> |
| <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'Score'</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 number">0</span><span class="token punctuation">,</span> <span class="token string">'50%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">universalTransition</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">animationDurationUpdate</span><span class="token operator">:</span> <span class="token number">1000</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">const</span> barOption <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token punctuation">[</span>dataset<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 literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</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 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">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> |
| <span class="token comment">// 通过 id 关联需要过渡动画的系列</span> |
| <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'Score'</span><span class="token punctuation">,</span> |
| <span class="token comment">// 每个数据都是用不同的颜色</span> |
| <span class="token literal-property property">colorBy</span><span class="token operator">:</span> <span class="token string">'data'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">encode</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 string">'name'</span><span class="token punctuation">,</span> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token string">'score'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">universalTransition</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">animationDurationUpdate</span><span class="token operator">:</span> <span class="token number">1000</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> barOption<span class="token punctuation">;</span> |
| |
| <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| option <span class="token operator">=</span> option <span class="token operator">===</span> pieOption <span class="token operator">?</span> barOption <span class="token operator">:</span> pieOption<span class="token punctuation">;</span> |
| <span class="token comment">// 使用 notMerge 的形式可以移除坐标轴</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 boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</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> <p><img src alt data-src="images/5-2-0/universal-transition.gif"></p> <p>这样的动画过渡不再仅仅局限于基础的折、柱、饼中，在柱状图和地图之间:</p> <p><img src alt data-src="images/5-2-0/universal-transition-2.gif"></p> <p>或者旭日图和矩形树图之间，甚至非常灵活的自定义系列之间都可以进行动画的过渡。</p> <p><img src alt data-src="images/5-2-0/universal-transition-3.gif"></p> <blockquote><p>注意需要配置系列的 id 来保证需要动画过渡的系列之间能够一一对应。</p></blockquote> <blockquote><p>按需引入的代码需要单独引入该特性</p> <pre><code class="language-ts">import { UniversalTransition } from 'echarts/features'; |
| echarts.use([UniversalTransition]); |
| </code></pre></blockquote> <h3 id="%E6%95%B0%E6%8D%AE%E7%9A%84%E5%88%86%E8%A3%82%E5%92%8C%E5%90%88%E5%B9%B6%E5%8A%A8%E7%94%BB" tabindex="-1">数据的分裂和合并动画</h3> <p>除了常见的数据值的更新，有时候我们还会碰到数据的聚合、下钻等交互后的更新，这个时候我们就不能直接应用一对一的动画过渡，而需要使用更多像分裂、合并这样的动画效果，来通过正确的图形动画表达出数据的变换。</p> <p>为了能够表达数据之间可能存在的多对多联系，在 5.2.0 中我们新引入了一个数据组<code>groupId</code>的概念，我们可以通过 <a href="https://echarts.apache.org/option.html#series-bar.dataGroupId">series.dataGroupId</a> 设置整个系列所属的组，或者更细粒度的通过 <a href="https://echarts.apache.org/option.html#series-bar.dataGroupId">series.data.groupId</a> 设置每个数据所属的组。如果你使用了<code>dataset</code>管理数据则更方便了，可以使用<code>encode.itemGroupId</code>来指定一个维度编码成<code>groupId</code>。</p> <p>比如我们要实现一个柱状图下钻的动画，可以将下钻后的整个系列的数据都设置同一个<code>groupId</code>，然后跟下钻前的数据对应起来：</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 = { |
| xAxis: { |
| data: ['Animals', 'Fruits', 'Cars'] |
| }, |
| yAxis: {}, |
| dataGroupId: '', |
| animationDurationUpdate: 500, |
| series: { |
| type: 'bar', |
| id: 'sales', |
| data: [ |
| { |
| value: 5, |
| groupId: 'animals' |
| }, |
| { |
| value: 2, |
| groupId: 'fruits' |
| }, |
| { |
| value: 4, |
| groupId: 'cars' |
| } |
| ], |
| universalTransition: { |
| enabled: true, |
| divideShape: 'clone' |
| } |
| } |
| }; |
| |
| const drilldownData = [ |
| { |
| dataGroupId: 'animals', |
| data: [ |
| ['Cats', 4], |
| ['Dogs', 2], |
| ['Cows', 1], |
| ['Sheep', 2], |
| ['Pigs', 1] |
| ] |
| }, |
| { |
| dataGroupId: 'fruits', |
| data: [ |
| ['Apples', 4], |
| ['Oranges', 2] |
| ] |
| }, |
| { |
| dataGroupId: 'cars', |
| data: [ |
| ['Toyota', 4], |
| ['Opel', 2], |
| ['Volkswagen', 2] |
| ] |
| } |
| ]; |
| |
| myChart.on('click', event => { |
| if (event.data) { |
| const subData = drilldownData.find(data => { |
| return data.dataGroupId === event.data.groupId; |
| }); |
| if (!subData) { |
| return; |
| } |
| myChart.setOption({ |
| xAxis: { |
| data: subData.data.map(item => { |
| return item[0]; |
| }) |
| }, |
| series: { |
| type: 'bar', |
| id: 'sales', |
| dataGroupId: subData.dataGroupId, |
| data: subData.data.map(item => { |
| return item[1]; |
| }), |
| universalTransition: { |
| enabled: true, |
| divideShape: 'clone' |
| } |
| }, |
| graphic: [ |
| { |
| type: 'text', |
| left: 50, |
| top: 20, |
| style: { |
| text: 'Back', |
| fontSize: 18 |
| }, |
| onclick: function() { |
| myChart.setOption(option, true); |
| } |
| } |
| ] |
| }); |
| } |
| });</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">xAxis</span><span class="token operator">:</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">'Animals'</span><span class="token punctuation">,</span> <span class="token string">'Fruits'</span><span class="token punctuation">,</span> <span class="token string">'Cars'</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 punctuation">,</span> |
| <span class="token literal-property property">dataGroupId</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">animationDurationUpdate</span><span class="token operator">:</span> <span class="token number">500</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">'bar'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'sales'</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">5</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">groupId</span><span class="token operator">:</span> <span class="token string">'animals'</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">2</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">groupId</span><span class="token operator">:</span> <span class="token string">'fruits'</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">4</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">groupId</span><span class="token operator">:</span> <span class="token string">'cars'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">universalTransition</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">enabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">divideShape</span><span class="token operator">:</span> <span class="token string">'clone'</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">const</span> drilldownData <span class="token operator">=</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">dataGroupId</span><span class="token operator">:</span> <span class="token string">'animals'</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 string">'Cats'</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Dogs'</span><span class="token punctuation">,</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 string">'Cows'</span><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 string">'Sheep'</span><span class="token punctuation">,</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 string">'Pigs'</span><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 punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">dataGroupId</span><span class="token operator">:</span> <span class="token string">'fruits'</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 string">'Apples'</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Oranges'</span><span class="token punctuation">,</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 punctuation">{</span> |
| <span class="token literal-property property">dataGroupId</span><span class="token operator">:</span> <span class="token string">'cars'</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 string">'Toyota'</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Opel'</span><span class="token punctuation">,</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 string">'Volkswagen'</span><span class="token punctuation">,</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 punctuation">;</span> |
| |
| myChart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token parameter">event</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">const</span> subData <span class="token operator">=</span> drilldownData<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">data</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> data<span class="token punctuation">.</span>dataGroupId <span class="token operator">===</span> event<span class="token punctuation">.</span>data<span class="token punctuation">.</span>groupId<span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>subData<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</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><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 literal-property property">data</span><span class="token operator">:</span> subData<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> item<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 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">'bar'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'sales'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">dataGroupId</span><span class="token operator">:</span> subData<span class="token punctuation">.</span>dataGroupId<span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> subData<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> item<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 punctuation">)</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">universalTransition</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">enabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">divideShape</span><span class="token operator">:</span> <span class="token string">'clone'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</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 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 number">50</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token number">20</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">'Back'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">18</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token function-variable function">onclick</span><span class="token operator">:</span> <span class="token keyword">function</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 boolean">true</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><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>groupId</code>，我们还可以实现更丰富的聚合，下钻动画。</p> <p>数据的聚合：</p> <p><img src alt data-src="images/5-2-0/group-transition.gif"></p> <p>单系列下钻成两个系列：</p> <p><img src alt data-src="images/5-2-0/group-transition-2.gif"></p> <p>全局过渡动画使得数据的关系和演变的表达能力走上新的台阶，为你的可视化创作灵感插上翅膀。</p> <p>看到这里，我们知道你已经跃跃欲试了。但是别急，5.2.0 还有更多值得一看的新功能。</p> <h2 id="%E8%B0%83%E8%89%B2%E7%9B%98%E7%9A%84%E5%8F%96%E8%89%B2%E7%AD%96%E7%95%A5" tabindex="-1">调色盘的取色策略</h2> <p>在上面全局过渡动画的示例中，大家可能有注意到我们使用了一个之前版本没有的<code>colorBy</code>配置项，这个配置项也是我们这个版本新增加的一个特性，用来给系列配置不同粒度的调色盘取色。这个配置目前支持两种策略：</p> <ul><li><code>'series'</code> 按照系列分配调色盘中的颜色，同一系列中的所有数据都是用相同的颜色。</li> <li><code>'data'</code> 按照数据项分配调色盘中的颜色，每个数据项都使用不同的颜色。</li></ul> <p>在之前我们是按照系列的类型固定了这个策略，比如柱状图就是固定<code>'series'</code>的策略，而饼图则是固定<code>'data'</code>的策略。</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 = { |
| xAxis: { |
| type: 'category', |
| data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
| }, |
| yAxis: { |
| type: 'value' |
| }, |
| series: [ |
| { |
| data: [120, 200, 150, 80, 70, 110, 130], |
| type: 'bar', |
| colorBy: 'data' |
| } |
| ] |
| };</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">xAxis</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">'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 punctuation">,</span> |
| <span class="token literal-property property">yAxis</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">'value'</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">data</span><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> |
| <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">colorBy</span><span class="token operator">:</span> <span class="token string">'data'</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">option = { |
| series: { |
| type: 'pie', |
| colorBy: 'series', |
| radius: [0, '50%'], |
| itemStyle: { |
| borderColor: '#fff', |
| borderWidth: 1 |
| }, |
| data: [ |
| { |
| value: 335, |
| name: 'Direct Visit' |
| }, |
| { |
| value: 234, |
| name: 'Union Ad' |
| }, |
| { |
| value: 1548, |
| name: 'Search Engine' |
| } |
| ] |
| } |
| };</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">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">'pie'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">colorBy</span><span class="token operator">:</span> <span class="token string">'series'</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 number">0</span><span class="token punctuation">,</span> <span class="token string">'50%'</span><span class="token punctuation">]</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">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">1</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">335</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Direct Visit'</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">234</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Union Ad'</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">1548</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 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> <h2 id="%E6%9E%81%E5%9D%90%E6%A0%87%E6%9F%B1%E7%8A%B6%E5%9B%BE%E7%9A%84%E6%A0%87%E7%AD%BE" tabindex="-1">极坐标柱状图的标签</h2> <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 = { |
| angleAxis: { |
| show: false, |
| max: 10 |
| }, |
| radiusAxis: { |
| show: false, |
| type: 'category', |
| data: ['AAA', 'BBB', 'CCC', 'DDD'] |
| }, |
| polar: {}, |
| series: [ |
| { |
| type: 'bar', |
| data: [3, 4, 5, 6], |
| colorBy: 'data', |
| roundCap: true, |
| label: { |
| show: true, |
| // 试试改成 'insideStart' |
| position: 'start', |
| formatter: '{b}' |
| }, |
| coordinateSystem: 'polar' |
| } |
| ] |
| };</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">angleAxis</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 literal-property property">max</span><span class="token operator">:</span> <span class="token number">10</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">radiusAxis</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 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">'AAA'</span><span class="token punctuation">,</span> <span class="token string">'BBB'</span><span class="token punctuation">,</span> <span class="token string">'CCC'</span><span class="token punctuation">,</span> <span class="token string">'DDD'</span><span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">polar</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">series</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">'bar'</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">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">colorBy</span><span class="token operator">:</span> <span class="token string">'data'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">roundCap</span><span class="token operator">:</span> <span class="token boolean">true</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">true</span><span class="token punctuation">,</span> |
| <span class="token comment">// 试试改成 'insideStart'</span> |
| <span class="token literal-property property">position</span><span class="token operator">:</span> <span class="token string">'start'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">formatter</span><span class="token operator">:</span> <span class="token string">'{b}'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">coordinateSystem</span><span class="token operator">:</span> <span class="token string">'polar'</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> <p><img src alt data-src="images/5-2-0/polar-bar-label.jpg"></p> <p>这一灵活的标签位置配置项大大丰富了极坐标柱状图的表达能力，让文字清晰地匹配对应的数据。</p> <h2 id="%E7%A9%BA%E6%95%B0%E6%8D%AE%E7%9A%84%E9%A5%BC%E5%9B%BE%E6%A0%B7%E5%BC%8F" tabindex="-1">空数据的饼图样式</h2> <p>在之前的版本中，如果饼图没有数据，画面中可能就是完全空白的。因为没有任何的视觉元素，所以用户会疑惑是不是出现了 bug 导致图中没有内容。</p> <p>为了解决这个问题，这个版本我们会默认在无可显示数据的时候显示一个灰色的占位圆以防止画面中完全空白。我们可以通过<code>emptyCircleStyle</code>配置这个占位圆的样式。</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 = { |
| series: [ |
| { |
| type: 'pie', |
| data: [], |
| // showEmptyCircle: false, |
| emptyCircleStyle: { |
| // 将样式改为空心圆 |
| color: 'transparent', |
| borderColor: '#ddd', |
| borderWidth: 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">series</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">'pie'</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 punctuation">,</span> |
| <span class="token comment">// showEmptyCircle: false,</span> |
| <span class="token literal-property property">emptyCircleStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token comment">// 将样式改为空心圆</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'transparent'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderColor</span><span class="token operator">:</span> <span class="token string">'#ddd'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderWidth</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><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>showEmptyCircle: false</code>关闭。</p> <h2 id="%E9%AB%98%E7%BB%B4%E6%95%B0%E6%8D%AE%E7%9A%84%E6%80%A7%E8%83%BD%E5%A2%9E%E5%BC%BA" tabindex="-1">高维数据的性能增强</h2> <p>我们从 4.0 开始引入了 <a href="https://echarts.apache.org/option.html#dataset">dataset</a> 用来管理图表的数据，通常情况下<code>dataset</code>提供了更方便的数据管理方式而且跟传统的方式不会有什么性能上的差别。但是在一些极端的特别高维（>100）数据的场景下，我们还是会碰到一些性能急剧下降的问题，比如下面这种通过一千个系列去可视化千维数据的场景（<a href="https://github.com/apache/echarts/issues/11907">#11907</a>），甚至可能会卡住。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">const</span> indices <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token function">Array</span><span class="token punctuation">(</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">_<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">index</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></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">const</span> option <span class="token operator">=</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 literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</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 punctuation">,</span> |
| <span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token comment">// dimension: ['date', ...indices],</span> |
| <span class="token literal-property property">source</span><span class="token operator">:</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token function">Array</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 punctuation">(</span><span class="token parameter">_<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">date</span><span class="token operator">:</span> i<span class="token punctuation">,</span> |
| <span class="token operator">...</span>indices<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| item<span class="token punctuation">[</span>next<span class="token punctuation">]</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">100</span><span class="token punctuation">;</span> |
| <span class="token keyword">return</span> item<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><span class="token punctuation">,</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> indices<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">index</span> <span class="token operator">=></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">'line'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> index <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></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>产生这个性能问题是因为我们在底层每个系列都会按照其需要处理一遍这个 dataset，然后保存一份处理过后的数据以及维度等元信息。这意味着刚才那个例子中需要处理并保存<code>1000 x 1000</code>个维度的信息，这带来了巨大的内存和垃圾回收的压力，从而导致了高维度的性能的急剧下降。</p> <p>在新版本中我们对这个问题做了优化，所有系列都尽可能共享 dataset 的数据（能否共享取决于系列怎么使用这份数据）存储而非每个系列都处理并存储一次，并且只处理和存储了使用到的维度。这些优化保证了内存不会随着 dataset 维度和系列的增长而爆炸，大幅度的提升了极端场景下的初始化性能。刚才例子的渲染耗时也从卡住降低到了可接受的 300 毫秒以下。</p> <p>这次优化带来收益的还不只是这种高维的场景，在使用维度不高但是数据量很大的 dataset 的时候，因为数据的共享所以多个系列只处理了一遍数据，因此也可以带来显著的性能提升。</p> <h2 id="%E8%87%AA%E5%AE%9A%E4%B9%89%E7%B3%BB%E5%88%97%E7%9A%84%E7%B1%BB%E5%9E%8B%E4%BC%98%E5%8C%96" tabindex="-1">自定义系列的类型优化</h2> <p>自定义系列提供了非常灵活的创建系列图形的方式，相对于其它系列，自定义系列的学习曲线可能有些陡峭，而且容易出错。因此在这个版本中，我们进一步的优化了自定义系列中的核心方法<code>renderItem</code>的类型，对于<code>renderItem</code>的参数和返回值类型做了更精确的推断，从而可以根据返回的图形类型推断出可以设置该图形的哪些属性：</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">'custom'</span><span class="token punctuation">,</span> |
| <span class="token function">renderItem</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> <span class="token punctuation">{</span> |
| type<span class="token operator">:</span> <span class="token string">'group'</span><span class="token punctuation">,</span> |
| <span class="token comment">// group 类型使用 children 存储其它类型的子元素</span> |
| children<span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| type<span class="token operator">:</span> <span class="token string">'circle'</span><span class="token punctuation">,</span> |
| <span class="token comment">// circle 拥有下面这些可以配置的 shape 属性</span> |
| shape<span class="token operator">:</span> <span class="token punctuation">{</span> r<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> cx<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> cy<span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token comment">// 可以配置的样式</span> |
| style<span class="token operator">:</span> <span class="token punctuation">{</span> fill<span class="token operator">:</span> <span class="token string">'red'</span> <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| type<span class="token operator">:</span> <span class="token string">'rect'</span><span class="token punctuation">,</span> |
| <span class="token comment">// rect 拥有下面这些可以配置的 shape 属性</span> |
| shape<span class="token operator">:</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> width<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span> height<span class="token operator">:</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 punctuation">{</span> |
| type<span class="token operator">:</span> <span class="token string">'path'</span><span class="token punctuation">,</span> |
| <span class="token comment">// 自定义路径图形</span> |
| shape<span class="token operator">:</span> <span class="token punctuation">{</span> d<span class="token operator">:</span> <span class="token string">'...'</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></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%B0%8F%E7%BB%93" tabindex="-1">小结</h2> <p>以上我们介绍了 5.2.0 中的新特性以及优化，如果你对其中的一些特性感兴趣，不妨更新到最新版本的 Apache ECharts 亲自体验一下。</p> <p>如果你对 Apache ECharts 接下来的计划感兴趣，也可以在 <a href="https://github.com/apache/echarts/milestones">GitHub Milestone</a> 关注我们的开发计划。也非常欢迎加入我们的贡献者行列（在 <a href="https://github.com/apache/echarts/wiki">Wiki</a> 中了解更多）。</p> <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-2-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-2-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"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60" loading="lazy"> <span>pissang</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60" loading="lazy"> <span>Ovilia</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//fastly.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(g,i,I,C,t,e,A,d,l,a,o,r,c,n,s,h,p,B,b,m,G,w,E,u,Z,H,J,W,K,X,y,R,Y,F,S,v,V,L,f,k,D,O,T,N,z,U,M,x,Q,j,P,q,_,$,gg,ig,Ig,Cg){return{layout:"default",data:[{html:'<h1 id="apache-echarts-5.2.0-%E7%89%B9%E6%80%A7%E4%BB%8B%E7%BB%8D" tabindex="-1">Apache ECharts 5.2.0 特性介绍</h1>\n<h2 id="%E5%85%A8%E5%B1%80%E8%BF%87%E6%B8%A1%E5%8A%A8%E7%94%BB" tabindex="-1">全局过渡动画</h2>\n<p>在 Apache ECharts 中我们一直把自然流畅的过渡动画作为一个重要特性。通过避免数据带来的突变，不仅仅可以改善视觉效果，更为表达数据的关联和演变提供了可能。因此，在 5.2.0 中，我们进一步将过渡动画从表现系列内部数据的变化，泛化到全局能力。接下来，我们会看到这种<strong>全局过渡动画 Universal Transition</strong>是如何为图表增加表现力和叙事能力的。</p>\n<p>在之前的版本中，过渡动画有一定的局限性：只能用于相同类型的图形的位置、尺寸、形状，而且只能作用在相同类型的系列上。比如，下面例子就是通过饼图中扇区形状的变化反映了数据分布的变化：</p>\n<md-live lang="js" code="\'ZnVuY3Rpb24gbWFrZVJhbmRvbURhdGEoKSB7CiAgcmV0dXJuIFsKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdBJwogICAgfSwKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdCJwogICAgfSwKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdDJwogICAgfQogIF07Cn0Kb3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgcmFkaXVzOiBbMCwgJzUwJSddLAogICAgICBkYXRhOiBtYWtlUmFuZG9tRGF0YSgpCiAgICB9CiAgXQp9OwoKc2V0SW50ZXJ2YWwoKCkgPT4gewogIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgIHNlcmllczogewogICAgICBkYXRhOiBtYWtlUmFuZG9tRGF0YSgpCiAgICB9CiAgfSk7Cn0sIDIwMDApOw\'" v-bind="{layout: \'lr\'}" />\n<p>而从 5.2.0 开始，我们引入了更强大的全局过渡动画能力，让过渡动画不再局限于相同类型的系列之间。现在，我们可以使用这种跨系列的形变，为任意类型的系列和任意类型的图形做形变动画。</p>\n<p>这会有多酷呢？我们一起来感受一下！</p>\n<h3 id="%E8%B7%A8%E7%B3%BB%E5%88%97%E7%9A%84%E5%BD%A2%E5%8F%98%E5%8A%A8%E7%94%BB" tabindex="-1">跨系列的形变动画</h3>\n<p>在设置<code>universalTransition: true</code>开启全局过渡动画后，从饼图切换成柱状图，或者从柱状图切换成散点图，甚至旭日图和矩形树图这类复杂的图表之间，都可以通过形变的方式自然的进行动画过渡。</p>\n<p>如下，饼图和柱状图之间的切换：</p>\n<md-live lang="js" code="\'Y29uc3QgZGF0YXNldCA9IHsKICBkaW1lbnNpb25zOiBbJ25hbWUnLCAnc2NvcmUnXSwKICBzb3VyY2U6IFsKICAgIFsnSGFubmFoIEtyYXVzZScsIDMxNF0sCiAgICBbJ1poYW8gUWlhbicsIDM1MV0sCiAgICBbJ0phc21pbiBLcmF1c2UgJywgMjg3XSwKICAgIFsnTGkgTGVpJywgMjE5XSwKICAgIFsnS2FybGUgTmV1bWFubicsIDI1M10sCiAgICBbJ01pYSBOZXVtYW5uJywgMTY1XSwKICAgIFsnQsO2aG0gRnVjaHMnLCAzMThdLAogICAgWydIYW4gTWVpbWVpJywgMzY2XQogIF0KfTsKY29uc3QgcGllT3B0aW9uID0gewogIGRhdGFzZXQ6IFtkYXRhc2V0XSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIC8vIOmAmui_hyBpZCDlhbPogZTpnIDopoHov4fmuKHliqjnlLvnmoTns7vliJcKICAgICAgaWQ6ICdTY29yZScsCiAgICAgIHJhZGl1czogWzAsICc1MCUnXSwKICAgICAgdW5pdmVyc2FsVHJhbnNpdGlvbjogdHJ1ZSwKICAgICAgYW5pbWF0aW9uRHVyYXRpb25VcGRhdGU6IDEwMDAKICAgIH0KICBdCn07CmNvbnN0IGJhck9wdGlvbiA9IHsKICBkYXRhc2V0OiBbZGF0YXNldF0sCiAgeEF4aXM6IHsKICAgIHR5cGU6ICdjYXRlZ29yeScKICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIC8vIOmAmui_hyBpZCDlhbPogZTpnIDopoHov4fmuKHliqjnlLvnmoTns7vliJcKICAgICAgaWQ6ICdTY29yZScsCiAgICAgIC8vIOavj-S4quaVsOaNrumDveaYr-eUqOS4jeWQjOeahOminOiJsgogICAgICBjb2xvckJ5OiAnZGF0YScsCiAgICAgIGVuY29kZTogeyB4OiAnbmFtZScsIHk6ICdzY29yZScgfSwKICAgICAgdW5pdmVyc2FsVHJhbnNpdGlvbjogdHJ1ZSwKICAgICAgYW5pbWF0aW9uRHVyYXRpb25VcGRhdGU6IDEwMDAKICAgIH0KICBdCn07CgpvcHRpb24gPSBiYXJPcHRpb247CgpzZXRJbnRlcnZhbCgoKSA9PiB7CiAgb3B0aW9uID0gb3B0aW9uID09PSBwaWVPcHRpb24gPyBiYXJPcHRpb24gOiBwaWVPcHRpb247CiAgLy8g5L2_55SoIG5vdE1lcmdlIOeahOW9ouW8j-WPr-S7peenu-mZpOWdkOagh-i9tAogIG15Q2hhcnQuc2V0T3B0aW9uKG9wdGlvbiwgdHJ1ZSk7Cn0sIDIwMDApOw\'" v-bind="{layout: \'bt\'}" />\n<p>更多的常见基础图表之间的过渡：</p>\n<p><img src="" alt="" data-src="images/5-2-0/universal-transition.gif"></p>\n<p>这样的动画过渡不再仅仅局限于基础的折、柱、饼中，在柱状图和地图之间:</p>\n<p><img src="" alt="" data-src="images/5-2-0/universal-transition-2.gif"></p>\n<p>或者旭日图和矩形树图之间，甚至非常灵活的自定义系列之间都可以进行动画的过渡。</p>\n<p><img src="" alt="" data-src="images/5-2-0/universal-transition-3.gif"></p>\n<blockquote>\n<p>注意需要配置系列的 id 来保证需要动画过渡的系列之间能够一一对应。</p>\n</blockquote>\n<blockquote>\n<p>按需引入的代码需要单独引入该特性</p>\n<pre><code class="language-ts">import { UniversalTransition } from \'echarts/features\';\necharts.use([UniversalTransition]);\n</code></pre>\n</blockquote>\n<h3 id="%E6%95%B0%E6%8D%AE%E7%9A%84%E5%88%86%E8%A3%82%E5%92%8C%E5%90%88%E5%B9%B6%E5%8A%A8%E7%94%BB" tabindex="-1">数据的分裂和合并动画</h3>\n<p>除了常见的数据值的更新，有时候我们还会碰到数据的聚合、下钻等交互后的更新，这个时候我们就不能直接应用一对一的动画过渡，而需要使用更多像分裂、合并这样的动画效果，来通过正确的图形动画表达出数据的变换。</p>\n<p>为了能够表达数据之间可能存在的多对多联系，在 5.2.0 中我们新引入了一个数据组<code>groupId</code>的概念，我们可以通过 <a href="https://echarts.apache.org/option.html#series-bar.dataGroupId">series.dataGroupId</a> 设置整个系列所属的组，或者更细粒度的通过 <a href="https://echarts.apache.org/option.html#series-bar.dataGroupId">series.data.groupId</a> 设置每个数据所属的组。如果你使用了<code>dataset</code>管理数据则更方便了，可以使用<code>encode.itemGroupId</code>来指定一个维度编码成<code>groupId</code>。</p>\n<p>比如我们要实现一个柱状图下钻的动画，可以将下钻后的整个系列的数据都设置同一个<code>groupId</code>，然后跟下钻前的数据对应起来：</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0FuaW1hbHMnLCAnRnJ1aXRzJywgJ0NhcnMnXQogIH0sCiAgeUF4aXM6IHt9LAogIGRhdGFHcm91cElkOiAnJywKICBhbmltYXRpb25EdXJhdGlvblVwZGF0ZTogNTAwLAogIHNlcmllczogewogICAgdHlwZTogJ2JhcicsCiAgICBpZDogJ3NhbGVzJywKICAgIGRhdGE6IFsKICAgICAgewogICAgICAgIHZhbHVlOiA1LAogICAgICAgIGdyb3VwSWQ6ICdhbmltYWxzJwogICAgICB9LAogICAgICB7CiAgICAgICAgdmFsdWU6IDIsCiAgICAgICAgZ3JvdXBJZDogJ2ZydWl0cycKICAgICAgfSwKICAgICAgewogICAgICAgIHZhbHVlOiA0LAogICAgICAgIGdyb3VwSWQ6ICdjYXJzJwogICAgICB9CiAgICBdLAogICAgdW5pdmVyc2FsVHJhbnNpdGlvbjogewogICAgICBlbmFibGVkOiB0cnVlLAogICAgICBkaXZpZGVTaGFwZTogJ2Nsb25lJwogICAgfQogIH0KfTsKCmNvbnN0IGRyaWxsZG93bkRhdGEgPSBbCiAgewogICAgZGF0YUdyb3VwSWQ6ICdhbmltYWxzJywKICAgIGRhdGE6IFsKICAgICAgWydDYXRzJywgNF0sCiAgICAgIFsnRG9ncycsIDJdLAogICAgICBbJ0Nvd3MnLCAxXSwKICAgICAgWydTaGVlcCcsIDJdLAogICAgICBbJ1BpZ3MnLCAxXQogICAgXQogIH0sCiAgewogICAgZGF0YUdyb3VwSWQ6ICdmcnVpdHMnLAogICAgZGF0YTogWwogICAgICBbJ0FwcGxlcycsIDRdLAogICAgICBbJ09yYW5nZXMnLCAyXQogICAgXQogIH0sCiAgewogICAgZGF0YUdyb3VwSWQ6ICdjYXJzJywKICAgIGRhdGE6IFsKICAgICAgWydUb3lvdGEnLCA0XSwKICAgICAgWydPcGVsJywgMl0sCiAgICAgIFsnVm9sa3N3YWdlbicsIDJdCiAgICBdCiAgfQpdOwoKbXlDaGFydC5vbignY2xpY2snLCBldmVudCA9PiB7CiAgaWYgKGV2ZW50LmRhdGEpIHsKICAgIGNvbnN0IHN1YkRhdGEgPSBkcmlsbGRvd25EYXRhLmZpbmQoZGF0YSA9PiB7CiAgICAgIHJldHVybiBkYXRhLmRhdGFHcm91cElkID09PSBldmVudC5kYXRhLmdyb3VwSWQ7CiAgICB9KTsKICAgIGlmICghc3ViRGF0YSkgewogICAgICByZXR1cm47CiAgICB9CiAgICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICAgIHhBeGlzOiB7CiAgICAgICAgZGF0YTogc3ViRGF0YS5kYXRhLm1hcChpdGVtID0-IHsKICAgICAgICAgIHJldHVybiBpdGVtWzBdOwogICAgICAgIH0pCiAgICAgIH0sCiAgICAgIHNlcmllczogewogICAgICAgIHR5cGU6ICdiYXInLAogICAgICAgIGlkOiAnc2FsZXMnLAogICAgICAgIGRhdGFHcm91cElkOiBzdWJEYXRhLmRhdGFHcm91cElkLAogICAgICAgIGRhdGE6IHN1YkRhdGEuZGF0YS5tYXAoaXRlbSA9PiB7CiAgICAgICAgICByZXR1cm4gaXRlbVsxXTsKICAgICAgICB9KSwKICAgICAgICB1bml2ZXJzYWxUcmFuc2l0aW9uOiB7CiAgICAgICAgICBlbmFibGVkOiB0cnVlLAogICAgICAgICAgZGl2aWRlU2hhcGU6ICdjbG9uZScKICAgICAgICB9CiAgICAgIH0sCiAgICAgIGdyYXBoaWM6IFsKICAgICAgICB7CiAgICAgICAgICB0eXBlOiAndGV4dCcsCiAgICAgICAgICBsZWZ0OiA1MCwKICAgICAgICAgIHRvcDogMjAsCiAgICAgICAgICBzdHlsZTogewogICAgICAgICAgICB0ZXh0OiAnQmFjaycsCiAgICAgICAgICAgIGZvbnRTaXplOiAxOAogICAgICAgICAgfSwKICAgICAgICAgIG9uY2xpY2s6IGZ1bmN0aW9uKCkgewogICAgICAgICAgICBteUNoYXJ0LnNldE9wdGlvbihvcHRpb24sIHRydWUpOwogICAgICAgICAgfQogICAgICAgIH0KICAgICAgXQogICAgfSk7CiAgfQp9KTs\'" v-bind="{layout: \'lr\'}" />\n<p>通过<code>groupId</code>，我们还可以实现更丰富的聚合，下钻动画。</p>\n<p>数据的聚合：</p>\n<p><img src="" alt="" data-src="images/5-2-0/group-transition.gif"></p>\n<p>单系列下钻成两个系列：</p>\n<p><img src="" alt="" data-src="images/5-2-0/group-transition-2.gif"></p>\n<p>全局过渡动画使得数据的关系和演变的表达能力走上新的台阶，为你的可视化创作灵感插上翅膀。</p>\n<p>看到这里，我们知道你已经跃跃欲试了。但是别急，5.2.0 还有更多值得一看的新功能。</p>\n<h2 id="%E8%B0%83%E8%89%B2%E7%9B%98%E7%9A%84%E5%8F%96%E8%89%B2%E7%AD%96%E7%95%A5" tabindex="-1">调色盘的取色策略</h2>\n<p>在上面全局过渡动画的示例中，大家可能有注意到我们使用了一个之前版本没有的<code>colorBy</code>配置项，这个配置项也是我们这个版本新增加的一个特性，用来给系列配置不同粒度的调色盘取色。这个配置目前支持两种策略：</p>\n<ul>\n<li><code>\'series\'</code> 按照系列分配调色盘中的颜色，同一系列中的所有数据都是用相同的颜色。</li>\n<li><code>\'data\'</code> 按照数据项分配调色盘中的颜色，每个数据项都使用不同的颜色。</li>\n</ul>\n<p>在之前我们是按照系列的类型固定了这个策略，比如柱状图就是固定<code>\'series\'</code>的策略，而饼图则是固定<code>\'data\'</code>的策略。</p>\n<p>而现在新增这个配置项后，我们可以在柱状图中给每个数据项都分配不同的颜色：</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCcsICdTdW4nXQogIH0sCiAgeUF4aXM6IHsKICAgIHR5cGU6ICd2YWx1ZScKICB9LAogIHNlcmllczogWwogICAgewogICAgICBkYXRhOiBbMTIwLCAyMDAsIDE1MCwgODAsIDcwLCAxMTAsIDEzMF0sCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBjb2xvckJ5OiAnZGF0YScKICAgIH0KICBdCn07\'" v-bind="{layout: \'lr\'}" />\n<p>或者在饼图中统一使用一个颜色：</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgdHlwZTogJ3BpZScsCiAgICBjb2xvckJ5OiAnc2VyaWVzJywKICAgIHJhZGl1czogWzAsICc1MCUnXSwKICAgIGl0ZW1TdHlsZTogewogICAgICBib3JkZXJDb2xvcjogJyNmZmYnLAogICAgICBib3JkZXJXaWR0aDogMQogICAgfSwKICAgIGRhdGE6IFsKICAgICAgewogICAgICAgIHZhbHVlOiAzMzUsCiAgICAgICAgbmFtZTogJ0RpcmVjdCBWaXNpdCcKICAgICAgfSwKICAgICAgewogICAgICAgIHZhbHVlOiAyMzQsCiAgICAgICAgbmFtZTogJ1VuaW9uIEFkJwogICAgICB9LAogICAgICB7CiAgICAgICAgdmFsdWU6IDE1NDgsCiAgICAgICAgbmFtZTogJ1NlYXJjaCBFbmdpbmUnCiAgICAgIH0KICAgIF0KICB9Cn07\'" v-bind="{layout: \'lr\'}" />\n<p>这一配置项可以让我们避免了去找调色盘颜色然后去一一设置的麻烦，可能在特定的场景需求中提供便捷。后续我们会对这个配置项做进一步的增强，提供更多的调色盘取色的策略。</p>\n<h2 id="%E6%9E%81%E5%9D%90%E6%A0%87%E6%9F%B1%E7%8A%B6%E5%9B%BE%E7%9A%84%E6%A0%87%E7%AD%BE" tabindex="-1">极坐标柱状图的标签</h2>\n<p>这个版本中我们实现了极坐标上的柱状图的标签，并且支持丰富的标签定位配置。下面是一个最常见的标签显示在端点的进度图：</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGFuZ2xlQXhpczogewogICAgc2hvdzogZmFsc2UsCiAgICBtYXg6IDEwCiAgfSwKICByYWRpdXNBeGlzOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIHR5cGU6ICdjYXRlZ29yeScsCiAgICBkYXRhOiBbJ0FBQScsICdCQkInLCAnQ0NDJywgJ0RERCddCiAgfSwKICBwb2xhcjoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMywgNCwgNSwgNl0sCiAgICAgIGNvbG9yQnk6ICdkYXRhJywKICAgICAgcm91bmRDYXA6IHRydWUsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICAvLyDor5Xor5XmlLnmiJAgJ2luc2lkZVN0YXJ0JwogICAgICAgIHBvc2l0aW9uOiAnc3RhcnQnLAogICAgICAgIGZvcm1hdHRlcjogJ3tifScKICAgICAgfSwKICAgICAgY29vcmRpbmF0ZVN5c3RlbTogJ3BvbGFyJwogICAgfQogIF0KfTs\'" v-bind="{layout: \'lr\'}" />\n<p>更多标签位置的配置：</p>\n<p><img src="" alt="" data-src="images/5-2-0/polar-bar-label.jpg"></p>\n<p>这一灵活的标签位置配置项大大丰富了极坐标柱状图的表达能力，让文字清晰地匹配对应的数据。</p>\n<h2 id="%E7%A9%BA%E6%95%B0%E6%8D%AE%E7%9A%84%E9%A5%BC%E5%9B%BE%E6%A0%B7%E5%BC%8F" tabindex="-1">空数据的饼图样式</h2>\n<p>在之前的版本中，如果饼图没有数据，画面中可能就是完全空白的。因为没有任何的视觉元素，所以用户会疑惑是不是出现了 bug 导致图中没有内容。</p>\n<p>为了解决这个问题，这个版本我们会默认在无可显示数据的时候显示一个灰色的占位圆以防止画面中完全空白。我们可以通过<code>emptyCircleStyle</code>配置这个占位圆的样式。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgZGF0YTogW10sCiAgICAgIC8vIHNob3dFbXB0eUNpcmNsZTogZmFsc2UsCiAgICAgIGVtcHR5Q2lyY2xlU3R5bGU6IHsKICAgICAgICAvLyDlsIbmoLflvI_mlLnkuLrnqbrlv4PlnIYKICAgICAgICBjb2xvcjogJ3RyYW5zcGFyZW50JywKICAgICAgICBib3JkZXJDb2xvcjogJyNkZGQnLAogICAgICAgIGJvcmRlcldpZHRoOiAxCiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{layout: \'lr\'}" />\n<p>如果不想要显示这个灰色的圆，也可以设置<code>showEmptyCircle: false</code>关闭。</p>\n<h2 id="%E9%AB%98%E7%BB%B4%E6%95%B0%E6%8D%AE%E7%9A%84%E6%80%A7%E8%83%BD%E5%A2%9E%E5%BC%BA" tabindex="-1">高维数据的性能增强</h2>\n<p>我们从 4.0 开始引入了 <a href="https://echarts.apache.org/option.html#dataset">dataset</a> 用来管理图表的数据，通常情况下<code>dataset</code>提供了更方便的数据管理方式而且跟传统的方式不会有什么性能上的差别。但是在一些极端的特别高维（>100）数据的场景下，我们还是会碰到一些性能急剧下降的问题，比如下面这种通过一千个系列去可视化千维数据的场景（<a href="https://github.com/apache/echarts/issues/11907">#11907</a>），甚至可能会卡住。</p>\n<md-code-block lang="js" code="\'Y29uc3QgaW5kaWNlcyA9IEFycmF5LmZyb20oQXJyYXkoMTAwMCksIChfLCBpKSA9PiB7CiAgcmV0dXJuIGBpbmRleCR7aX1gOwp9KTsKY29uc3Qgb3B0aW9uID0gewogIHhBeGlzOiB7IHR5cGU6ICdjYXRlZ29yeScgfSwKICB5QXhpczoge30sCiAgZGF0YXNldDogewogICAgLy8gZGltZW5zaW9uOiBbJ2RhdGUnLCAuLi5pbmRpY2VzXSwKICAgIHNvdXJjZTogQXJyYXkuZnJvbShBcnJheSgxMCksIChfLCBpKSA9PiB7CiAgICAgIHJldHVybiB7CiAgICAgICAgZGF0ZTogaSwKICAgICAgICAuLi5pbmRpY2VzLnJlZHVjZSgoaXRlbSwgbmV4dCkgPT4gewogICAgICAgICAgaXRlbVtuZXh0XSA9IE1hdGgucmFuZG9tKCkgKiAxMDA7CiAgICAgICAgICByZXR1cm4gaXRlbTsKICAgICAgICB9LCB7fSkKICAgICAgfTsKICAgIH0pCiAgfSwKICBzZXJpZXM6IGluZGljZXMubWFwKGluZGV4ID0-IHsKICAgIHJldHVybiB7IHR5cGU6ICdsaW5lJywgbmFtZTogaW5kZXggfTsKICB9KQp9Ow\'" line-highlights="\'\'" />\n<p>产生这个性能问题是因为我们在底层每个系列都会按照其需要处理一遍这个 dataset，然后保存一份处理过后的数据以及维度等元信息。这意味着刚才那个例子中需要处理并保存<code>1000 x 1000</code>个维度的信息，这带来了巨大的内存和垃圾回收的压力，从而导致了高维度的性能的急剧下降。</p>\n<p>在新版本中我们对这个问题做了优化，所有系列都尽可能共享 dataset 的数据（能否共享取决于系列怎么使用这份数据）存储而非每个系列都处理并存储一次，并且只处理和存储了使用到的维度。这些优化保证了内存不会随着 dataset 维度和系列的增长而爆炸，大幅度的提升了极端场景下的初始化性能。刚才例子的渲染耗时也从卡住降低到了可接受的 300 毫秒以下。</p>\n<p>这次优化带来收益的还不只是这种高维的场景，在使用维度不高但是数据量很大的 dataset 的时候，因为数据的共享所以多个系列只处理了一遍数据，因此也可以带来显著的性能提升。</p>\n<h2 id="%E8%87%AA%E5%AE%9A%E4%B9%89%E7%B3%BB%E5%88%97%E7%9A%84%E7%B1%BB%E5%9E%8B%E4%BC%98%E5%8C%96" tabindex="-1">自定义系列的类型优化</h2>\n<p>自定义系列提供了非常灵活的创建系列图形的方式，相对于其它系列，自定义系列的学习曲线可能有些陡峭，而且容易出错。因此在这个版本中，我们进一步的优化了自定义系列中的核心方法<code>renderItem</code>的类型，对于<code>renderItem</code>的参数和返回值类型做了更精确的推断，从而可以根据返回的图形类型推断出可以设置该图形的哪些属性：</p>\n<md-code-block lang="ts" code="\'c2VyaWVzID0gewogIHR5cGU6ICdjdXN0b20nLAogIHJlbmRlckl0ZW0ocGFyYW1zKSB7CiAgICByZXR1cm4gewogICAgICB0eXBlOiAnZ3JvdXAnLAogICAgICAvLyBncm91cCDnsbvlnovkvb_nlKggY2hpbGRyZW4g5a2Y5YKo5YW25a6D57G75Z6L55qE5a2Q5YWD57SgCiAgICAgIGNoaWxkcmVuOiBbCiAgICAgICAgewogICAgICAgICAgdHlwZTogJ2NpcmNsZScsCiAgICAgICAgICAvLyBjaXJjbGUg5oul5pyJ5LiL6Z2i6L-Z5Lqb5Y-v5Lul6YWN572u55qEIHNoYXBlIOWxnuaApwogICAgICAgICAgc2hhcGU6IHsgcjogMTAsIGN4OiAwLCBjeTogMCB9LAogICAgICAgICAgLy8g5Y-v5Lul6YWN572u55qE5qC35byPCiAgICAgICAgICBzdHlsZTogeyBmaWxsOiAncmVkJyB9CiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICB0eXBlOiAncmVjdCcsCiAgICAgICAgICAvLyByZWN0IOaLpeacieS4i-mdoui_meS6m-WPr-S7pemFjee9rueahCBzaGFwZSDlsZ7mgKcKICAgICAgICAgIHNoYXBlOiB7IHg6IDAsIHk6IDAsIHdpZHRoOiAxMDAsIGhlaWdodDogMTAwIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHR5cGU6ICdwYXRoJywKICAgICAgICAgIC8vIOiHquWumuS5iei3r-W-hOWbvuW9ogogICAgICAgICAgc2hhcGU6IHsgZDogJy4uLicgfQogICAgICAgIH0KICAgICAgXQogICAgfTsKICB9Cn07\'" line-highlights="\'\'" />\n<h2 id="%E5%B0%8F%E7%BB%93" tabindex="-1">小结</h2>\n<p>以上我们介绍了 5.2.0 中的新特性以及优化，如果你对其中的一些特性感兴趣，不妨更新到最新版本的 Apache ECharts 亲自体验一下。</p>\n<p>如果你对 Apache ECharts 接下来的计划感兴趣，也可以在 <a href="https://github.com/apache/echarts/milestones">GitHub Milestone</a> 关注我们的开发计划。也非常欢迎加入我们的贡献者行列（在 <a href="https://github.com/apache/echarts/wiki">Wiki</a> 中了解更多）。</p>\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-2-0">版本更新</a></p>\n',postPath:"zh/basics/release-note/5-2-0",title:"5.2 - 版本特性 - 入门篇"}],fetch:{},error:null,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:C},{title:"入门篇",dir:t,children:[{title:"获取 ECharts",dir:e},{title:"在项目中引入 ECharts",dir:A},{title:"资源列表",dir:d,draft:g},{title:"寻求帮助",dir:l},{title:"版本特性",dir:a,children:[{title:"ECharts 5 特性介绍",dir:o},{title:"v4 升级 v5 指南",dir:r},{title:5.2,dir:c},{title:5.3,dir:n},{title:5.4,dir:s}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:B,draft:g},{title:"系列",dir:b,draft:g},{title:"样式",dir:m},{title:"数据集",dir:G},{title:"数据转换",dir:w},{title:"坐标系",dir:E,draft:g},{title:"坐标轴",dir:u},{title:"视觉映射",dir:I},{title:"图例",dir:Z},{title:"事件与行为",dir:H}]},{title:"应用篇",dir:J,children:[{title:"常用图表类型",dir:W,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:K},{title:"堆叠柱状图",dir:X},{title:"动态排序柱状图",dir:y},{title:"极坐标系柱状图",dir:R,draft:g},{title:"阶梯瀑布图",dir:Y},{title:"视觉映射的柱状图",dir:I,draft:g}]},{title:"折线图",dir:F,children:[{title:"基础折线图",dir:S},{title:"堆叠折线图",dir:v},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:L},{title:"阶梯线图",dir:f}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:k},{title:"圆环图",dir:D},{title:"南丁格尔图（玫瑰图）",dir:O}]},{title:"散点图",dir:T,children:[{title:"基础散点图",dir:N}]}]},{title:z,dir:i,draft:g},{title:"跨平台方案",dir:U,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:M},{title:"数据下钻",dir:x,draft:g}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"动画",dir:j,children:[{title:"数据过渡动画",dir:P}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:g},{title:"智能指针吸附",dir:$}]}]},{title:"最佳实践",dir:gg,children:[{title:z,dir:i,draft:g},{title:ig,dir:Ig},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Cg}]}],en:[{title:"Get Started",dir:C},{title:"Basics",dir:t,children:[{title:"Download ECharts",dir:e},{title:"Import ECharts",dir:A},{title:"Resources",dir:d,draft:g},{title:"Get Help",dir:l},{title:"What's New",dir:a,children:[{title:"ECharts 5 Features",dir:o},{title:"Migration from v4 to v5",dir:r},{title:5.2,dir:c},{title:5.3,dir:n},{title:5.4,dir:s}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:B,draft:g},{title:"Series",dir:b,draft:g},{title:"Style",dir:m},{title:"Dataset",dir:G},{title:"Data Transform",dir:w},{title:"Coordinate",dir:E,draft:g},{title:"Axis",dir:u},{title:"Visual Mapping",dir:I},{title:"Legend",dir:Z},{title:"Event and Action",dir:H}]},{title:"How To Guides",dir:J,children:[{title:"Common Charts",dir:W,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:K},{title:"Stacked Bar",dir:X},{title:"Bar Racing",dir:y},{title:"Bar Polar",dir:R,draft:g},{title:"Waterfall",dir:Y}]},{title:"Line",dir:F,children:[{title:"Basic Line",dir:S},{title:"Stacked Line",dir:v},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:L},{title:"Step Line",dir:f}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:k},{title:"Ring Style",dir:D},{title:"Rose Style",dir:O}]},{title:"Scatter",dir:T,children:[{title:"Basic Scatter",dir:N}]}]},{title:"Mobile",dir:i,draft:g},{title:"Cross Platform",dir:U,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:M},{title:"Drilldown",dir:x,draft:g}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Animation",dir:j,children:[{title:"Data Transition",dir:P}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:g},{title:"Intelligent Pointer Snapping",dir:$}]}]},{title:"Best Practices",dir:gg,children:[{title:"Mobile Optimization",dir:i,draft:g},{title:ig,dir:Ig},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Cg}]}]},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-2-0",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:null}}}}(!0,"mobile","visual-map","get-started","basics","download","import","resource","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","5-3-0","5-4-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","how-to","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","dynamic-data","drilldown","rich-text","animation","transition","interaction","connect","coarse-pointer","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/4d2a12b.js" defer></script><script src="/handbook/_nuxt/js/43cd67c0cf5a9d972051.js" defer></script><script src="/handbook/_nuxt/js/9d86a6602b3f4dd6c979.js" defer></script><script src="/handbook/_nuxt/js/fa73816a85b29fbf7562.js" defer></script><script src="/handbook/_nuxt/js/b964c20bb1562bc48da6.js" defer></script><script src="/handbook/_nuxt/js/60d2f1dbd961abb7604b.js" defer></script> |
| <script type="text/javascript">document.getElementById("nav-doc").className="active"</script> |
| <script src="https://fastly.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script> |
| <script src="https://fastly.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> |
| <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> |
| <script async src="https://www.googletagmanager.com/gtag/js?id=UA-141228404-1"></script> |
| <script>var _hmt=_hmt||[];function gtag(){dataLayer.push(arguments)}!function(){var e=document.createElement("script"),t=(e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395",document.getElementsByTagName("script")[0]);t.parentNode.insertBefore(e,t)}(),window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-141228404-1")</script> |
| </body> |
| </html> |
