<!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>ECharts 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/27aea4e.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/b2745ba5a9e837085587.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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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" class="nav-link"><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-%E6%96%B0%E7%89%B9%E6%80%A7" tabindex="-1">Apache ECharts 5 新特性</h1> <p>数据可视化在过去的几年中得到了长足的发展。开发者对于可视化产品的期待不再是简单的图表创建工具，而在交互、性能、数据处理等方面有了更高级的需求。</p> <p>Apache ECharts 始终致力于让开发者以更方便的方式创造灵活丰富的可视化作品。在最新推出的 Apache ECharts 5，我们着力加强了图表的叙事能力，让开发者可以以更简单的方式，讲述数据背后的故事。</p> <img data-src="images/feature-v5/echarts-5.png" width="800px"> <p>“表·达”是 Apache ECharts 5 的核心，通过五大模块、十五项特性的全面升级，围绕可视化作品的叙事表达能力，让图“表”更能传“达”数据背后的故事，帮助开发者更轻松地创造满足各种场景需求的可视化作品。</p> <h2 id="%E5%8A%A8%E6%80%81%E5%8F%99%E4%BA%8B" tabindex="-1">动态叙事</h2> <p>动画对于人类认知的重要性不言而喻。在之前的作品中，我们会通过初始化动画和过渡动画帮助用户理解数据变换之间的联系，让图表的出现和变换显得不那么生硬。这次，我们更是大幅度增强了我们的动画叙事能力，希望能够进一步发挥动画对于用户认知的帮助作用，借助图表的动态叙事功能，帮助用户更容易理解图表背后表达的故事。</p> <h4 id="%E5%8A%A8%E6%80%81%E6%8E%92%E5%BA%8F%E5%9B%BE" tabindex="-1">动态排序图</h4> <p>Apache ECharts 5 新增支持动态排序柱状图（bar-racing）以及动态排序折线图（line-racing），帮助开发者方便地创建带有时序性的图表，展现数据随着时间维度上的变化，讲述数据的演变过程。</p> <iframe width="700" height="400" src=""></iframe> <iframe width="700" height="400" src=""></iframe> <p>动态排序图展现了不同的类目随着时间在排名上的衍变。而开发者只需要通过几行简单的配置项就可以在 ECharts 中开启这样的效果。</p> <h4 id="%E8%87%AA%E5%AE%9A%E4%B9%89%E7%B3%BB%E5%88%97%E5%8A%A8%E7%94%BB" tabindex="-1">自定义系列动画</h4> <p>除了动态排序图，Apache ECharts 5 在自定义系列中提供了更加丰富强大的动画效果，支持标签数值文本的插值动画，图形的形变（morph）、分裂（separate）、合并（combine）等效果的过渡动画。</p> <p>想象一下，用这些动态效果，你可以创造出多么令人称奇的可视化作品！</p> <h2 id="%E8%A7%86%E8%A7%89%E8%AE%BE%E8%AE%A1" tabindex="-1">视觉设计</h2> <p>视觉设计的作用并不仅仅是为了让图表更好看，更重要的是，符合可视化原理的设计可以帮用户更快速地理解图表想表达的内容，并且尽可能消除不良设计带来的误解。</p> <h4 id="%E9%BB%98%E8%AE%A4%E8%AE%BE%E8%AE%A1" tabindex="-1">默认设计</h4> <p>我们发现，有很大一部分开发者使用了 ECharts 默认的主题样式，因而设计优雅、符合可视化原理的默认主题设计是非常重要的。在 Apache ECharts 5 中，我们重新设计了默认的主题样式，针对不同的系列和组件分别做了优化调整。以主题色为例，我们考量了颜色之间的区分度、与背景色的对比度、相邻颜色的和谐度等因素，并且确保色觉辨识障碍人士也能清楚地区分数据。</p> <img data-src="images/feature-v5/theme-color.png" width="400px"> <p>我们以最常用的柱状图为例，来看看新版本浅色主题和深色主题的样式：</p> <img data-src="images/feature-v5/new-theme-light.png" width="500px"> <img data-src="images/feature-v5/new-theme-dark.png" width="500px"> <p>对于折线图，我们做了比较直观的一个改变就是去掉了直角坐标系最左侧数据轴Y轴的默认显示。左侧是原本默认的折线图的样式，其实通过中间的几条数据分割线，我们就已经可以定位折线图的每个数据值。因此我们希望通过减少不必要的图形元素，来达到更清晰地传递信息的目的。</p> <img data-src="images/feature-v5/yAxis-default-style-change.webp" width="500px"> <p>对于数据区域缩放，时间轴等交互组件，我们也设计了全新的样式并且提供了更好的交互体验：</p> <img data-src="images/feature-v5/dataZoom.png" width="500px"> <img data-src="images/feature-v5/timeline.png" width="500px"> <h4 id="%E6%A0%87%E7%AD%BE" tabindex="-1">标签</h4> <p>标签是图表中的核心元素之一，清晰而明确的标签可以帮助用户对数据有更准确的理解。Apache ECharts 5 提供了多种新的标签功能，让密集的标签能清晰显示、准确表意。</p> <p>Apache ECharts 5 可以通过一个配置项开启自动隐藏重叠的标签。对于超出显示区域的标签，可以选择自动截断或者换行。密集的饼图标签，现在有了更美观的自动排布。</p> <p>这些功能可以帮助避免文字过于密集影响可读性。并且，无需开发者编写额外的代码就能默认生效，大大简化了开发者的开发成本。</p> <p>我们也提供了多个配置项来让开发者主动控制标签的布局策略，例如标签拖动、整体显示在画布边缘，用引导线和图形元素连接，并且仍可联动高亮表达关联关系。</p> <p>新的标签功能可以让你在移动端这样局限的空间内也可以有很优雅的标签展示：</p> <img data-src="images/feature-v5/pie-label.png" width="400px"> <h4 id="%E6%97%B6%E9%97%B4%E8%BD%B4" tabindex="-1">时间轴</h4> <p>Apache ECharts 5 带来了适于表达时间标签刻度的时间轴。时间轴的默认设计更突出重要的信息，并且提供了更灵活的定制化能力，让开发者根据不同的需求定制时间轴的标签内容。</p> <p>首先，时间轴不再如之前般绝对平均分割，而是选取年、月、日、整点这类更有意义的点来展示，并且能同时显示不同层级的刻度。标签的 <code>formatter</code> 支持了时间模版（例如 <code>{yyyy}-{MM}-{dd}</code>），并且可以为不同时间粒度的标签指定不同的 <code>formatter</code>，结合已有的富文本标签，可以定制出醒目而多样的时间效果。</p> <p>不同的 dataZoom 粒度下时间刻度的显示：</p> <img data-src="images/feature-v5/time-axis.png" width="600px"> <img data-src="images/feature-v5/time-axis-2.png" width="600px"> <h4 id="%E6%8F%90%E7%A4%BA%E6%A1%86" tabindex="-1">提示框</h4> <p>提示框（Tooltip）是一种最常用的可视化组件，可以帮助用户交互式地了解数据的详细信息。在 Apache ECharts 5 中，我们对提示框的样式进行了优化，通过对字体样式，颜色的调整，指向图形的箭头，跟随图形颜色的边框色等功能，让提示框的默认展示优雅又清晰。并且改进了富文本的渲染逻辑，确保显示效果与 HTML 方式一致，让用户在不同场景下可以选择不同的技术方案实现同样的效果。</p> <img data-src="images/feature-v5/new-tooltip.png" width="400px"> <img data-src="images/feature-v5/new-tooltip-2.png" width="400px"> <p>除此之外，我们这次也加上了提示框内的列表按照数值大小或者类目顺序排序的功能。</p> <h4 id="%E4%BB%AA%E8%A1%A8%E7%9B%98" tabindex="-1">仪表盘</h4> <p>我们看到社区用户创建了很多酷炫的仪表盘图表，但是他们的配置方式往往比较复杂而取巧。因此，我们对仪表盘的功能作了全面升级，支持了图片或者矢量路径绘制指针、也支持了锚点（anchor）配置项、进度条（progress）、圆角效果等等配置项。</p> <p>不同样式的仪表盘指针：</p> <img data-src="images/feature-v5/gauge-pointer.png" width="600px"> <p>这些升级，不仅可以让开发者用更简单的配置项实现酷炫的效果，而且带来了更丰富的定制能力。</p> <iframe width="600" height="600" src=""></iframe> <h4 id="%E6%89%87%E5%BD%A2%E5%9C%86%E8%A7%92" tabindex="-1">扇形圆角</h4> <p>圆角可以带来更美观而柔和的视觉，也能够赋予更多的创造力。Apache ECharts 5 支持了饼图、旭日图、矩形树图的扇形圆角。可不要小看了简单的圆角配置项，合理地搭配其他的效果，就可以形成更具个性的的可视化作品。</p> <iframe width="400" height="400" src=""></iframe> <h2 id="%E4%BA%A4%E4%BA%92%E8%83%BD%E5%8A%9B" tabindex="-1">交互能力</h2> <p>可视化作品的交互能力帮助用户探索了解作品，加深对于图表主旨的理解。</p> <h4 id="%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86" tabindex="-1">状态管理</h4> <p>在 ECharts 4 中有高亮（emphasis）和普通（normal）两个交互的状态，在鼠标移到图形上的时候会进入高亮状态以区分该数据，开发者可以分别设置这两个状态的颜色，阴影等样式。</p> <p>这次在 Apache ECharts 5 中，我们在原先的鼠标 hover 高亮的基础上，新增加了<strong>淡出</strong>其它非相关元素的效果，从而可以达到聚焦目标数据的目的。</p> <p>比如在这个<a href="https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category-stack">柱状图</a>的例子中，鼠标移到一个系列上的时候，其它非相关的系列就会淡出，从而可以更清晰的突出聚焦系列中数据的对比。在关系图，树图，旭日图，桑基等更复杂数据结构的图上，也可以通过淡出非相关元素来观察数据之间的联系。而且颜色，阴影等在高亮（emphasis）中可以设置的样式，现在也可以在淡出（blur）状态中设置了。</p> <p>除此之外，我们为所有系列还添加了<strong>点击选中</strong>这个之前只有在饼图、地图等少数系列中才能开启的交互，开发者可以设置为单选或多选模式，并且通过监听 <code>selectchanged</code> 事件获取到选中的所有图形然后进行更进一步的处理。与高亮和淡出一样，选中的样式也可以在 <code>select</code> 中配置。</p> <h4 id="%E6%80%A7%E8%83%BD%E6%8F%90%E5%8D%87" tabindex="-1">性能提升</h4> <h5 id="%E8%84%8F%E7%9F%A9%E5%BD%A2%E6%B8%B2%E6%9F%93" tabindex="-1">脏矩形渲染</h5> <p>Apache ECharts 5 新支持了脏矩形渲染，解决只有局部变化的场景下的性能瓶颈。在使用 Canvas 渲染器时，脏矩形渲染技术探测并只更新视图变化的部分，而不是任何变动都引起画布完全重绘。这能在一些特殊场景下帮助提高渲染帧率，例如在图形很多时候，鼠标频繁触发一些图形高亮的场景。以往这类场景，会使用额外的 Canvas 层以优化性能，但是这种方式不是所有场景都通用，而且对于复杂的样式的效果并不理想。脏矩形渲染很好地同时满足了性能和显示正确。</p> <p>脏矩形的可视化演示，红色框选部分为该帧重绘区域：</p> <img data-src="images/feature-v5/dirty-rect.gif" width="500px"> <p>大家在新的示例页面选择开启脏矩形优化就可以看到该效果。</p> <h5 id="%E5%AE%9E%E6%97%B6%E6%97%B6%E5%BA%8F%E6%95%B0%E6%8D%AE%E7%9A%84%E6%8A%98%E7%BA%BF%E5%9B%BE%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96" tabindex="-1">实时时序数据的折线图性能优化</h5> <p>除此之外，海量数据下折线图的性能也有了大幅度的性能提升。我们经常碰到大量的实时时序数据的高性能绘制的需求，这些数据可能需要几百或者几十毫秒更新一次。</p> <p>Apache ECharts 5 对这些场景下的 CPU 消耗、内存占用、初始化时间都进行了深度的优化，使得百万量级的数据也能做到实时的更新（每次更新耗时少于 30ms），甚至对于千万级的数据，也可以在 1s 内渲染完，并且保持很小的内存占用以及流畅的提示框（tooltip）等交互。</p> <h2 id="%E5%BC%80%E5%8F%91%E4%BD%93%E9%AA%8C" tabindex="-1">开发体验</h2> <p>我们希望如此强大的可视化工具可以被更多开发者以更简单的方式使用，因而开发者的开发体验也是我们非常关注的方面。</p> <h4 id="%E6%95%B0%E6%8D%AE%E9%9B%86" tabindex="-1">数据集</h4> <p>ECharts 5 加强了数据集的数据转换能力，让开发者可以使用简单的方式实现常用的数据处理，如：数据过滤（filter）、排序（sort）、聚合（aggregate）、直方图（histogram）、简单聚类（clustering）、回归线计算（regression）等。开发者可以用统一的声明式方式来使用这些功能，可以方便地实现常用的数据操作。</p> <h4 id="%E5%9B%BD%E9%99%85%E5%8C%96" tabindex="-1">国际化</h4> <p>ECharts 原有的国际化方案，采用的是根据不同的语言参数打包出不同的部署文件的形式。​ 这种方式，使动态的语言和静态的代码包绑定在一起，使用的时候只能通过重新加载不同语言版本的 ECharts 代码来达到切换语言的目的。</p> <p>因此，从 Apache ECharts 5 开始，动态的语言包和静态的代码包分离开。切换语言的时候，只需要加载相应语言包 ​，通过类似挂载主题的方式，使用 <code>registerLocale</code> 函数挂载语言包对象 ​，重新初始化后就完成了语言的切换 ​。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// import the lang object and set when init​</span>
echarts<span class="token punctuation">.</span><span class="token function">registerLocale</span><span class="token punctuation">(</span><span class="token string">'DE'</span><span class="token punctuation">,</span> lang<span class="token punctuation">)</span><span class="token punctuation">;</span>​
echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>DomElement<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>​
   <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token string">'DE'</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> <h4 id="typescript-%E9%87%8D%E6%9E%84" tabindex="-1">TypeScript 重构</h4> <p>在近 8 年的时间里，Apache ECharts 已经发展成一个非常复杂的可视化库了，为了可以更安全高效的进行重构和新功能的开发，我们在 Apache ECharts 5 的开发之初，使用 TypeScript 对代码进行了重写，TypeScript 所带来的强类型让我们更有信心地在 ECharts 5 开发的时候对代码进行大刀阔斧的重构以实现更多令人激动人心的特性。</p> <p>对于开发者，我们也可以从 TypeScript 代码直接生成更好更符合代码的<code>DTS</code>类型描述文件。在此之前，ECharts 的类型描述文件一直是由社区开发者帮我们维护并发布到 <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/echarts">DefinitelyTyped</a>，这个有着不小的工作量，非常感谢大家的贡献。</p> <p>除此之外，如果开发者的组件是按需引入的，我们还提供了一个 <code>ComposeOption</code> 类型方法，可以组合出一个只包含了引入组件的配置项类型，可以带来更严格的类型检查，帮助你提前检测到未引入的组件类型。</p> <h2 id="%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7" tabindex="-1">可访问性</h2> <p>Apache ECharts 一直非常重视无障碍设计，我们希望让视觉障碍人士也能平等了解图表传递的信息。并且也希望图表的开发者能以极低的开发成本实现这一点，因而有利于让开发者更愿意为视觉障碍人士提供支持。</p> <p>在上一个大版本中，我们支持了根据不同的图表类型和数据自动一键智能生成图表描述的功能，帮助开发者非常方便地支持图表的 DOM 描述信息。在 ECharts 5 中，我们也做了更多提高可访问性的设计，帮助视觉障碍人士更好地理解图表内容。</p> <h4 id="%E4%B8%BB%E9%A2%98%E9%85%8D%E8%89%B2" tabindex="-1">主题配色</h4> <p>我们在设计新版默认主题样式的时候，将无障碍设计作为一个重要的考量依据，对颜色的明度和色值都进行反复测试，帮助视觉辨识障碍用户清楚地识别图表数据。​</p> <p>并且，针对有更进一步无障碍需求的开发者，我们还提供了特殊的高对比度主题，以更高对比度颜色的主题将数据作进一步区分。</p> <h4 id="%E8%B4%B4%E8%8A%B1%E5%9B%BE%E6%A1%88" tabindex="-1">贴花图案</h4> <p>ECharts 5 还新增提供了贴花的功能，用图案辅助颜色表达，进一步帮助用户区分数据。</p> <iframe width="600" height="350" src=""></iframe> <p>此外，贴花图案还能在一些其他的场景下提供帮助，比如：在报纸、书籍之类只有单色或者非常少的颜色的印刷品中，帮助更好地区分数据；用图形元素方便用户对数据产生更直观的理解等。</p> <iframe width="600" height="350" src=""></iframe> <h2 id="%E5%B0%8F%E7%BB%93" tabindex="-1">小结</h2> <p>除了以上介绍的功能，Apache ECharts 还在非常多的细节中做了改进，帮助开发者更轻松地创建默认好用、配置灵活的图表，用图表讲述数据背后的故事。</p> <p>感谢所有使用过 ECharts，甚至参与过社区贡献的开发者，正是你们才使得 Apache ECharts 5 成为可能。我们会以更大的热情投入到未来的开发中，Apache ECharts 也会以更大的诚意和大家在 6 相见！</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/v5-feature.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/plainheart" target="_blank" class="post-contributor"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60" loading="lazy"> <span>plainheart</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60" loading="lazy"> <span>pissang</span></a><a href="https://github.com/jiangmaniu" target="_blank" class="post-contributor"><img alt="jiangmaniu" src="https://avatars.githubusercontent.com/jiangmaniu?size=60" loading="lazy"> <span>jiangmaniu</span></a><a href="https://github.com/LuckyHookin" target="_blank" class="post-contributor"><img alt="LuckyHookin" src="https://avatars.githubusercontent.com/LuckyHookin?size=60" loading="lazy"> <span>LuckyHookin</span></a></div></div></div></div></div></div></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,a,d,n,l,h,p,s,c,o,E,g,m,A,B,b,C,f,x,u,w,v,y,D,S,P,R,k,T,F,L,G,I,V,z,M,W,H,O,_,K,Y,Z,U,j,N,J,Q,X,$,q,tt,it,et,rt){return{layout:"default",data:[{html:'<h1 id="apache-echarts-5-%E6%96%B0%E7%89%B9%E6%80%A7" tabindex="-1">Apache ECharts 5 新特性</h1>\n<p>数据可视化在过去的几年中得到了长足的发展。开发者对于可视化产品的期待不再是简单的图表创建工具，而在交互、性能、数据处理等方面有了更高级的需求。</p>\n<p>Apache ECharts 始终致力于让开发者以更方便的方式创造灵活丰富的可视化作品。在最新推出的 Apache ECharts 5，我们着力加强了图表的叙事能力，让开发者可以以更简单的方式，讲述数据背后的故事。</p>\n<img data-src="images/feature-v5/echarts-5.png" width="800px" />\n<p>“表·达”是 Apache ECharts 5 的核心，通过五大模块、十五项特性的全面升级，围绕可视化作品的叙事表达能力，让图“表”更能传“达”数据背后的故事，帮助开发者更轻松地创造满足各种场景需求的可视化作品。</p>\n<h2 id="%E5%8A%A8%E6%80%81%E5%8F%99%E4%BA%8B" tabindex="-1">动态叙事</h2>\n<p>动画对于人类认知的重要性不言而喻。在之前的作品中，我们会通过初始化动画和过渡动画帮助用户理解数据变换之间的联系，让图表的出现和变换显得不那么生硬。这次，我们更是大幅度增强了我们的动画叙事能力，希望能够进一步发挥动画对于用户认知的帮助作用，借助图表的动态叙事功能，帮助用户更容易理解图表背后表达的故事。</p>\n<h4 id="%E5%8A%A8%E6%80%81%E6%8E%92%E5%BA%8F%E5%9B%BE" tabindex="-1">动态排序图</h4>\n<p>Apache ECharts 5 新增支持动态排序柱状图（bar-racing）以及动态排序折线图（line-racing），帮助开发者方便地创建带有时序性的图表，展现数据随着时间维度上的变化，讲述数据的演变过程。</p>\n<md-example src="bar-race-country" width="700" height="400" />\n<md-example src="line-race" width="700" height="400" />\n<p>动态排序图展现了不同的类目随着时间在排名上的衍变。而开发者只需要通过几行简单的配置项就可以在 ECharts 中开启这样的效果。</p>\n<h4 id="%E8%87%AA%E5%AE%9A%E4%B9%89%E7%B3%BB%E5%88%97%E5%8A%A8%E7%94%BB" tabindex="-1">自定义系列动画</h4>\n<p>除了动态排序图，Apache ECharts 5 在自定义系列中提供了更加丰富强大的动画效果，支持标签数值文本的插值动画，图形的形变（morph）、分裂（separate）、合并（combine）等效果的过渡动画。</p>\n<p>想象一下，用这些动态效果，你可以创造出多么令人称奇的可视化作品！</p>\n<h2 id="%E8%A7%86%E8%A7%89%E8%AE%BE%E8%AE%A1" tabindex="-1">视觉设计</h2>\n<p>视觉设计的作用并不仅仅是为了让图表更好看，更重要的是，符合可视化原理的设计可以帮用户更快速地理解图表想表达的内容，并且尽可能消除不良设计带来的误解。</p>\n<h4 id="%E9%BB%98%E8%AE%A4%E8%AE%BE%E8%AE%A1" tabindex="-1">默认设计</h4>\n<p>我们发现，有很大一部分开发者使用了 ECharts 默认的主题样式，因而设计优雅、符合可视化原理的默认主题设计是非常重要的。在 Apache ECharts 5 中，我们重新设计了默认的主题样式，针对不同的系列和组件分别做了优化调整。以主题色为例，我们考量了颜色之间的区分度、与背景色的对比度、相邻颜色的和谐度等因素，并且确保色觉辨识障碍人士也能清楚地区分数据。</p>\n<img data-src="images/feature-v5/theme-color.png" width="400px" />\n<p>我们以最常用的柱状图为例，来看看新版本浅色主题和深色主题的样式：</p>\n<img data-src="images/feature-v5/new-theme-light.png" width="500px" />\n<img data-src="images/feature-v5/new-theme-dark.png" width="500px" />\n<p>对于折线图，我们做了比较直观的一个改变就是去掉了直角坐标系最左侧数据轴Y轴的默认显示。左侧是原本默认的折线图的样式，其实通过中间的几条数据分割线，我们就已经可以定位折线图的每个数据值。因此我们希望通过减少不必要的图形元素，来达到更清晰地传递信息的目的。</p>\n<img data-src="images/feature-v5/yAxis-default-style-change.webp" width="500px" />\n<p>对于数据区域缩放，时间轴等交互组件，我们也设计了全新的样式并且提供了更好的交互体验：</p>\n<img data-src="images/feature-v5/dataZoom.png" width="500px" />\n<img data-src="images/feature-v5/timeline.png" width="500px" />\n<h4 id="%E6%A0%87%E7%AD%BE" tabindex="-1">标签</h4>\n<p>标签是图表中的核心元素之一，清晰而明确的标签可以帮助用户对数据有更准确的理解。Apache ECharts 5 提供了多种新的标签功能，让密集的标签能清晰显示、准确表意。</p>\n<p>Apache ECharts 5 可以通过一个配置项开启自动隐藏重叠的标签。对于超出显示区域的标签，可以选择自动截断或者换行。密集的饼图标签，现在有了更美观的自动排布。</p>\n<p>这些功能可以帮助避免文字过于密集影响可读性。并且，无需开发者编写额外的代码就能默认生效，大大简化了开发者的开发成本。</p>\n<p>我们也提供了多个配置项来让开发者主动控制标签的布局策略，例如标签拖动、整体显示在画布边缘，用引导线和图形元素连接，并且仍可联动高亮表达关联关系。</p>\n<p>新的标签功能可以让你在移动端这样局限的空间内也可以有很优雅的标签展示：</p>\n<img data-src="images/feature-v5/pie-label.png" width="400px" />\n<h4 id="%E6%97%B6%E9%97%B4%E8%BD%B4" tabindex="-1">时间轴</h4>\n<p>Apache ECharts 5 带来了适于表达时间标签刻度的时间轴。时间轴的默认设计更突出重要的信息，并且提供了更灵活的定制化能力，让开发者根据不同的需求定制时间轴的标签内容。</p>\n<p>首先，时间轴不再如之前般绝对平均分割，而是选取年、月、日、整点这类更有意义的点来展示，并且能同时显示不同层级的刻度。标签的 <code>formatter</code> 支持了时间模版（例如 <code>{yyyy}-{MM}-{dd}</code>），并且可以为不同时间粒度的标签指定不同的 <code>formatter</code>，结合已有的富文本标签，可以定制出醒目而多样的时间效果。</p>\n<p>不同的 dataZoom 粒度下时间刻度的显示：</p>\n<img data-src="images/feature-v5/time-axis.png" width="600px" />\n<img data-src="images/feature-v5/time-axis-2.png" width="600px" />\n<h4 id="%E6%8F%90%E7%A4%BA%E6%A1%86" tabindex="-1">提示框</h4>\n<p>提示框（Tooltip）是一种最常用的可视化组件，可以帮助用户交互式地了解数据的详细信息。在 Apache ECharts 5 中，我们对提示框的样式进行了优化，通过对字体样式，颜色的调整，指向图形的箭头，跟随图形颜色的边框色等功能，让提示框的默认展示优雅又清晰。并且改进了富文本的渲染逻辑，确保显示效果与 HTML 方式一致，让用户在不同场景下可以选择不同的技术方案实现同样的效果。</p>\n<img data-src="images/feature-v5/new-tooltip.png" width="400px" />\n<img data-src="images/feature-v5/new-tooltip-2.png" width="400px" />\n<p>除此之外，我们这次也加上了提示框内的列表按照数值大小或者类目顺序排序的功能。</p>\n<h4 id="%E4%BB%AA%E8%A1%A8%E7%9B%98" tabindex="-1">仪表盘</h4>\n<p>我们看到社区用户创建了很多酷炫的仪表盘图表，但是他们的配置方式往往比较复杂而取巧。因此，我们对仪表盘的功能作了全面升级，支持了图片或者矢量路径绘制指针、也支持了锚点（anchor）配置项、进度条（progress）、圆角效果等等配置项。</p>\n<p>不同样式的仪表盘指针：</p>\n<img data-src="images/feature-v5/gauge-pointer.png" width="600px" />\n<p>这些升级，不仅可以让开发者用更简单的配置项实现酷炫的效果，而且带来了更丰富的定制能力。</p>\n<md-example src="gauge-clock" width="600" height="600" />\n<h4 id="%E6%89%87%E5%BD%A2%E5%9C%86%E8%A7%92" tabindex="-1">扇形圆角</h4>\n<p>圆角可以带来更美观而柔和的视觉，也能够赋予更多的创造力。Apache ECharts 5 支持了饼图、旭日图、矩形树图的扇形圆角。可不要小看了简单的圆角配置项，合理地搭配其他的效果，就可以形成更具个性的的可视化作品。</p>\n<md-example src="sunburst-borderRadius" width="400" height="400" />\n<h2 id="%E4%BA%A4%E4%BA%92%E8%83%BD%E5%8A%9B" tabindex="-1">交互能力</h2>\n<p>可视化作品的交互能力帮助用户探索了解作品，加深对于图表主旨的理解。</p>\n<h4 id="%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86" tabindex="-1">状态管理</h4>\n<p>在 ECharts 4 中有高亮（emphasis）和普通（normal）两个交互的状态，在鼠标移到图形上的时候会进入高亮状态以区分该数据，开发者可以分别设置这两个状态的颜色，阴影等样式。</p>\n<p>这次在 Apache ECharts 5 中，我们在原先的鼠标 hover 高亮的基础上，新增加了<strong>淡出</strong>其它非相关元素的效果，从而可以达到聚焦目标数据的目的。</p>\n<p>比如在这个<a href="https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category-stack">柱状图</a>的例子中，鼠标移到一个系列上的时候，其它非相关的系列就会淡出，从而可以更清晰的突出聚焦系列中数据的对比。在关系图，树图，旭日图，桑基等更复杂数据结构的图上，也可以通过淡出非相关元素来观察数据之间的联系。而且颜色，阴影等在高亮（emphasis）中可以设置的样式，现在也可以在淡出（blur）状态中设置了。</p>\n<p>除此之外，我们为所有系列还添加了<strong>点击选中</strong>这个之前只有在饼图、地图等少数系列中才能开启的交互，开发者可以设置为单选或多选模式，并且通过监听 <code>selectchanged</code> 事件获取到选中的所有图形然后进行更进一步的处理。与高亮和淡出一样，选中的样式也可以在 <code>select</code> 中配置。</p>\n<h4 id="%E6%80%A7%E8%83%BD%E6%8F%90%E5%8D%87" tabindex="-1">性能提升</h4>\n<h5 id="%E8%84%8F%E7%9F%A9%E5%BD%A2%E6%B8%B2%E6%9F%93" tabindex="-1">脏矩形渲染</h5>\n<p>Apache ECharts 5 新支持了脏矩形渲染，解决只有局部变化的场景下的性能瓶颈。在使用 Canvas 渲染器时，脏矩形渲染技术探测并只更新视图变化的部分，而不是任何变动都引起画布完全重绘。这能在一些特殊场景下帮助提高渲染帧率，例如在图形很多时候，鼠标频繁触发一些图形高亮的场景。以往这类场景，会使用额外的 Canvas 层以优化性能，但是这种方式不是所有场景都通用，而且对于复杂的样式的效果并不理想。脏矩形渲染很好地同时满足了性能和显示正确。</p>\n<p>脏矩形的可视化演示，红色框选部分为该帧重绘区域：</p>\n<img data-src="images/feature-v5/dirty-rect.gif" width="500px" />\n<p>大家在新的示例页面选择开启脏矩形优化就可以看到该效果。</p>\n<h5 id="%E5%AE%9E%E6%97%B6%E6%97%B6%E5%BA%8F%E6%95%B0%E6%8D%AE%E7%9A%84%E6%8A%98%E7%BA%BF%E5%9B%BE%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96" tabindex="-1">实时时序数据的折线图性能优化</h5>\n<p>除此之外，海量数据下折线图的性能也有了大幅度的性能提升。我们经常碰到大量的实时时序数据的高性能绘制的需求，这些数据可能需要几百或者几十毫秒更新一次。</p>\n<p>Apache ECharts 5 对这些场景下的 CPU 消耗、内存占用、初始化时间都进行了深度的优化，使得百万量级的数据也能做到实时的更新（每次更新耗时少于 30ms），甚至对于千万级的数据，也可以在 1s 内渲染完，并且保持很小的内存占用以及流畅的提示框（tooltip）等交互。</p>\n<h2 id="%E5%BC%80%E5%8F%91%E4%BD%93%E9%AA%8C" tabindex="-1">开发体验</h2>\n<p>我们希望如此强大的可视化工具可以被更多开发者以更简单的方式使用，因而开发者的开发体验也是我们非常关注的方面。</p>\n<h4 id="%E6%95%B0%E6%8D%AE%E9%9B%86" tabindex="-1">数据集</h4>\n<p>ECharts 5 加强了数据集的数据转换能力，让开发者可以使用简单的方式实现常用的数据处理，如：数据过滤（filter）、排序（sort）、聚合（aggregate）、直方图（histogram）、简单聚类（clustering）、回归线计算（regression）等。开发者可以用统一的声明式方式来使用这些功能，可以方便地实现常用的数据操作。</p>\n<h4 id="%E5%9B%BD%E9%99%85%E5%8C%96" tabindex="-1">国际化</h4>\n<p>ECharts 原有的国际化方案，采用的是根据不同的语言参数打包出不同的部署文件的形式。​ 这种方式，使动态的语言和静态的代码包绑定在一起，使用的时候只能通过重新加载不同语言版本的 ECharts 代码来达到切换语言的目的。</p>\n<p>因此，从 Apache ECharts 5 开始，动态的语言包和静态的代码包分离开。切换语言的时候，只需要加载相应语言包 ​，通过类似挂载主题的方式，使用 <code>registerLocale</code> 函数挂载语言包对象 ​，重新初始化后就完成了语言的切换 ​。</p>\n<md-code-block lang="js" code="\'Ly8gaW1wb3J0IHRoZSBsYW5nIG9iamVjdCBhbmQgc2V0IHdoZW4gaW5pdOKAiwplY2hhcnRzLnJlZ2lzdGVyTG9jYWxlKCdERScsIGxhbmcpO-KAiwplY2hhcnRzLmluaXQoRG9tRWxlbWVudCwgbnVsbCwge-KAiwogICBsb2NhbGU6ICdERSfigIsKfSk7\'" line-highlights="\'\'" />\n<h4 id="typescript-%E9%87%8D%E6%9E%84" tabindex="-1">TypeScript 重构</h4>\n<p>在近 8 年的时间里，Apache ECharts 已经发展成一个非常复杂的可视化库了，为了可以更安全高效的进行重构和新功能的开发，我们在 Apache ECharts 5 的开发之初，使用 TypeScript 对代码进行了重写，TypeScript 所带来的强类型让我们更有信心地在 ECharts 5 开发的时候对代码进行大刀阔斧的重构以实现更多令人激动人心的特性。</p>\n<p>对于开发者，我们也可以从 TypeScript 代码直接生成更好更符合代码的<code>DTS</code>类型描述文件。在此之前，ECharts 的类型描述文件一直是由社区开发者帮我们维护并发布到 <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/echarts">DefinitelyTyped</a>，这个有着不小的工作量，非常感谢大家的贡献。</p>\n<p>除此之外，如果开发者的组件是按需引入的，我们还提供了一个 <code>ComposeOption</code> 类型方法，可以组合出一个只包含了引入组件的配置项类型，可以带来更严格的类型检查，帮助你提前检测到未引入的组件类型。</p>\n<h2 id="%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7" tabindex="-1">可访问性</h2>\n<p>Apache ECharts 一直非常重视无障碍设计，我们希望让视觉障碍人士也能平等了解图表传递的信息。并且也希望图表的开发者能以极低的开发成本实现这一点，因而有利于让开发者更愿意为视觉障碍人士提供支持。</p>\n<p>在上一个大版本中，我们支持了根据不同的图表类型和数据自动一键智能生成图表描述的功能，帮助开发者非常方便地支持图表的 DOM 描述信息。在 ECharts 5 中，我们也做了更多提高可访问性的设计，帮助视觉障碍人士更好地理解图表内容。</p>\n<h4 id="%E4%B8%BB%E9%A2%98%E9%85%8D%E8%89%B2" tabindex="-1">主题配色</h4>\n<p>我们在设计新版默认主题样式的时候，将无障碍设计作为一个重要的考量依据，对颜色的明度和色值都进行反复测试，帮助视觉辨识障碍用户清楚地识别图表数据。​</p>\n<p>并且，针对有更进一步无障碍需求的开发者，我们还提供了特殊的高对比度主题，以更高对比度颜色的主题将数据作进一步区分。</p>\n<h4 id="%E8%B4%B4%E8%8A%B1%E5%9B%BE%E6%A1%88" tabindex="-1">贴花图案</h4>\n<p>ECharts 5 还新增提供了贴花的功能，用图案辅助颜色表达，进一步帮助用户区分数据。</p>\n<md-example src="doc-example/aria-decal-simple" width="600" height="350" />\n<p>此外，贴花图案还能在一些其他的场景下提供帮助，比如：在报纸、书籍之类只有单色或者非常少的颜色的印刷品中，帮助更好地区分数据；用图形元素方便用户对数据产生更直观的理解等。</p>\n<md-example src="doc-example/aria-decal-newspaper" width="600" height="350" />\n<h2 id="%E5%B0%8F%E7%BB%93" tabindex="-1">小结</h2>\n<p>除了以上介绍的功能，Apache ECharts 还在非常多的细节中做了改进，帮助开发者更轻松地创建默认好用、配置灵活的图表，用图表讲述数据背后的故事。</p>\n<p>感谢所有使用过 ECharts，甚至参与过社区贡献的开发者，正是你们才使得 Apache ECharts 5 成为可能。我们会以更大的热情投入到未来的开发中，Apache ECharts 也会以更大的诚意和大家在 6 相见！</p>\n',postPath:"zh/basics/release-note/v5-feature",title:"ECharts 5 特性介绍 - 版本特性 - 入门篇"}],fetch:{},error:null,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:d},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:l,draft:t},{title:"寻求帮助",dir:h},{title:"版本特性",dir:p,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"v4 升级 v5 指南",dir:c},{title:5.2,dir:o},{title:5.3,dir:E},{title:5.4,dir:g},{title:5.5,dir:m}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:B},{title:"配置项",dir:b,draft:t},{title:"系列",dir:C,draft:t},{title:"样式",dir:f},{title:"数据集",dir:x},{title:"数据转换",dir:u},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:v},{title:"视觉映射",dir:e},{title:"图例",dir:y},{title:"事件与行为",dir:D}]},{title:"应用篇",dir:S,children:[{title:"常用图表类型",dir:P,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:R},{title:"堆叠柱状图",dir:k},{title:"动态排序柱状图",dir:T},{title:"极坐标系柱状图",dir:F,draft:t},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:I},{title:"堆叠折线图",dir:V},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:M},{title:"阶梯线图",dir:W}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:H},{title:"圆环图",dir:O},{title:"南丁格尔图（玫瑰图）",dir:_}]},{title:"散点图",dir:K,children:[{title:"基础散点图",dir:Y}]}]},{title:"移动端优化",dir:i,draft:t},{title:"跨平台方案",dir:Z,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:j,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:N}]},{title:"动画",dir:J,children:[{title:"数据过渡动画",dir:Q}]},{title:"交互",dir:X,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t},{title:"智能指针吸附",dir:q}]}]},{title:"最佳实践",dir:tt,children:[{title:"移动端优化",dir:i,draft:t},{title:it,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:rt}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:d},{title:"Import ECharts",dir:n},{title:"Resources",dir:l,draft:t},{title:"Get Help",dir:h},{title:"What's New",dir:p,children:[{title:"ECharts 5 Features",dir:s},{title:"Migration from v4 to v5",dir:c},{title:5.2,dir:o},{title:5.3,dir:E},{title:5.4,dir:g},{title:5.5,dir:m}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:B},{title:"Chart Option",dir:b,draft:t},{title:"Series",dir:C,draft:t},{title:"Style",dir:f},{title:"Dataset",dir:x},{title:"Data Transform",dir:u},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:v},{title:"Visual Mapping",dir:e},{title:"Legend",dir:y},{title:"Event and Action",dir:D}]},{title:"How To Guides",dir:S,children:[{title:"Common Charts",dir:P,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:R},{title:"Stacked Bar",dir:k},{title:"Bar Racing",dir:T},{title:"Bar Polar",dir:F,draft:t},{title:"Waterfall",dir:L}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:I},{title:"Stacked Line",dir:V},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:M},{title:"Step Line",dir:W}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:H},{title:"Ring Style",dir:O},{title:"Rose Style",dir:_}]},{title:"Scatter",dir:K,children:[{title:"Basic Scatter",dir:Y}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:Z,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:j,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:N}]},{title:"Animation",dir:J,children:[{title:"Data Transition",dir:Q}]},{title:"Interaction",dir:X,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t},{title:"Intelligent Pointer Snapping",dir:q}]}]},{title:"Best Practices",dir:tt,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:it,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:rt}]}]},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/v5-feature",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/27aea4e.js" defer></script><script src="/handbook/_nuxt/js/b2745ba5a9e837085587.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>