Google Git
Sign in
apache / echarts-website / b8efdb91084be402bef480ea672c5dd951e71608 / . / handbook / zh / how-to / animation / transition / index.html
blob: ac513e20e7a16817dbb7731402e7c4b66b793e72 [file] [log] [blame]
<!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>数据过渡动画 - 动画 - 应用篇 - 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-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><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" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-3-0" class="nav-link"><span class="title">5.3</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-4-0" class="nav-link"><span class="title">5.4</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图（玫瑰图）</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">动画</span> <span class="glyphicon glyphicon-menu-up"></span></a> <ul class="nav bd-sidenav level2"><li class="nav-item"><a href="/handbook/zh/how-to/animation/transition" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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="%E5%9F%BA%E7%A1%80%E7%9A%84%E8%BF%87%E6%B8%A1%E5%8A%A8%E7%94%BB" tabindex="-1">基础的过渡动画</h1> <p>Apache ECharts<sup>TM</sup> 中使用了平移，缩放，变形等形式的过渡动画让数据的添加更新删除，以及用户的交互变得更加顺滑。通常情况下开发者不需要操心该如何去使用动画，只需要按自己的需求使用<code>setOption</code>更新数据，ECharts 就会找出跟上一次数据之间的区别，然后自动应用最合适的过渡动画。</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> <h2 id="%E8%BF%87%E6%B8%A1%E5%8A%A8%E7%94%BB%E7%9A%84%E9%85%8D%E7%BD%AE" tabindex="-1">过渡动画的配置</h2> <p>因为数据添加和数据更新往往会需要不一样的动画效果，比如我们会期望数据更新动画的时长更短，因此 ECharts 区分了这两者的动画配置：</p> <ul><li>对于新添加的数据，我们会应用入场动画，通过<code>animationDuration</code>, <code>animationEasing</code>, <code>animationDelay</code>三个配置项分别配置动画的时长，缓动以及延时。</li> <li>对于数据更新，我们会应用更新动画，通过<code>animationDurationUpdate</code>, <code>animationEasingUpdate</code>, <code>animationDelayUpdate</code>三个配置项分别配置动画的时长，缓动以及延时。</li></ul> <p>可以看到，更新动画配置是入场动画配置加上了<code>Update</code>的后缀。</p> <blockquote><p>在 ECharts 中每次 setOption 的更新，数据会跟上一次更新的数据做对比，然后根据对比结果分别为数据执行三种状态：添加，更新以及移除。这个比对是根据数据的<code>name</code>来决定的，例如上一次更新数据有三个<code>name</code>为<code>'A'</code>, <code>'B'</code>, <code>'C'</code>的数据，而新更新的数据变为了<code>'B'</code>, <code>'C'</code>, <code>'D'</code>的数据，则数据<code>'B'</code>, <code>'C'</code>会被执行更新，数据<code>'A'</code>会被移除，而数据<code>'D'</code>会被添加。如果是第一次更新因为没有旧数据，所以所有数据都会被执行添加。根据这三种状态 ECharts 会分别应用相应的入场动画，更新动画以及移除动画。</p></blockquote> <p>所有这些配置都可以分别设置在<code>option</code>最顶层对所有系列和组件生效，也可以分别为每个系列配置。</p> <p>如果我们想要关闭动画，可以直接设置<code>option.animation</code>为<code>false</code>。</p> <h3 id="%E5%8A%A8%E7%94%BB%E6%97%B6%E9%95%BF" tabindex="-1">动画时长</h3> <p><code>animationDuration</code>和<code>animationDurationUpdate</code>用于设置动画的时长，单位为<code>ms</code>，设置较长的动画时长可以让用户更清晰的看到过渡动画的效果，但是我们也需要小心过长的时间会让用户再等待的过程中失去耐心。</p> <p>设置为<code>0</code>会关闭动画，在我们只想要单独关闭入场动画或者更新动画的时候可以通过单独将相应的配置设置为<code>0</code>来实现。</p> <h3 id="%E5%8A%A8%E7%94%BB%E7%BC%93%E5%8A%A8" tabindex="-1">动画缓动</h3> <p><code>animationEasing</code>和<code>animationEasingUpdate</code>两个配置项用于设置动画的缓动函数，缓动函数是一个输入动画时间，输出动画进度的函数：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token punctuation">(</span>t<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">number</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>在 ECharts 里内置了缓入<code>'cubicIn'</code>，缓出<code>'cubicOut'</code>等常见的动画缓动函数，我们可以直接通过名字来声明使用这些缓动函数。</p> <p>内置缓动函数：</p> <iframe width="100%" height="400" src=""></iframe> <h3 id="%E5%BB%B6%E6%97%B6%E8%A7%A6%E5%8F%91" tabindex="-1">延时触发</h3> <p><code>animationDelay</code>和<code>animationDelayUpdate</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">var xAxisData = [];
var data1 = [];
var data2 = [];
for (var i = 0; i &lt; 100; i++) {
xAxisData.push('A' + i);
data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
}
option = {
legend: {
data: ['bar', 'bar2']
},
xAxis: {
data: xAxisData,
splitLine: {
show: false
}
},
yAxis: {},
series: [
{
name: 'bar',
type: 'bar',
data: data1,
emphasis: {
focus: 'series'
},
animationDelay: function(idx) {
return idx * 10;
}
},
{
name: 'bar2',
type: 'bar',
data: data2,
emphasis: {
focus: 'series'
},
animationDelay: function(idx) {
return idx * 10 + 100;
}
}
],
animationEasing: 'elasticOut',
animationDelayUpdate: function(idx) {
return idx * 5;
}
};</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">var</span> xAxisData <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> data1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> data2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">100</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
xAxisData<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'A'</span> <span class="token operator">+</span> i<span class="token punctuation">)</span><span class="token punctuation">;</span>
data1<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">sin</span><span class="token punctuation">(</span>i <span class="token operator">/</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>i <span class="token operator">/</span> <span class="token number">5</span> <span class="token operator">-</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">+</span> i <span class="token operator">/</span> <span class="token number">6</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
data2<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">cos</span><span class="token punctuation">(</span>i <span class="token operator">/</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>i <span class="token operator">/</span> <span class="token number">5</span> <span class="token operator">-</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">+</span> i <span class="token operator">/</span> <span class="token number">6</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">5</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">legend</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">'bar'</span><span class="token punctuation">,</span> <span class="token string">'bar2'</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">data</span><span class="token operator">:</span> xAxisData<span class="token punctuation">,</span>
<span class="token literal-property property">splitLine</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token 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">name</span><span class="token operator">:</span> <span class="token string">'bar'</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> data1<span class="token punctuation">,</span>
<span class="token literal-property property">emphasis</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">focus</span><span class="token operator">:</span> <span class="token string">'series'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function-variable function">animationDelay</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">idx</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> idx <span class="token operator">*</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 punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'bar2'</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> data2<span class="token punctuation">,</span>
<span class="token literal-property property">emphasis</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">focus</span><span class="token operator">:</span> <span class="token string">'series'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function-variable function">animationDelay</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">idx</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> idx <span class="token operator">*</span> <span class="token number">10</span> <span class="token operator">+</span> <span class="token number">100</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">animationEasing</span><span class="token operator">:</span> <span class="token string">'elasticOut'</span><span class="token punctuation">,</span>
<span class="token function-variable function">animationDelayUpdate</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">idx</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> idx <span class="token operator">*</span> <span class="token number">5</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="%E5%8A%A8%E7%94%BB%E7%9A%84%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96" tabindex="-1">动画的性能优化</h2> <p>在数据量特别大的时候，为图形应用动画可能会导致应用的卡顿，这个时候我们可以设置<code>animation: false</code>关闭动画。</p> <p>对于数据量会动态变化的图表，我们更推荐使用<code>animationThreshold</code>这个配置项，当画布中图形数量超过这个阈值的时候，ECharts 会自动关闭动画来提升绘制性能。这个配置往往是一个经验值，通常 ECharts 的性能足够实时渲染上千个图形的动画（我们默认值也是给了 2000），但是如果你的图表很复杂，或者你的用户环境比较恶劣，页面中又同时会运行很多其它复杂的代码，也可以适当的下调这个值保证整个应用的流畅性。</p> <h2 id="%E7%9B%91%E5%90%AC%E5%8A%A8%E7%94%BB%E7%BB%93%E6%9D%9F" tabindex="-1">监听动画结束</h2> <p>有时候我们想要获取当前渲染的结果，如果没有使用动画，我们在<code>setOption</code>之后 ECharts 就会直接执行渲染，我们可以同步的通过<code>getDataURL</code>方法获取渲染得到的结果。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token keyword">const</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>dom<span class="token punctuation">)</span><span class="token punctuation">;</span>
chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
animation<span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token comment">//...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 可以直接同步执行</span>
<span class="token keyword">const</span> dataUrl <span class="token operator">=</span> chart<span class="token punctuation">.</span><span class="token function">getDataURL</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>但是如果图表中有动画，马上执行<code>getDataURL</code>得到的是动画刚开始的画面，而非最终展示的结果。因此我们需要知道动画结束然后再执行<code>getDataURL</code>得到结果。</p> <p>假如你确定动画的时长，一种比较简单粗暴的方式是根据动画时长来执行<code>setTimeout</code>延迟执行：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code>chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
animationDuration<span class="token operator">:</span> <span class="token number">1000</span>
<span class="token comment">//...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">setTimeout</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>
<span class="token keyword">const</span> dataUrl <span class="token operator">=</span> chart<span class="token punctuation">.</span><span class="token function">getDataURL</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">1000</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>或者我们也可以使用 ECharts 提供的<code>rendered</code>事件来判断 ECharts 已经动画结束停止了渲染</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code>chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
animationDuration<span class="token operator">:</span> <span class="token number">1000</span>
<span class="token comment">//...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">onRendered</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> dataUrl <span class="token operator">=</span> chart<span class="token punctuation">.</span><span class="token function">getDataURL</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>
<span class="token comment">// 后续如果有交互，交互发生重绘也会触发该事件，因此使用完就需要移除</span>
chart<span class="token punctuation">.</span><span class="token function">off</span><span class="token punctuation">(</span><span class="token string">'rendered'</span><span class="token punctuation">,</span> onRendered<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
chart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'rendered'</span><span class="token punctuation">,</span> onRendered<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/how-to/animation/transition.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></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(i,t,e,d,a,r,l,o,n,c,g,h,s,C,I,p,A,m,B,b,u,E,K,G,k,w,S,R,X,f,Y,v,O,W,F,V,Z,H,D,y,T,J,L,U,z,M,P,x,Q,N,j,_,q,$,ii,ti,ei,di){return{layout:"default",data:[{html:'<h1 id="%E5%9F%BA%E7%A1%80%E7%9A%84%E8%BF%87%E6%B8%A1%E5%8A%A8%E7%94%BB" tabindex="-1">基础的过渡动画</h1>\n<p>Apache ECharts<sup>TM</sup> 中使用了平移，缩放，变形等形式的过渡动画让数据的添加更新删除，以及用户的交互变得更加顺滑。通常情况下开发者不需要操心该如何去使用动画，只需要按自己的需求使用<code>setOption</code>更新数据，ECharts 就会找出跟上一次数据之间的区别，然后自动应用最合适的过渡动画。</p>\n<p>比如下面例子就是定时更新饼图数据（随机）的过渡动画效果。</p>\n<md-live lang="js" code="\'ZnVuY3Rpb24gbWFrZVJhbmRvbURhdGEoKSB7CiAgcmV0dXJuIFsKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdBJwogICAgfSwKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdCJwogICAgfSwKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdDJwogICAgfQogIF07Cn0Kb3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgcmFkaXVzOiBbMCwgJzUwJSddLAogICAgICBkYXRhOiBtYWtlUmFuZG9tRGF0YSgpCiAgICB9CiAgXQp9OwoKc2V0SW50ZXJ2YWwoKCkgPT4gewogIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgIHNlcmllczogewogICAgICBkYXRhOiBtYWtlUmFuZG9tRGF0YSgpCiAgICB9CiAgfSk7Cn0sIDIwMDApOw\'" v-bind="{layout: \'lr\'}" />\n<h2 id="%E8%BF%87%E6%B8%A1%E5%8A%A8%E7%94%BB%E7%9A%84%E9%85%8D%E7%BD%AE" tabindex="-1">过渡动画的配置</h2>\n<p>因为数据添加和数据更新往往会需要不一样的动画效果，比如我们会期望数据更新动画的时长更短，因此 ECharts 区分了这两者的动画配置：</p>\n<ul>\n<li>对于新添加的数据，我们会应用入场动画，通过<code>animationDuration</code>, <code>animationEasing</code>, <code>animationDelay</code>三个配置项分别配置动画的时长，缓动以及延时。</li>\n<li>对于数据更新，我们会应用更新动画，通过<code>animationDurationUpdate</code>, <code>animationEasingUpdate</code>, <code>animationDelayUpdate</code>三个配置项分别配置动画的时长，缓动以及延时。</li>\n</ul>\n<p>可以看到，更新动画配置是入场动画配置加上了<code>Update</code>的后缀。</p>\n<blockquote>\n<p>在 ECharts 中每次 setOption 的更新，数据会跟上一次更新的数据做对比，然后根据对比结果分别为数据执行三种状态：添加，更新以及移除。这个比对是根据数据的<code>name</code>来决定的，例如上一次更新数据有三个<code>name</code>为<code>\'A\'</code>, <code>\'B\'</code>, <code>\'C\'</code>的数据，而新更新的数据变为了<code>\'B\'</code>, <code>\'C\'</code>, <code>\'D\'</code>的数据，则数据<code>\'B\'</code>, <code>\'C\'</code>会被执行更新，数据<code>\'A\'</code>会被移除，而数据<code>\'D\'</code>会被添加。如果是第一次更新因为没有旧数据，所以所有数据都会被执行添加。根据这三种状态 ECharts 会分别应用相应的入场动画，更新动画以及移除动画。</p>\n</blockquote>\n<p>所有这些配置都可以分别设置在<code>option</code>最顶层对所有系列和组件生效，也可以分别为每个系列配置。</p>\n<p>如果我们想要关闭动画，可以直接设置<code>option.animation</code>为<code>false</code>。</p>\n<h3 id="%E5%8A%A8%E7%94%BB%E6%97%B6%E9%95%BF" tabindex="-1">动画时长</h3>\n<p><code>animationDuration</code>和<code>animationDurationUpdate</code>用于设置动画的时长，单位为<code>ms</code>，设置较长的动画时长可以让用户更清晰的看到过渡动画的效果，但是我们也需要小心过长的时间会让用户再等待的过程中失去耐心。</p>\n<p>设置为<code>0</code>会关闭动画，在我们只想要单独关闭入场动画或者更新动画的时候可以通过单独将相应的配置设置为<code>0</code>来实现。</p>\n<h3 id="%E5%8A%A8%E7%94%BB%E7%BC%93%E5%8A%A8" tabindex="-1">动画缓动</h3>\n<p><code>animationEasing</code>和<code>animationEasingUpdate</code>两个配置项用于设置动画的缓动函数，缓动函数是一个输入动画时间，输出动画进度的函数：</p>\n<md-code-block lang="ts" code="\'KHQ6IG51bWJlcikgPT4gbnVtYmVyOw\'" line-highlights="\'\'" />\n<p>在 ECharts 里内置了缓入<code>\'cubicIn\'</code>，缓出<code>\'cubicOut\'</code>等常见的动画缓动函数，我们可以直接通过名字来声明使用这些缓动函数。</p>\n<p>内置缓动函数：</p>\n<md-example src="line-easing" width="100%" height="400" />\n<h3 id="%E5%BB%B6%E6%97%B6%E8%A7%A6%E5%8F%91" tabindex="-1">延时触发</h3>\n<p><code>animationDelay</code>和<code>animationDelayUpdate</code>用于设置动画延迟开始的时间，通常我们会使用回调函数将不同数据设置不同的延时来实现交错动画的效果：</p>\n<md-live lang="ts" code="\'dmFyIHhBeGlzRGF0YSA9IFtdOwp2YXIgZGF0YTEgPSBbXTsKdmFyIGRhdGEyID0gW107CmZvciAodmFyIGkgPSAwOyBpIDwgMTAwOyBpKyspIHsKICB4QXhpc0RhdGEucHVzaCgnQScgKyBpKTsKICBkYXRhMS5wdXNoKChNYXRoLnNpbihpIC8gNSkgKiAoaSAvIDUgLSAxMCkgKyBpIC8gNikgKiA1KTsKICBkYXRhMi5wdXNoKChNYXRoLmNvcyhpIC8gNSkgKiAoaSAvIDUgLSAxMCkgKyBpIC8gNikgKiA1KTsKfQpvcHRpb24gPSB7CiAgbGVnZW5kOiB7CiAgICBkYXRhOiBbJ2JhcicsICdiYXIyJ10KICB9LAogIHhBeGlzOiB7CiAgICBkYXRhOiB4QXhpc0RhdGEsCiAgICBzcGxpdExpbmU6IHsKICAgICAgc2hvdzogZmFsc2UKICAgIH0KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ2JhcicsCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBkYXRhMSwKICAgICAgZW1waGFzaXM6IHsKICAgICAgICBmb2N1czogJ3NlcmllcycKICAgICAgfSwKICAgICAgYW5pbWF0aW9uRGVsYXk6IGZ1bmN0aW9uKGlkeCkgewogICAgICAgIHJldHVybiBpZHggKiAxMDsKICAgICAgfQogICAgfSwKICAgIHsKICAgICAgbmFtZTogJ2JhcjInLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogZGF0YTIsCiAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgZm9jdXM6ICdzZXJpZXMnCiAgICAgIH0sCiAgICAgIGFuaW1hdGlvbkRlbGF5OiBmdW5jdGlvbihpZHgpIHsKICAgICAgICByZXR1cm4gaWR4ICogMTAgKyAxMDA7CiAgICAgIH0KICAgIH0KICBdLAogIGFuaW1hdGlvbkVhc2luZzogJ2VsYXN0aWNPdXQnLAogIGFuaW1hdGlvbkRlbGF5VXBkYXRlOiBmdW5jdGlvbihpZHgpIHsKICAgIHJldHVybiBpZHggKiA1OwogIH0KfTs\'" v-bind="{ layout: \'lr\' }" />\n<h2 id="%E5%8A%A8%E7%94%BB%E7%9A%84%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96" tabindex="-1">动画的性能优化</h2>\n<p>在数据量特别大的时候，为图形应用动画可能会导致应用的卡顿，这个时候我们可以设置<code>animation: false</code>关闭动画。</p>\n<p>对于数据量会动态变化的图表，我们更推荐使用<code>animationThreshold</code>这个配置项，当画布中图形数量超过这个阈值的时候，ECharts 会自动关闭动画来提升绘制性能。这个配置往往是一个经验值，通常 ECharts 的性能足够实时渲染上千个图形的动画（我们默认值也是给了 2000），但是如果你的图表很复杂，或者你的用户环境比较恶劣，页面中又同时会运行很多其它复杂的代码，也可以适当的下调这个值保证整个应用的流畅性。</p>\n<h2 id="%E7%9B%91%E5%90%AC%E5%8A%A8%E7%94%BB%E7%BB%93%E6%9D%9F" tabindex="-1">监听动画结束</h2>\n<p>有时候我们想要获取当前渲染的结果，如果没有使用动画，我们在<code>setOption</code>之后 ECharts 就会直接执行渲染，我们可以同步的通过<code>getDataURL</code>方法获取渲染得到的结果。</p>\n<md-code-block lang="ts" code="\'Y29uc3QgY2hhcnQgPSBlY2hhcnRzLmluaXQoZG9tKTsKY2hhcnQuc2V0T3B0aW9uKHsKICBhbmltYXRpb246IGZhbHNlCiAgLy8uLi4KfSk7Ci8vIOWPr-S7peebtOaOpeWQjOatpeaJp-ihjApjb25zdCBkYXRhVXJsID0gY2hhcnQuZ2V0RGF0YVVSTCgpOw\'" line-highlights="\'\'" />\n<p>但是如果图表中有动画，马上执行<code>getDataURL</code>得到的是动画刚开始的画面，而非最终展示的结果。因此我们需要知道动画结束然后再执行<code>getDataURL</code>得到结果。</p>\n<p>假如你确定动画的时长，一种比较简单粗暴的方式是根据动画时长来执行<code>setTimeout</code>延迟执行：</p>\n<md-code-block lang="ts" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICBhbmltYXRpb25EdXJhdGlvbjogMTAwMAogIC8vLi4uCn0pOwpzZXRUaW1lb3V0KCgpID0-IHsKICBjb25zdCBkYXRhVXJsID0gY2hhcnQuZ2V0RGF0YVVSTCgpOwp9LCAxMDAwKTs\'" line-highlights="\'\'" />\n<p>或者我们也可以使用 ECharts 提供的<code>rendered</code>事件来判断 ECharts 已经动画结束停止了渲染</p>\n<md-code-block lang="ts" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICBhbmltYXRpb25EdXJhdGlvbjogMTAwMAogIC8vLi4uCn0pOwoKZnVuY3Rpb24gb25SZW5kZXJlZCgpIHsKICBjb25zdCBkYXRhVXJsID0gY2hhcnQuZ2V0RGF0YVVSTCgpOwogIC8vIC4uLgogIC8vIOWQjue7reWmguaenOacieS6pOS6ku-8jOS6pOS6kuWPkeeUn-mHjee7mOS5n-S8muinpuWPkeivpeS6i-S7tu-8jOWboOatpOS9v-eUqOWujOWwsemcgOimgeenu-mZpAogIGNoYXJ0Lm9mZigncmVuZGVyZWQnLCBvblJlbmRlcmVkKTsKfQpjaGFydC5vbigncmVuZGVyZWQnLCBvblJlbmRlcmVkKTs\'" line-highlights="\'\'" />\n',postPath:"zh/how-to/animation/transition",title:"数据过渡动画 - 动画 - 应用篇"}],fetch:{},error:null,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:r},{title:"在项目中引入 ECharts",dir:l},{title:"资源列表",dir:o,draft:i},{title:"寻求帮助",dir:n},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"v4 升级 v5 指南",dir:h},{title:5.2,dir:s},{title:5.3,dir:C},{title:5.4,dir:I}]}]},{title:"概念篇",dir:p,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:m,draft:i},{title:"系列",dir:B,draft:i},{title:"样式",dir:b},{title:"数据集",dir:u},{title:"数据转换",dir:E},{title:"坐标系",dir:K,draft:i},{title:"坐标轴",dir:G},{title:"视觉映射",dir:e},{title:"图例",dir:k},{title:"事件与行为",dir:w}]},{title:"应用篇",dir:S,children:[{title:"常用图表类型",dir:R,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:X},{title:"堆叠柱状图",dir:f},{title:"动态排序柱状图",dir:Y},{title:"极坐标系柱状图",dir:v,draft:i},{title:"阶梯瀑布图",dir:O},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:W,children:[{title:"基础折线图",dir:F},{title:"堆叠折线图",dir:V},{title:"区域面积图",dir:Z},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:D}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:y},{title:"圆环图",dir:T},{title:"南丁格尔图（玫瑰图）",dir:J}]},{title:"散点图",dir:L,children:[{title:"基础散点图",dir:U}]}]},{title:z,dir:t,draft:i},{title:"跨平台方案",dir:M,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:P},{title:"数据下钻",dir:x,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"动画",dir:N,children:[{title:"数据过渡动画",dir:j}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:i},{title:"智能指针吸附",dir:$}]}]},{title:"最佳实践",dir:ii,children:[{title:z,dir:t,draft:i},{title:ti,dir:ei},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:di}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:r},{title:"Import ECharts",dir:l},{title:"Resources",dir:o,draft:i},{title:"Get Help",dir:n},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:g},{title:"Migration from v4 to v5",dir:h},{title:5.2,dir:s},{title:5.3,dir:C},{title:5.4,dir:I}]}]},{title:"Concepts",dir:p,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:m,draft:i},{title:"Series",dir:B,draft:i},{title:"Style",dir:b},{title:"Dataset",dir:u},{title:"Data Transform",dir:E},{title:"Coordinate",dir:K,draft:i},{title:"Axis",dir:G},{title:"Visual Mapping",dir:e},{title:"Legend",dir:k},{title:"Event and Action",dir:w}]},{title:"How To Guides",dir:S,children:[{title:"Common Charts",dir:R,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:X},{title:"Stacked Bar",dir:f},{title:"Bar Racing",dir:Y},{title:"Bar Polar",dir:v,draft:i},{title:"Waterfall",dir:O}]},{title:"Line",dir:W,children:[{title:"Basic Line",dir:F},{title:"Stacked Line",dir:V},{title:"Area Chart",dir:Z},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:D}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:y},{title:"Ring Style",dir:T},{title:"Rose Style",dir:J}]},{title:"Scatter",dir:L,children:[{title:"Basic Scatter",dir:U}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:M,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:P},{title:"Drilldown",dir:x,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Animation",dir:N,children:[{title:"Data Transition",dir:j}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:i},{title:"Intelligent Pointer Snapping",dir:$}]}]},{title:"Best Practices",dir:ii,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ti,dir:ei},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:di}]}]},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:i,routePath:"/zh/how-to/animation/transition",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>