<!doctype html>
<html data-n-head-ssr lang="zh-CN" data-n-head="%7B%22lang%22:%7B%22ssr%22:%22zh-CN%22%7D%7D">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>5.5 - 版本特性 - 入门篇 - 使用手册 - Apache ECharts</title><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="shortcut icon" type="image/png" href="https://echarts.apache.org/zh/images/favicon.png"><link data-n-head="ssr" rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css"><link data-n-head="ssr" rel="stylesheet" href="https://echarts.apache.org/zh/css/main.css"><link data-n-head="ssr" rel="stylesheet" href="https://lib.baomitu.com/docsearch.js/2.6.3/docsearch.min.css"><link data-n-head="ssr" rel="preconnect" href="https://14syrifeto-dsn.algolia.net" crossorigin=""><script data-n-head="ssr" src="https://cdn.staticfile.net/jquery/3.7.1/jquery.min.js"></script><script data-n-head="ssr" src="https://lib.baomitu.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script><script data-n-head="ssr" src="https://lib.baomitu.com/docsearch.js/2.6.3/docsearch.min.js"></script><link rel="preload" href="/handbook/_nuxt/39f47d5.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/093f748.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/370a69432553765ab9ac.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/ba9ec8a.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e6d1a07e1c4601004948.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/093f748.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_=20240226" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/handbook/zh/basics/release-note/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-input" 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" 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><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-5-0" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">5.5</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.5.0-%E7%89%B9%E6%80%A7%E4%BB%8B%E7%BB%8D" tabindex="-1">Apache ECharts 5.5.0 特性介绍</h1> <h2 id="%E5%A2%9E%E5%BC%BA%E7%9A%84-esm-%E6%94%AF%E6%8C%81" tabindex="-1">增强的 ESM 支持</h2> <p>为了让开发者在测试和 Node.js 环境使用更方便，我们在这个版本中对 ESM 的识别问题进行了优化。</p> <p>以前，ECharts 只在 npm（npm 包的 lib 目录中）导出 <code>*.esm</code> 文件。虽然这在 bundlers 环境表现良好，但 Node.js 环境和一些基于 Node.js 的测试框架（如 vitest 和 jest）中的表现并不理想。</p> <p>有了这个新功能，我们做了几个改变以改善这个问题：</p> <ul><li>在 <code>package.json</code> 中添加了 <code>"type": "module"</code></li> <li>在 <code>package.json</code> 中添加了 <code>"exports": {...}</code></li> <li>在子目录中添加了一些只包含 <code>"type": "commonjs"</code> 的 <code>package.json</code> 文件</li></ul> <p>这些改变意味着，像 <code>echarts/core.js</code> 这样的文件现在可以在像纯 Node.js、vitest、jest 和 create-react-app 这样的环境中解析为 ESM。</p> <p>我们还确保了这个新功能与各种环境兼容，包括运行时（Node.js/vitest/jest（create-react-app）/ssr/…）和打包器（webpack/rollup/vite/esbuild/…）。</p> <p>我们非常期待这一新功能，并相信它将极大地改善开发者的体验。</p> <h2 id="%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93-%EF%BC%8B-%E5%AE%A2%E6%88%B7%E7%AB%AF%E8%BD%BB%E9%87%8F%E8%BF%90%E8%A1%8C%E6%97%B6" tabindex="-1">服务端渲染 ＋ 客户端轻量运行时</h2> <p>Apache ECharts 功能强大，相应地，包体积也比较大。我们在之前的版本中也做了各种努力来改进这一点。开发者可以使用 TreeShaking 按需加载部分代码，以减少加载的代码量。从 Apache ECharts 5.3 版本起，我们支持了零依赖的服务端 SVG 字符串渲染方案，并支持图表的初始动画。这样，使用服务端渲染的结果作为首屏渲染的画面，可以大大减少首屏加载时间。</p> <p>服务端渲染虽然是一种很有效减少包体积的解决方案，但如果需要在客户端实现一些交互，那么不得不仍旧加载 echarts.js，这可能会增加更多的加载时间。对于一些对页面加载速度要求较高的场景，这可能不是一个理想的选择。</p> <p>在 5.5.0 版本中，我们新增了客户端轻量运行时，客户端无需加载完整 ECharts 即可实现部分交互。这样，我们可以在服务端渲染图表，然后在客户端加载轻量运行时，实现一些常见的交互。这意味着，只需要加载 4KB 的轻量运行时（gzip 后 1KB），即可实现带初始动画和部分常用交互形式的图表。这一改进将极大地提升页面加载速度，特别是对于移动端的体验。</p> <p><img src alt data-src="images/5-5-0/ssr-example.png"></p> <p>以这个带标题的饼图为例，如果按客户端仅打包饼图和标题组件的方案，gzip 后需要 135KB；如果按服务端渲染的方案，渲染结果 SVG gzip 后 1 KB、客户端运行时 gzip 后 1KB，仅为前者体积的 1.5%。交互方面，后者也可以做到初始动画、鼠标移动到图表元素后的高亮，并且获取到点击事件，能够满足大部分的常见交互需求。</p> <p>如需使用这一方案，服务端代码和之前一样，但需要保证 ECharts 版本号在 5.5.0 以上。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token comment">// 服务端代码</span>
<span class="token keyword">const</span> echarts <span class="token operator">=</span> <span class="token keyword">require</span><span class="token punctuation">(</span><span class="token string">'echarts'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 在 SSR 模式下第一个参数不需要再传入 DOM 对象</span>
<span class="token keyword">let</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  renderer<span class="token operator">:</span> <span class="token string">'svg'</span><span class="token punctuation">,</span> <span class="token comment">// 必须使用 SVG 模式</span>
  ssr<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 开启 SSR</span>
  width<span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span> <span class="token comment">// 需要指明高和宽，如果是根据客户端容器大小动态的，该值需要从客户端得到</span>
  height<span class="token operator">:</span> <span class="token number">300</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 像正常使用一样 setOption</span>
chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <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> svgStr <span class="token operator">=</span> chart<span class="token punctuation">.</span><span class="token function">renderToSVGString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 调用 dispose 以释放内存</span>
chart<span class="token punctuation">.</span><span class="token function">dispose</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
chart <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>

<span class="token comment">// 通过 HTTP Response 返回 svgStr 给前端或者缓存到本地（这里以 Express.js 为例）：</span>
res<span class="token punctuation">.</span><span class="token function">writeHead</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  <span class="token string-property property">'Content-Type'</span><span class="token operator">:</span> <span class="token string">'application/xml'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
res<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>svgStr<span class="token punctuation">)</span><span class="token punctuation">;</span>
res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>客户端将得到的 SVG 字符串添加到容器中，并绑定轻量运行时：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chart-container<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span>800px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>600px</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/echarts/ssr/client/dist/index.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span>
const ssrClient = window['echarts-ssr-client'];

const isSeriesShown = {
  a: true,
  b: true
};

function updateChart(svgStr) {
  const container = document.getElementById('chart-container');
  container.innerHTML = svgStr;

  // 使用轻量运行时赋予图表交互能力
  ssrClient.hydrate(container, {
    on: {
      click: (params) => {
        if (params.ssrType === 'legend') {
          // 点击图例元素，请求服务器进行二次渲染
          isSeriesShown[params.seriesName] = !isSeriesShown[params.seriesName];
          fetch('...?series=' + JSON.stringify(isSeriesShown))
            .then(res => res.text())
            .then(svgStr => {
              updateChart(svgStr);
            });
        }
      }
    }
  });
}

// 通过 AJAX 请求获取服务端渲染的 SVG 字符串
fetch('...')
  .then(res => res.text())
  .then(svgStr => {
    updateChart(svgStr);
  });
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>客户端轻量运行时必须配合 SVG 形式的服务端渲染结果使用，支持以下交互：</p> <ul><li>图表初始动画（实现原理：服务端渲染的 SVG 带有 CSS 动画）</li> <li>高亮样式（实现原理：服务端渲染的 SVG 带有 CSS 动画）</li> <li>动态改变数据（实现原理：轻量运行时请求服务器进行二次渲染）</li> <li>点击图例切换系列是否显示（实现原理：轻量运行时请求服务器进行二次渲染）</li></ul> <p>可以发现，这能够满足大部分的交互场景需求。如果需要更复杂的交互，则客户端需要加载 <code>echarts.js</code> 实现完整功能。完整的介绍请参见<a href="zh/how-to/cross-platform/server">服务端渲染 ECharts 图表</a>。</p> <h2 id="%E6%95%B0%E6%8D%AE%E4%B8%8B%E9%92%BB%E6%94%AF%E6%8C%81%E8%BF%87%E6%B8%A1%E5%8A%A8%E7%94%BB" tabindex="-1">数据下钻支持过渡动画</h2> <p>在 5.5.0 版本中，我们新增了 <code>childGroupId</code> 配置项，可以实现数据下钻的过渡动画功能。</p> <p>在之前的版本中，我们已经支持使用 <code>groupId</code>，用以表示当前数据所属的组别。而这次新增的 <code>childGroupId</code> 则可以用来表明当前数据本身的组别，与 <code>groupId</code> 配合使用后形成一个“父-子-孙”的关系链条。当用户点击图表中的数据元素时，图表会以过渡动画的形式展示下钻的数据。</p> <iframe width="100%" height="400" src=""></iframe> <p>开发者只需要指定 <code>groupId</code> 和 <code>childGroupId</code>，ECharts 就会自动处理层级关系，实现过渡动画。</p> <h2 id="%E9%A5%BC%E5%9B%BE%E6%94%AF%E6%8C%81%E6%89%87%E5%8C%BA%E4%B9%8B%E9%97%B4%E7%9A%84%E9%97%B4%E9%9A%94" tabindex="-1">饼图支持扇区之间的间隔</h2> <p>通过设置饼图扇区之间的间隔，可以让饼图的数据块之间更加清晰，并且形成独特的视觉效果。参见（<a href="https://echarts.apache.org/option.html#series-pie.padAngle">series-pie.padAngle</a>）。</p> <iframe width="100%" height="400" src=""></iframe> <h2 id="%E9%A5%BC%E5%9B%BE%E5%92%8C%E6%9E%81%E5%9D%90%E6%A0%87%E7%B3%BB%E6%94%AF%E6%8C%81%E7%BB%93%E6%9D%9F%E8%A7%92%E5%BA%A6" tabindex="-1">饼图和极坐标系支持结束角度</h2> <p>结束角度的配置项使得我们可以制作半圆形等不完整的饼图。参见（<a href="https://echarts.apache.org/option.html#series-pie.endAngle">series-pie.endAngle</a>）。</p> <iframe width="100%" height="400" src=""></iframe> <p>极坐标系也同样支持了结束角度，可以制作出更加丰富的极坐标图表。参见（<a href="https://echarts.apache.org/option.html#angleAxis.endAngle">angleAxis.endAngle</a>）。</p> <iframe width="100%" height="400" src=""></iframe> <h2 id="%E6%96%B0%E5%A2%9E-min-max-%E9%87%87%E6%A0%B7%E6%96%B9%E5%BC%8F" tabindex="-1">新增 <code>min-max</code> 采样方式</h2> <p>ECharts 的 <a href="https://echarts.apache.org/option.html#series-line.sampling">sampling</a> 配置项允许设置折线图在数据量远大于像素点时候的降采样策略，开启后可以有效的优化图表的绘制效率。在 5.5.0 版本中，我们新增了 <code>min-max</code> 采样方式，可以在保留数据的整体趋势的同时，更加精确的展示数据的极值。</p> <h2 id="%E6%96%B0%E5%A2%9E%E4%B8%A4%E7%A7%8D%E8%AF%AD%E8%A8%80%EF%BC%9A%E9%98%BF%E6%8B%89%E4%BC%AF%E8%AF%AD%E5%92%8C%E8%8D%B7%E5%85%B0%E8%AF%AD" tabindex="-1">新增两种语言：阿拉伯语和荷兰语</h2> <p>在 5.5.0 版本中，我们新增了阿拉伯语（AR）和荷兰语（NL）两种语言的支持。开发者可以通过 <a href="https://echarts.apache.org/api.html#echarts.registerLocale">echarts.registerLocale</a> 方法注册新的语言包。</p> <h2 id="%E6%8F%90%E7%A4%BA%E6%A1%86%E6%94%AF%E6%8C%81%E6%8C%87%E5%AE%9A%E5%AE%B9%E5%99%A8" tabindex="-1">提示框支持指定容器</h2> <p>在之前的版本中，提示框（Tooltip）只能插入到图表容器或者 <code>document.body</code> 中。现在，可以通过 <a href="https://echarts.apache.org/option.html#tooltip.appendTo">tooltip.appendTo</a> 指定容器，从而能更灵活地控制提示框的位置。</p> <h2 id="%E5%9D%90%E6%A0%87%E8%BD%B4%E6%9C%80%E5%A4%A7%E3%80%81%E6%9C%80%E5%B0%8F%E6%A0%87%E7%AD%BE%E7%9A%84%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F" tabindex="-1">坐标轴最大、最小标签的对齐方式</h2> <p>在 5.5.0 版本中，我们新增了 <a href="https://echarts.apache.org/option.html#xAxis.axisLabel.alignMinLabel">axisLabel.alignMinLabel</a> 和 <a href="https://echarts.apache.org/option.html#xAxis.axisLabel.alignMaxLabel">axisLabel.alignMaxLabel</a> 配置项，可以控制坐标轴最大、最小标签的对齐方式。如果图表绘图区域比较大，不希望坐标轴标签溢出，可以将最大、最小标签分别对齐到右和左。</p> <iframe width="100%" height="400" src=""></iframe> <h2 id="%E8%B1%A1%E5%BD%A2%E6%9F%B1%E5%9B%BE%E6%94%AF%E6%8C%81%E8%A3%81%E5%89%AA" tabindex="-1">象形柱图支持裁剪</h2> <p>象形柱图可能存在超过绘图区域的情况，如果希望避免这种情况，可以通过 <a href="https://echarts.apache.org/option.html#series-pictorialBar.clip">series-pictorialBar.clip</a> 配置项进行裁剪。</p> <h2 id="%E6%8F%90%E7%A4%BA%E6%A1%86-valueformatter-%E5%A2%9E%E5%8A%A0-dataindex-%E5%8F%82%E6%95%B0" tabindex="-1">提示框 valueFormatter 增加 dataIndex 参数</h2> <p><code>valueFormatter</code> 可以用来自定义提示框内容中数值的部分，现在新增了 <code>dataIndex</code> 参数，可以用来获取当前数据的索引。</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-5-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-5-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/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60" loading="lazy"> <span>Ovilia</span></a><a href="https://github.com/plainheart" target="_blank" class="post-contributor"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60" loading="lazy"> <span>plainheart</span></a></div></div></div></div></div></div></div></div></div></div><script>window.__NUXT__=function(t,e,i,a,d,r,l,n,o,c,h,p,s,g,E,A,C,m,B,I,u,b,v,y,L,W,S,G,x,f,Z,w,F,j,N,z,D,K,O,R,H,V,k,Y,X,P,J,T,U,M,q,Q,_,$,tt,et,it,at){return{layout:"default",data:[{html:'<h1 id="apache-echarts-5.5.0-%E7%89%B9%E6%80%A7%E4%BB%8B%E7%BB%8D" tabindex="-1">Apache ECharts 5.5.0 特性介绍</h1>\n<h2 id="%E5%A2%9E%E5%BC%BA%E7%9A%84-esm-%E6%94%AF%E6%8C%81" tabindex="-1">增强的 ESM 支持</h2>\n<p>为了让开发者在测试和 Node.js 环境使用更方便，我们在这个版本中对 ESM 的识别问题进行了优化。</p>\n<p>以前，ECharts 只在 npm（npm 包的 lib 目录中）导出 <code>*.esm</code> 文件。虽然这在 bundlers 环境表现良好，但 Node.js 环境和一些基于 Node.js 的测试框架（如 vitest 和 jest）中的表现并不理想。</p>\n<p>有了这个新功能，我们做了几个改变以改善这个问题：</p>\n<ul>\n<li>在 <code>package.json</code> 中添加了 <code>&quot;type&quot;: &quot;module&quot;</code></li>\n<li>在 <code>package.json</code> 中添加了 <code>&quot;exports&quot;: {...}</code></li>\n<li>在子目录中添加了一些只包含 <code>&quot;type&quot;: &quot;commonjs&quot;</code> 的 <code>package.json</code> 文件</li>\n</ul>\n<p>这些改变意味着，像 <code>echarts/core.js</code> 这样的文件现在可以在像纯 Node.js、vitest、jest 和 create-react-app 这样的环境中解析为 ESM。</p>\n<p>我们还确保了这个新功能与各种环境兼容，包括运行时（Node.js/vitest/jest（create-react-app）/ssr/…）和打包器（webpack/rollup/vite/esbuild/…）。</p>\n<p>我们非常期待这一新功能，并相信它将极大地改善开发者的体验。</p>\n<h2 id="%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93-%EF%BC%8B-%E5%AE%A2%E6%88%B7%E7%AB%AF%E8%BD%BB%E9%87%8F%E8%BF%90%E8%A1%8C%E6%97%B6" tabindex="-1">服务端渲染 ＋ 客户端轻量运行时</h2>\n<p>Apache ECharts 功能强大，相应地，包体积也比较大。我们在之前的版本中也做了各种努力来改进这一点。开发者可以使用 TreeShaking 按需加载部分代码，以减少加载的代码量。从 Apache ECharts 5.3 版本起，我们支持了零依赖的服务端 SVG 字符串渲染方案，并支持图表的初始动画。这样，使用服务端渲染的结果作为首屏渲染的画面，可以大大减少首屏加载时间。</p>\n<p>服务端渲染虽然是一种很有效减少包体积的解决方案，但如果需要在客户端实现一些交互，那么不得不仍旧加载 echarts.js，这可能会增加更多的加载时间。对于一些对页面加载速度要求较高的场景，这可能不是一个理想的选择。</p>\n<p>在 5.5.0 版本中，我们新增了客户端轻量运行时，客户端无需加载完整 ECharts 即可实现部分交互。这样，我们可以在服务端渲染图表，然后在客户端加载轻量运行时，实现一些常见的交互。这意味着，只需要加载 4KB 的轻量运行时（gzip 后 1KB），即可实现带初始动画和部分常用交互形式的图表。这一改进将极大地提升页面加载速度，特别是对于移动端的体验。</p>\n<p><img src="" alt="" data-src="images/5-5-0/ssr-example.png"></p>\n<p>以这个带标题的饼图为例，如果按客户端仅打包饼图和标题组件的方案，gzip 后需要 135KB；如果按服务端渲染的方案，渲染结果 SVG gzip 后 1 KB、客户端运行时 gzip 后 1KB，仅为前者体积的 1.5%。交互方面，后者也可以做到初始动画、鼠标移动到图表元素后的高亮，并且获取到点击事件，能够满足大部分的常见交互需求。</p>\n<p>如需使用这一方案，服务端代码和之前一样，但需要保证 ECharts 版本号在 5.5.0 以上。</p>\n<md-code-block lang="ts" code="\'Ly8g5pyN5Yqh56uv5Luj56CBCmNvbnN0IGVjaGFydHMgPSByZXF1aXJlKCdlY2hhcnRzJyk7CgovLyDlnKggU1NSIOaooeW8j-S4i-esrOS4gOS4quWPguaVsOS4jemcgOimgeWGjeS8oOWFpSBET00g5a-56LGhCmxldCBjaGFydCA9IGVjaGFydHMuaW5pdChudWxsLCBudWxsLCB7CiAgcmVuZGVyZXI6ICdzdmcnLCAvLyDlv4Xpobvkvb_nlKggU1ZHIOaooeW8jwogIHNzcjogdHJ1ZSwgLy8g5byA5ZCvIFNTUgogIHdpZHRoOiA0MDAsIC8vIOmcgOimgeaMh-aYjumrmOWSjOWuve-8jOWmguaenOaYr-agueaNruWuouaIt-err-WuueWZqOWkp-Wwj-WKqOaAgeeahO-8jOivpeWAvOmcgOimgeS7juWuouaIt-err-W-l-WIsAogIGhlaWdodDogMzAwCn0pOwoKLy8g5YOP5q2j5bi45L2_55So5LiA5qC3IHNldE9wdGlvbgpjaGFydC5zZXRPcHRpb24oewogIC8vLi4uCn0pOwoKLy8g6L6T5Ye65a2X56ym5LiyCmNvbnN0IHN2Z1N0ciA9IGNoYXJ0LnJlbmRlclRvU1ZHU3RyaW5nKCk7CgovLyDosIPnlKggZGlzcG9zZSDku6Xph4rmlL7lhoXlrZgKY2hhcnQuZGlzcG9zZSgpOwpjaGFydCA9IG51bGw7CgovLyDpgJrov4cgSFRUUCBSZXNwb25zZSDov5Tlm54gc3ZnU3RyIOe7meWJjeerr-aIluiAhee8k-WtmOWIsOacrOWcsO-8iOi_memHjOS7pSBFeHByZXNzLmpzIOS4uuS-i--8ie-8mgpyZXMud3JpdGVIZWFkKDIwMCwgewogICdDb250ZW50LVR5cGUnOiAnYXBwbGljYXRpb24veG1sJwp9KTsKcmVzLndyaXRlKHN2Z1N0cik7CnJlcy5lbmQoKTs\'" line-highlights="\'\'" />\n<p>客户端将得到的 SVG 字符串添加到容器中，并绑定轻量运行时：</p>\n<md-code-block lang="html" code="\'PGRpdiBpZD0iY2hhcnQtY29udGFpbmVyIiBzdHlsZT0id2lkdGg6ODAwcHg7aGVpZ2h0OjYwMHB4Ij48L2Rpdj4KCjxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2VjaGFydHMvc3NyL2NsaWVudC9kaXN0L2luZGV4Lm1pbi5qcyI-PC9zY3JpcHQ-CjxzY3JpcHQ-CmNvbnN0IHNzckNsaWVudCA9IHdpbmRvd1snZWNoYXJ0cy1zc3ItY2xpZW50J107Cgpjb25zdCBpc1Nlcmllc1Nob3duID0gewogIGE6IHRydWUsCiAgYjogdHJ1ZQp9OwoKZnVuY3Rpb24gdXBkYXRlQ2hhcnQoc3ZnU3RyKSB7CiAgY29uc3QgY29udGFpbmVyID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2NoYXJ0LWNvbnRhaW5lcicpOwogIGNvbnRhaW5lci5pbm5lckhUTUwgPSBzdmdTdHI7CgogIC8vIOS9v-eUqOi9u-mHj-i_kOihjOaXtui1i-S6iOWbvuihqOS6pOS6kuiDveWKmwogIHNzckNsaWVudC5oeWRyYXRlKGNvbnRhaW5lciwgewogICAgb246IHsKICAgICAgY2xpY2s6IChwYXJhbXMpID0-IHsKICAgICAgICBpZiAocGFyYW1zLnNzclR5cGUgPT09ICdsZWdlbmQnKSB7CiAgICAgICAgICAvLyDngrnlh7vlm77kvovlhYPntKDvvIzor7fmsYLmnI3liqHlmajov5vooYzkuozmrKHmuLLmn5MKICAgICAgICAgIGlzU2VyaWVzU2hvd25bcGFyYW1zLnNlcmllc05hbWVdID0gIWlzU2VyaWVzU2hvd25bcGFyYW1zLnNlcmllc05hbWVdOwogICAgICAgICAgZmV0Y2goJy4uLj9zZXJpZXM9JyArIEpTT04uc3RyaW5naWZ5KGlzU2VyaWVzU2hvd24pKQogICAgICAgICAgICAudGhlbihyZXMgPT4gcmVzLnRleHQoKSkKICAgICAgICAgICAgLnRoZW4oc3ZnU3RyID0-IHsKICAgICAgICAgICAgICB1cGRhdGVDaGFydChzdmdTdHIpOwogICAgICAgICAgICB9KTsKICAgICAgICB9CiAgICAgIH0KICAgIH0KICB9KTsKfQoKLy8g6YCa6L-HIEFKQVgg6K-35rGC6I635Y-W5pyN5Yqh56uv5riy5p-T55qEIFNWRyDlrZfnrKbkuLIKZmV0Y2goJy4uLicpCiAgLnRoZW4ocmVzID0-IHJlcy50ZXh0KCkpCiAgLnRoZW4oc3ZnU3RyID0-IHsKICAgIHVwZGF0ZUNoYXJ0KHN2Z1N0cik7CiAgfSk7Cjwvc2NyaXB0Pg\'" line-highlights="\'\'" />\n<p>客户端轻量运行时必须配合 SVG 形式的服务端渲染结果使用，支持以下交互：</p>\n<ul>\n<li>图表初始动画（实现原理：服务端渲染的 SVG 带有 CSS 动画）</li>\n<li>高亮样式（实现原理：服务端渲染的 SVG 带有 CSS 动画）</li>\n<li>动态改变数据（实现原理：轻量运行时请求服务器进行二次渲染）</li>\n<li>点击图例切换系列是否显示（实现原理：轻量运行时请求服务器进行二次渲染）</li>\n</ul>\n<p>可以发现，这能够满足大部分的交互场景需求。如果需要更复杂的交互，则客户端需要加载 <code>echarts.js</code> 实现完整功能。完整的介绍请参见<a href="zh/how-to/cross-platform/server">服务端渲染 ECharts 图表</a>。</p>\n<h2 id="%E6%95%B0%E6%8D%AE%E4%B8%8B%E9%92%BB%E6%94%AF%E6%8C%81%E8%BF%87%E6%B8%A1%E5%8A%A8%E7%94%BB" tabindex="-1">数据下钻支持过渡动画</h2>\n<p>在 5.5.0 版本中，我们新增了 <code>childGroupId</code> 配置项，可以实现数据下钻的过渡动画功能。</p>\n<p>在之前的版本中，我们已经支持使用 <code>groupId</code>，用以表示当前数据所属的组别。而这次新增的 <code>childGroupId</code> 则可以用来表明当前数据本身的组别，与 <code>groupId</code> 配合使用后形成一个“父-子-孙”的关系链条。当用户点击图表中的数据元素时，图表会以过渡动画的形式展示下钻的数据。</p>\n<md-example src="bar-multi-drilldown" width="100%" height="400" />\n<p>开发者只需要指定 <code>groupId</code> 和 <code>childGroupId</code>，ECharts 就会自动处理层级关系，实现过渡动画。</p>\n<h2 id="%E9%A5%BC%E5%9B%BE%E6%94%AF%E6%8C%81%E6%89%87%E5%8C%BA%E4%B9%8B%E9%97%B4%E7%9A%84%E9%97%B4%E9%9A%94" tabindex="-1">饼图支持扇区之间的间隔</h2>\n<p>通过设置饼图扇区之间的间隔，可以让饼图的数据块之间更加清晰，并且形成独特的视觉效果。参见（<a href="https://echarts.apache.org/option.html#series-pie.padAngle">series-pie.padAngle</a>）。</p>\n<md-example src="pie-padAngle" width="100%" height="400" />\n<h2 id="%E9%A5%BC%E5%9B%BE%E5%92%8C%E6%9E%81%E5%9D%90%E6%A0%87%E7%B3%BB%E6%94%AF%E6%8C%81%E7%BB%93%E6%9D%9F%E8%A7%92%E5%BA%A6" tabindex="-1">饼图和极坐标系支持结束角度</h2>\n<p>结束角度的配置项使得我们可以制作半圆形等不完整的饼图。参见（<a href="https://echarts.apache.org/option.html#series-pie.endAngle">series-pie.endAngle</a>）。</p>\n<md-example src="pie-half-donut" width="100%" height="400" />\n<p>极坐标系也同样支持了结束角度，可以制作出更加丰富的极坐标图表。参见（<a href="https://echarts.apache.org/option.html#angleAxis.endAngle">angleAxis.endAngle</a>）。</p>\n<md-example src="polar-endAngle" width="100%" height="400" />\n<h2 id="%E6%96%B0%E5%A2%9E-min-max-%E9%87%87%E6%A0%B7%E6%96%B9%E5%BC%8F" tabindex="-1">新增 <code>min-max</code> 采样方式</h2>\n<p>ECharts 的 <a href="https://echarts.apache.org/option.html#series-line.sampling">sampling</a> 配置项允许设置折线图在数据量远大于像素点时候的降采样策略，开启后可以有效的优化图表的绘制效率。在 5.5.0 版本中，我们新增了 <code>min-max</code> 采样方式，可以在保留数据的整体趋势的同时，更加精确的展示数据的极值。</p>\n<h2 id="%E6%96%B0%E5%A2%9E%E4%B8%A4%E7%A7%8D%E8%AF%AD%E8%A8%80%EF%BC%9A%E9%98%BF%E6%8B%89%E4%BC%AF%E8%AF%AD%E5%92%8C%E8%8D%B7%E5%85%B0%E8%AF%AD" tabindex="-1">新增两种语言：阿拉伯语和荷兰语</h2>\n<p>在 5.5.0 版本中，我们新增了阿拉伯语（AR）和荷兰语（NL）两种语言的支持。开发者可以通过 <a href="https://echarts.apache.org/api.html#echarts.registerLocale">echarts.registerLocale</a> 方法注册新的语言包。</p>\n<h2 id="%E6%8F%90%E7%A4%BA%E6%A1%86%E6%94%AF%E6%8C%81%E6%8C%87%E5%AE%9A%E5%AE%B9%E5%99%A8" tabindex="-1">提示框支持指定容器</h2>\n<p>在之前的版本中，提示框（Tooltip）只能插入到图表容器或者 <code>document.body</code> 中。现在，可以通过 <a href="https://echarts.apache.org/option.html#tooltip.appendTo">tooltip.appendTo</a> 指定容器，从而能更灵活地控制提示框的位置。</p>\n<h2 id="%E5%9D%90%E6%A0%87%E8%BD%B4%E6%9C%80%E5%A4%A7%E3%80%81%E6%9C%80%E5%B0%8F%E6%A0%87%E7%AD%BE%E7%9A%84%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F" tabindex="-1">坐标轴最大、最小标签的对齐方式</h2>\n<p>在 5.5.0 版本中，我们新增了 <a href="https://echarts.apache.org/option.html#xAxis.axisLabel.alignMinLabel">axisLabel.alignMinLabel</a> 和 <a href="https://echarts.apache.org/option.html#xAxis.axisLabel.alignMaxLabel">axisLabel.alignMaxLabel</a> 配置项，可以控制坐标轴最大、最小标签的对齐方式。如果图表绘图区域比较大，不希望坐标轴标签溢出，可以将最大、最小标签分别对齐到右和左。</p>\n<md-example src="doc-example/axis-label-align-min-max" width="100%" height="400" />\n<h2 id="%E8%B1%A1%E5%BD%A2%E6%9F%B1%E5%9B%BE%E6%94%AF%E6%8C%81%E8%A3%81%E5%89%AA" tabindex="-1">象形柱图支持裁剪</h2>\n<p>象形柱图可能存在超过绘图区域的情况，如果希望避免这种情况，可以通过 <a href="https://echarts.apache.org/option.html#series-pictorialBar.clip">series-pictorialBar.clip</a> 配置项进行裁剪。</p>\n<h2 id="%E6%8F%90%E7%A4%BA%E6%A1%86-valueformatter-%E5%A2%9E%E5%8A%A0-dataindex-%E5%8F%82%E6%95%B0" tabindex="-1">提示框 valueFormatter 增加 dataIndex 参数</h2>\n<p><code>valueFormatter</code> 可以用来自定义提示框内容中数值的部分，现在新增了 <code>dataIndex</code> 参数，可以用来获取当前数据的索引。</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-5-0">版本更新</a></p>\n',postPath:"zh/basics/release-note/5-5-0",title:"5.5 - 版本特性 - 入门篇"}],fetch:{},error:null,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:r},{title:"在项目中引入 ECharts",dir:l},{title:"资源列表",dir:n,draft:t},{title:"寻求帮助",dir:o},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:h},{title:"v4 升级 v5 指南",dir:p},{title:5.2,dir:s},{title:5.3,dir:g},{title:5.4,dir:E},{title:5.5,dir:A}]}]},{title:"概念篇",dir:C,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:B,draft:t},{title:"系列",dir:I,draft:t},{title:"样式",dir:u},{title:"数据集",dir:b},{title:"数据转换",dir:v},{title:"坐标系",dir:y,draft:t},{title:"坐标轴",dir:L},{title:"视觉映射",dir:i},{title:"图例",dir:W},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:G,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:f},{title:"堆叠柱状图",dir:Z},{title:"动态排序柱状图",dir:w},{title:"极坐标系柱状图",dir:F,draft:t},{title:"阶梯瀑布图",dir:j},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:N,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:D},{title:"区域面积图",dir:K},{title:"平滑曲线图",dir:O},{title:"阶梯线图",dir:R}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:H},{title:"圆环图",dir:V},{title:"南丁格尔图（玫瑰图）",dir:k}]},{title:"散点图",dir:Y,children:[{title:"基础散点图",dir:X}]}]},{title:"移动端优化",dir:e,draft:t},{title:"跨平台方案",dir:P,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:J},{title:"数据下钻",dir:T,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:U}]},{title:"动画",dir:M,children:[{title:"数据过渡动画",dir:q}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:t},{title:"智能指针吸附",dir:$}]}]},{title:"最佳实践",dir:tt,children:[{title:"移动端优化",dir:e,draft:t},{title:et,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:at}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:r},{title:"Import ECharts",dir:l},{title:"Resources",dir:n,draft:t},{title:"Get Help",dir:o},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:h},{title:"Migration from v4 to v5",dir:p},{title:5.2,dir:s},{title:5.3,dir:g},{title:5.4,dir:E},{title:5.5,dir:A}]}]},{title:"Concepts",dir:C,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:B,draft:t},{title:"Series",dir:I,draft:t},{title:"Style",dir:u},{title:"Dataset",dir:b},{title:"Data Transform",dir:v},{title:"Coordinate",dir:y,draft:t},{title:"Axis",dir:L},{title:"Visual Mapping",dir:i},{title:"Legend",dir:W},{title:"Event and Action",dir:S}]},{title:"How To Guides",dir:G,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:f},{title:"Stacked Bar",dir:Z},{title:"Bar Racing",dir:w},{title:"Bar Polar",dir:F,draft:t},{title:"Waterfall",dir:j}]},{title:"Line",dir:N,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:D},{title:"Area Chart",dir:K},{title:"Smoothed Line",dir:O},{title:"Step Line",dir:R}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:H},{title:"Ring Style",dir:V},{title:"Rose Style",dir:k}]},{title:"Scatter",dir:Y,children:[{title:"Basic Scatter",dir:X}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:P,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:J},{title:"Drilldown",dir:T,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:U}]},{title:"Animation",dir:M,children:[{title:"Data Transition",dir:q}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:t},{title:"Intelligent Pointer Snapping",dir:$}]}]},{title:"Best Practices",dir:tt,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:et,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:at}]}]},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:t,routePath:"/zh/basics/release-note/5-5-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","5-5-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/39f47d5.js" defer></script><script src="/handbook/_nuxt/js/e6d1a07e1c4601004948.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/370a69432553765ab9ac.js" defer></script><noscript data-n-head="ssr" data-body="true"><div class="no-script"><strong>很抱歉，Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript>
    <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
    <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>